cloud/music_library
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Use explicit Phoenix 1.8 style layouts

Browse Source
This commit is contained in:
Claudio Ortolina
2025-09-21 21:11:17 +03:00
parent 0071d45998
commit 64cb917a4e
11 changed files with 1907 additions and 1882 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/music_library_web.ex
+2 -2
View File
@@ -62,8 +62,7 @@ defmodule MusicLibraryWeb do
def live_view do def live_view do
quote do quote do
use Phoenix.LiveView, use Phoenix.LiveView
layout: {MusicLibraryWeb.Layouts, :app}
unquote(html_helpers()) unquote(html_helpers())
end end
@@ -102,6 +101,7 @@ defmodule MusicLibraryWeb do
# HTML escaping functionality # HTML escaping functionality
import Phoenix.HTML import Phoenix.HTML
alias MusicLibraryWeb.Layouts
# Shortcut for generating JS commands # Shortcut for generating JS commands
alias Phoenix.LiveView.JS alias Phoenix.LiveView.JS
lib/music_library_web/components/layouts/app.html.heex
+1 -1
View File
@@ -126,7 +126,7 @@
toasts_sync={assigns[:toasts_sync]} toasts_sync={assigns[:toasts_sync]}
toast_class_fn={&toast_class_fn/1} toast_class_fn={&toast_class_fn/1}
/> />
{@inner_content} {render_slot(@inner_block)}
</div> </div>
</main> </main>
lib/music_library_web/live/artist_live/show.html.heex
+257 -255
View File
@@ -1,270 +1,272 @@
<div class="mt-4 px-4 sm:px-6 lg:px-8"> <Layouts.app flash={@flash} current_section={@current_section} socket={@socket}>
<header class="mt-1 gap-1"> <div class="mt-4 px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between"> <header class="mt-1 gap-1">
<h1 class="font-semibold text-2xl leading-5 text-zinc-700 dark:text-zinc-300 text-wrap"> <div class="flex items-center justify-between">
{@artist.name} <h1 class="font-semibold text-2xl leading-5 text-zinc-700 dark:text-zinc-300 text-wrap">
<.country_flag country={@country} /> {@artist.name}
</h1> <.country_flag country={@country} />
</h1>
<div class="flex items-center"> <div class="flex items-center">
<button <button
class="text-xs md:text-sm text-zinc-700 dark:text-zinc-300" class="text-xs md:text-sm text-zinc-700 dark:text-zinc-300"
phx-click={MusicLibraryWeb.NotesComponent.open("artist-notes-sheet")} phx-click={MusicLibraryWeb.NotesComponent.open("artist-notes-sheet")}
> >
<span class="sr-only">{gettext("Open Notes")}</span> <span class="sr-only">{gettext("Open Notes")}</span>
<.icon
name="hero-pencil-square"
class="-mt-1 h-5 w-5"
aria-hidden="true"
data-slot="icon"
/>
</button>
<.dropdown id={"actions-#{@artist.musicbrainz_id}"} placement="bottom-end">
<:toggle>
<span class="sr-only">{gettext("Actions")}</span>
<.icon <.icon
name="hero-ellipsis-vertical" name="hero-pencil-square"
class="-mt-1 h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer"
aria-hidden="true"
data-slot="icon"
/>
</:toggle>
<.focus_wrap id={"actions-#{@artist.musicbrainz_id}-focus-wrap"}>
<.dropdown_link
id={"actions-#{@artist.musicbrainz_id}-edit"}
patch={~p"/artists/#{@artist.musicbrainz_id}/edit"}
>
<.icon
name="hero-pencil-square"
class="h-4 w-4 mr-1 phx-click-loading:animate-bounce"
aria-hidden="true"
data-slot="icon"
/>
{gettext("Edit")}
</.dropdown_link>
<.dropdown_link
id={"actions-#{@artist.musicbrainz_id}-refresh-image"}
phx-click={JS.push("refresh_artist_image", value: %{id: @artist.musicbrainz_id})}
>
<.icon
name="hero-photo"
class="h-4 w-4 mr-1 phx-click-loading:animate-bounce"
aria-hidden="true"
data-slot="icon"
/>
{gettext("Refresh image")}
</.dropdown_link>
<.dropdown_link
id={"actions-#{@artist.musicbrainz_id}-refresh-artist-info"}
phx-click={JS.push("refresh_artist_info", value: %{id: @artist.musicbrainz_id})}
>
<.icon
name="hero-arrow-path"
class="h-4 w-4 mr-1 phx-click-loading:animate-spin"
aria-hidden="true"
data-slot="icon"
/>
{gettext("Refresh info")}
</.dropdown_link>
</.focus_wrap>
</.dropdown>
</div>
</div>
<div class="mt-4 flex items-center justify-between">
<.async_result :let={lastfm_artist_info} assign={@lastfm_artist_info}>
<:loading>
<span class="sr-only">{gettext("Loading play count")}</span>
<.loading />
</:loading>
<:failed :let={_failure}>
<div class="mt-4 text-sm leading-5 text-zinc-500 dark:text-zinc-400">
<.icon
name="hero-exclamation-triangle"
class="-mt-1 mr-1 ml-2 h-5 w-5"
aria-hidden="true"
data-slot="icon"
/>
{gettext("Error loading play count")}
</div>
</:failed>
<.on_tour_link lastfm_artist_info={lastfm_artist_info} />
<.play_count play_count={lastfm_artist_info.play_count} />
</.async_result>
<.button variant="solid" patch={~p"/artists/#{@artist.musicbrainz_id}/import"}>
<.icon name="hero-plus" class="icon" aria-hidden="true" data-slot="icon" />
{gettext("Add more")}
</.button>
</div>
</header>
<div class="mt-4 grid md:grid-cols-10 md:gap-4">
<div class="md:col-span-3 mt-4 order-2 md:order-1">
<h2 class="font-semibold text-base sm:text-lg leading-5 text-zinc-700 dark:text-zinc-300">
{gettext("Meta")}
</h2>
<.artist_image
class="w-full rounded-md shadow-sm mt-4"
artist={@artist}
image_hash={@artist_info.image_data_hash}
/>
<dl>
<dt class="mt-4 text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400">
{gettext("MusicBrainz ID")}
</dt>
<dd class="mt-1 text-xs md:text-sm flex justify-between leading-6 text-zinc-700 dark:text-zinc-300">
<a href={MusicBrainz.Artist.url(@artist.musicbrainz_id)}>
<code class="overflow-hidden text-clip" id={"mb-#{@artist.musicbrainz_id}"}>
{@artist.musicbrainz_id}
</code>
</a>
<button phx-click={
JS.dispatch("music_library:clipcopy", to: "#mb-" <> @artist.musicbrainz_id)
|> JS.transition("animate-shake")
}>
<span class="sr-only">{gettext("Copy MusicBrainz ID to clipboard")}</span>
<.icon
name="hero-clipboard-document"
class="-mt-1 h-5 w-5" class="-mt-1 h-5 w-5"
aria-hidden="true" aria-hidden="true"
data-slot="icon" data-slot="icon"
/> />
</button> </button>
</dd> <.dropdown id={"actions-#{@artist.musicbrainz_id}"} placement="bottom-end">
</dl> <:toggle>
<.async_result :let={lastfm_artist_info} assign={@lastfm_artist_info}> <span class="sr-only">{gettext("Actions")}</span>
<:loading> <.icon
<div class="mt-4 text-sm leading-5 text-zinc-500 dark:text-zinc-400"> name="hero-ellipsis-vertical"
{gettext("Loading biography")} class="-mt-1 h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer"
</div> aria-hidden="true"
</:loading> data-slot="icon"
<:failed :let={_failure}> />
<div class="mt-4 text-sm leading-5 text-zinc-500 dark:text-zinc-400"> </:toggle>
<.icon <.focus_wrap id={"actions-#{@artist.musicbrainz_id}-focus-wrap"}>
name="hero-exclamation-triangle" <.dropdown_link
class="-mt-1 mr-1 h-5 w-5" id={"actions-#{@artist.musicbrainz_id}-edit"}
aria-hidden="true" patch={~p"/artists/#{@artist.musicbrainz_id}/edit"}
data-slot="icon" >
/> <.icon
{gettext("Error loading biography")} name="hero-pencil-square"
</div> class="h-4 w-4 mr-1 phx-click-loading:animate-bounce"
</:failed> aria-hidden="true"
<dt class="mt-4 text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400"> data-slot="icon"
{gettext("Biography")} />
</dt> {gettext("Edit")}
<dd class="text-zinc-700 dark:text-zinc-300"> </.dropdown_link>
{remove_read_more_link(lastfm_artist_info.summary)} <.dropdown_link
<.link id={"actions-#{@artist.musicbrainz_id}-refresh-image"}
class="block mt-2 text-sm font-medium text-zinc-900 dark:text-zinc-400" phx-click={JS.push("refresh_artist_image", value: %{id: @artist.musicbrainz_id})}
phx-click={Fluxon.open_dialog("bio")} >
> <.icon
<.icon name="hero-photo"
name="hero-arrow-right-end-on-rectangle" class="h-4 w-4 mr-1 phx-click-loading:animate-bounce"
class="-mt-1 mr-1 h-5 w-5" aria-hidden="true"
aria-hidden="true" data-slot="icon"
data-slot="icon" />
/> {gettext("Refresh image")}
{gettext("Read more")} </.dropdown_link>
</.link>
</dd>
<.sheet id="bio" class="max-w-2xl text-zinc-700 dark:text-zinc-300" placement="left">
{render_bio(lastfm_artist_info.bio)}
</.sheet>
</.async_result>
</div>
<div class="md:col-span-7 md:order-1">
<.record_grid
:if={@collection_records_count > 0}
title={gettext("Collection")}
id="collection"
records={@streams.collection_records}
records_count={@collection_records_count}
record_show_path={fn record -> ~p"/collection/#{record}" end}
record_edit_path={fn record -> ~p"/collection/#{record}/show/edit" end}
/>
<.separator :if={@wishlist_records_count > 0} class="mt-8 mb-8" />
<.record_grid
:if={@wishlist_records_count > 0}
title={gettext("Wishlist")}
id="wishlist"
records={@streams.wishlist_records}
records_count={@wishlist_records_count}
record_show_path={fn record -> ~p"/wishlist/#{record}" end}
record_edit_path={fn record -> ~p"/wishlist/#{record}/show/edit" end}
/>
<.async_result :let={similar_artists} assign={@similar_artists}> <.dropdown_link
<:loading> id={"actions-#{@artist.musicbrainz_id}-refresh-artist-info"}
<div class="mt-4 text-sm leading-5 text-zinc-500 dark:text-zinc-400"> phx-click={JS.push("refresh_artist_info", value: %{id: @artist.musicbrainz_id})}
{gettext("Loading similar artists")} >
</div> <.icon
</:loading> name="hero-arrow-path"
<:failed :let={_failure}> class="h-4 w-4 mr-1 phx-click-loading:animate-spin"
<div class="mt-4 text-sm leading-5 text-zinc-500 dark:text-zinc-400"> aria-hidden="true"
<.icon data-slot="icon"
name="hero-exclamation-triangle" />
class="-mt-1 mr-1 h-5 w-5" {gettext("Refresh info")}
aria-hidden="true" </.dropdown_link>
data-slot="icon" </.focus_wrap>
/> </.dropdown>
{gettext("Error loading similar artists")} </div>
</div> </div>
</:failed>
<.separator class="mt-8 mb-8" /> <div class="mt-4 flex items-center justify-between">
<.artist_grid title={gettext("Similar artists")} artists={similar_artists} /> <.async_result :let={lastfm_artist_info} assign={@lastfm_artist_info}>
</.async_result> <:loading>
<span class="sr-only">{gettext("Loading play count")}</span>
<.loading />
</:loading>
<:failed :let={_failure}>
<div class="mt-4 text-sm leading-5 text-zinc-500 dark:text-zinc-400">
<.icon
name="hero-exclamation-triangle"
class="-mt-1 mr-1 ml-2 h-5 w-5"
aria-hidden="true"
data-slot="icon"
/>
{gettext("Error loading play count")}
</div>
</:failed>
<.on_tour_link lastfm_artist_info={lastfm_artist_info} />
<.play_count play_count={lastfm_artist_info.play_count} />
</.async_result>
<.button variant="solid" patch={~p"/artists/#{@artist.musicbrainz_id}/import"}>
<.icon name="hero-plus" class="icon" aria-hidden="true" data-slot="icon" />
{gettext("Add more")}
</.button>
</div>
</header>
<div class="mt-4 grid md:grid-cols-10 md:gap-4">
<div class="md:col-span-3 mt-4 order-2 md:order-1">
<h2 class="font-semibold text-base sm:text-lg leading-5 text-zinc-700 dark:text-zinc-300">
{gettext("Meta")}
</h2>
<.artist_image
class="w-full rounded-md shadow-sm mt-4"
artist={@artist}
image_hash={@artist_info.image_data_hash}
/>
<dl>
<dt class="mt-4 text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400">
{gettext("MusicBrainz ID")}
</dt>
<dd class="mt-1 text-xs md:text-sm flex justify-between leading-6 text-zinc-700 dark:text-zinc-300">
<a href={MusicBrainz.Artist.url(@artist.musicbrainz_id)}>
<code class="overflow-hidden text-clip" id={"mb-#{@artist.musicbrainz_id}"}>
{@artist.musicbrainz_id}
</code>
</a>
<button phx-click={
JS.dispatch("music_library:clipcopy", to: "#mb-" <> @artist.musicbrainz_id)
|> JS.transition("animate-shake")
}>
<span class="sr-only">{gettext("Copy MusicBrainz ID to clipboard")}</span>
<.icon
name="hero-clipboard-document"
class="-mt-1 h-5 w-5"
aria-hidden="true"
data-slot="icon"
/>
</button>
</dd>
</dl>
<.async_result :let={lastfm_artist_info} assign={@lastfm_artist_info}>
<:loading>
<div class="mt-4 text-sm leading-5 text-zinc-500 dark:text-zinc-400">
{gettext("Loading biography")}
</div>
</:loading>
<:failed :let={_failure}>
<div class="mt-4 text-sm leading-5 text-zinc-500 dark:text-zinc-400">
<.icon
name="hero-exclamation-triangle"
class="-mt-1 mr-1 h-5 w-5"
aria-hidden="true"
data-slot="icon"
/>
{gettext("Error loading biography")}
</div>
</:failed>
<dt class="mt-4 text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400">
{gettext("Biography")}
</dt>
<dd class="text-zinc-700 dark:text-zinc-300">
{remove_read_more_link(lastfm_artist_info.summary)}
<.link
class="block mt-2 text-sm font-medium text-zinc-900 dark:text-zinc-400"
phx-click={Fluxon.open_dialog("bio")}
>
<.icon
name="hero-arrow-right-end-on-rectangle"
class="-mt-1 mr-1 h-5 w-5"
aria-hidden="true"
data-slot="icon"
/>
{gettext("Read more")}
</.link>
</dd>
<.sheet id="bio" class="max-w-2xl text-zinc-700 dark:text-zinc-300" placement="left">
{render_bio(lastfm_artist_info.bio)}
</.sheet>
</.async_result>
</div>
<div class="md:col-span-7 md:order-1">
<.record_grid
:if={@collection_records_count > 0}
title={gettext("Collection")}
id="collection"
records={@streams.collection_records}
records_count={@collection_records_count}
record_show_path={fn record -> ~p"/collection/#{record}" end}
record_edit_path={fn record -> ~p"/collection/#{record}/show/edit" end}
/>
<.separator :if={@wishlist_records_count > 0} class="mt-8 mb-8" />
<.record_grid
:if={@wishlist_records_count > 0}
title={gettext("Wishlist")}
id="wishlist"
records={@streams.wishlist_records}
records_count={@wishlist_records_count}
record_show_path={fn record -> ~p"/wishlist/#{record}" end}
record_edit_path={fn record -> ~p"/wishlist/#{record}/show/edit" end}
/>
<.async_result :let={similar_artists} assign={@similar_artists}>
<:loading>
<div class="mt-4 text-sm leading-5 text-zinc-500 dark:text-zinc-400">
{gettext("Loading similar artists")}
</div>
</:loading>
<:failed :let={_failure}>
<div class="mt-4 text-sm leading-5 text-zinc-500 dark:text-zinc-400">
<.icon
name="hero-exclamation-triangle"
class="-mt-1 mr-1 h-5 w-5"
aria-hidden="true"
data-slot="icon"
/>
{gettext("Error loading similar artists")}
</div>
</:failed>
<.separator class="mt-8 mb-8" />
<.artist_grid title={gettext("Similar artists")} artists={similar_artists} />
</.async_result>
</div>
</div> </div>
<.json_viewer
:if={@artist_info.musicbrainz_data}
title={gettext("MusicBrainz data")}
data={@artist_info.musicbrainz_data}
/>
<.json_viewer
:if={@artist_info.discogs_data}
title={gettext("Discogs data")}
data={@artist_info.discogs_data}
/>
</div> </div>
<.json_viewer <.structured_modal
:if={@artist_info.musicbrainz_data} :if={@live_action == :import}
title={gettext("MusicBrainz data")} id="record-modal"
data={@artist_info.musicbrainz_data} on_close={JS.patch(~p"/artists/#{@artist.musicbrainz_id}")}
/> >
<.live_component
module={MusicLibraryWeb.AddRecordComponent}
id={:search}
title={@page_title}
action={@live_action}
patch={~p"/artists/#{@artist.musicbrainz_id}"}
initial_query={"arid:#{@artist.musicbrainz_id}"}
icon_name="hero-plus"
/>
</.structured_modal>
<.json_viewer
:if={@artist_info.discogs_data}
title={gettext("Discogs data")}
data={@artist_info.discogs_data}
/>
</div>
<.structured_modal
:if={@live_action == :import}
id="record-modal"
on_close={JS.patch(~p"/artists/#{@artist.musicbrainz_id}")}
>
<.live_component <.live_component
module={MusicLibraryWeb.AddRecordComponent} id="artist-notes"
id={:search} sheet_id="artist-notes-sheet"
title={@page_title} module={MusicLibraryWeb.NotesComponent}
action={@live_action} entity={:artist}
patch={~p"/artists/#{@artist.musicbrainz_id}"} musicbrainz_id={@artist.musicbrainz_id}
initial_query={"arid:#{@artist.musicbrainz_id}"}
icon_name="hero-plus"
/> />
</.structured_modal>
<.live_component <.structured_modal
id="artist-notes" :if={@live_action == :edit}
sheet_id="artist-notes-sheet" id="artist-info-modal"
module={MusicLibraryWeb.NotesComponent} on_close={JS.patch(~p"/artists/#{@artist.musicbrainz_id}")}
entity={:artist} >
musicbrainz_id={@artist.musicbrainz_id} <.live_component
/> module={MusicLibraryWeb.ArtistLive.FormComponent}
id={@artist_info.id}
<.structured_modal action={@live_action}
:if={@live_action == :edit} artist_info={@artist_info}
id="artist-info-modal" artist={@artist}
on_close={JS.patch(~p"/artists/#{@artist.musicbrainz_id}")} patch={~p"/artists/#{@artist.musicbrainz_id}"}
> />
<.live_component </.structured_modal>
module={MusicLibraryWeb.ArtistLive.FormComponent} </Layouts.app>
id={@artist_info.id}
action={@live_action}
artist_info={@artist_info}
artist={@artist}
patch={~p"/artists/#{@artist.musicbrainz_id}"}
/>
</.structured_modal>
lib/music_library_web/live/collection_live/index.html.heex
+94 -92
View File
@@ -1,109 +1,111 @@
<div> <Layouts.app flash={@flash} current_section={@current_section} socket={@socket}>
<header class="gap-6 mb-2"> <div>
<div class="flex items-center justify-between gap-6 mb-2 mt-2"> <header class="gap-6 mb-2">
<.search_form query={@record_list_params.query} /> <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_group>
<.button <.button
variant="solid" patch={order_path(@record_list_params, :purchase)}
size="sm" size="sm"
patch={~p"/collection/import"} class={[
@record_list_params.order == :purchase && "!bg-zinc-100 dark:!bg-zinc-700"
]}
> >
<.icon name="hero-plus" class="icon" aria-hidden="true" data-slot="icon" /> <.icon
{gettext("Add")} name="hero-banknotes-solid"
class="icon"
aria-hidden="true"
data-slot="icon"
/>
{gettext("Purchase")}
</.button> </.button>
<.button <.button
variant="solid" patch={order_path(@record_list_params, :alphabetical)}
size="sm" size="sm"
patch={~p"/collection/scan"} class={[
@record_list_params.order == :alphabetical && "!bg-zinc-100 dark:!bg-zinc-700"
]}
> >
<.barcode_icon class="icon fill-current" /> <.icon name="hero-user-solid" class="icon" aria-hidden="true" data-slot="icon" />
{gettext("Scan")} {gettext("A->Z")}
</.button> </.button>
</.button_group> </.button_group>
</div> </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"
/>
{gettext("Purchase")}
</.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" />
{gettext("A->Z")}
</.button>
</.button_group>
</div> </div>
</div>
<.record_list <.record_list
records={@streams.records} records={@streams.records}
record_show_path={fn record -> ~p"/collection/#{record}" end} record_show_path={fn record -> ~p"/collection/#{record}" end}
record_edit_path={fn record -> ~p"/collection/#{record}/edit" 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.RecordFormComponent}
id={@record.id}
action={@live_action}
show_purchased_at={true}
record={@record}
patch={back_path(@record_list_params)}
/> />
</.structured_modal>
<.structured_modal <.structured_modal
:if={@live_action == :import} :if={@live_action == :edit}
id="record-modal" id="record-modal"
on_close={JS.patch(back_path(@record_list_params))} on_close={JS.patch(back_path(@record_list_params))}
> >
<.live_component <.live_component
module={MusicLibraryWeb.AddRecordComponent} module={MusicLibraryWeb.RecordFormComponent}
id={:search} id={@record.id}
title={@page_title} action={@live_action}
action={@live_action} show_purchased_at={true}
record={@record} record={@record}
patch={back_path(@record_list_params)} patch={back_path(@record_list_params)}
initial_query="" />
icon_name="hero-plus" </.structured_modal>
/>
</.structured_modal>
<.structured_modal <.structured_modal
:if={@live_action == :barcode_scan} :if={@live_action == :import}
id="barcode-scanner-modal" id="record-modal"
on_close={JS.patch(back_path(@record_list_params))} on_close={JS.patch(back_path(@record_list_params))}
> >
<.live_component <.live_component
module={MusicLibraryWeb.BarcodeScannerComponent} module={MusicLibraryWeb.AddRecordComponent}
id={:barcode_scanner} id={:search}
title={@page_title} title={@page_title}
action={@live_action} action={@live_action}
patch={back_path(@record_list_params)} record={@record}
/> patch={back_path(@record_list_params)}
</.structured_modal> initial_query=""
icon_name="hero-plus"
/>
</.structured_modal>
<.pagination id={:bottom_pagination} pagination_params={@record_list_params} /> <.structured_modal
:if={@live_action == :barcode_scan}
id="barcode-scanner-modal"
on_close={JS.patch(back_path(@record_list_params))}
>
<.live_component
module={MusicLibraryWeb.BarcodeScannerComponent}
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>
lib/music_library_web/live/collection_live/show.html.heex
+336 -332
View File
@@ -1,356 +1,360 @@
<div class="md:flex mt-4 px-4 md:gap-x-4"> <Layouts.app flash={@flash} current_section={@current_section} socket={@socket}>
<div class="drop-shadow-sm md:max-w-[38rem]"> <div class="md:flex mt-4 px-4 md:gap-x-4">
<.record_cover <div class="drop-shadow-sm md:max-w-[38rem]">
record={@record} <.record_cover
class="w-full rounded-lg drop-shadow-sm" record={@record}
/> class="w-full rounded-lg drop-shadow-sm"
</div> />
</div>
<div class="grow"> <div class="grow">
<div class="mt-4 md:mt-0 flex justify-between"> <div class="mt-4 md:mt-0 flex justify-between">
<div> <div>
<h1 class="text-base font-medium leading-6 text-zinc-700"> <h1 class="text-base font-medium leading-6 text-zinc-700">
<.artist_links joinphrase_class="text-sm" artists={@record.artists} /> <.artist_links joinphrase_class="text-sm" artists={@record.artists} />
</h1> </h1>
<h2 class="mt-1 flex font-semibold text-lg md:text-2xl text-zinc-700 dark:text-zinc-300 text-wrap"> <h2 class="mt-1 flex font-semibold text-lg md:text-2xl text-zinc-700 dark:text-zinc-300 text-wrap">
{@record.title} {@record.title}
</h2> </h2>
<p class="mt-2 flex items-center text-sm text-zinc-500 dark:text-zinc-400"> <p class="mt-2 flex items-center text-sm text-zinc-500 dark:text-zinc-400">
<.record_colors record={@record} /> <.record_colors record={@record} />
<span class="ml-1"> <span class="ml-1">
{Records.Record.format_release_date(@record.release_date)} · {format_label( {Records.Record.format_release_date(@record.release_date)} · {format_label(
@record.format @record.format
)} · {type_label(@record.type)} )} · {type_label(@record.type)}
</span> </span>
</p> </p>
</div> </div>
<div class="min-w-12 text-right"> <div class="min-w-12 text-right">
<button <button
class="text-xs md:text-sm text-zinc-700 dark:text-zinc-300" class="text-xs md:text-sm text-zinc-700 dark:text-zinc-300"
phx-click={MusicLibraryWeb.NotesComponent.open("record-notes-sheet")} phx-click={MusicLibraryWeb.NotesComponent.open("record-notes-sheet")}
> >
<span class="sr-only">{gettext("Open Notes")}</span> <span class="sr-only">{gettext("Open Notes")}</span>
<.icon
name="hero-pencil-square"
class="-mt-1 h-5 w-5"
aria-hidden="true"
data-slot="icon"
/>
</button>
<button
:if={@record.selected_release_id}
class="text-xs md:text-sm text-zinc-700 dark:text-zinc-300"
phx-click={MusicLibraryWeb.ReleaseComponent.open("release-with-tracks-sheet")}
>
<span class="sr-only">{gettext("Show Tracks")}</span>
<.icon
name="hero-numbered-list"
class="-mt-1 h-5 w-5"
aria-hidden="true"
data-slot="icon"
/>
</button>
<.dropdown id={"actions-#{@record.id}"} placement="bottom-end">
<:toggle class="h-5 block">
<span class="sr-only">{gettext("Actions")}</span>
<.icon <.icon
name="hero-ellipsis-vertical" name="hero-pencil-square"
class="-mt-1 h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer" class="-mt-1 h-5 w-5"
aria-hidden="true" aria-hidden="true"
data-slot="icon" data-slot="icon"
/> />
</:toggle> </button>
<.focus_wrap id={"actions-#{@record.id}-focus-wrap"}> <button
<.dropdown_link :if={@record.selected_release_id}
id={"actions-#{@record.id}-edit"} class="text-xs md:text-sm text-zinc-700 dark:text-zinc-300"
patch={~p"/collection/#{@record}/show/edit"} phx-click={MusicLibraryWeb.ReleaseComponent.open("release-with-tracks-sheet")}
> >
<span class="sr-only">{gettext("Show Tracks")}</span>
<.icon
name="hero-numbered-list"
class="-mt-1 h-5 w-5"
aria-hidden="true"
data-slot="icon"
/>
</button>
<.dropdown id={"actions-#{@record.id}"} placement="bottom-end">
<:toggle class="h-5 block">
<span class="sr-only">{gettext("Actions")}</span>
<.icon <.icon
name="hero-pencil-square" name="hero-ellipsis-vertical"
class="h-4 w-4 mr-1 phx-click-loading:animate-bounce" class="-mt-1 h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer"
aria-hidden="true" aria-hidden="true"
data-slot="icon" data-slot="icon"
/> />
{gettext("Edit")} </:toggle>
</.dropdown_link> <.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 <.dropdown_link
id={"actions-#{@record.id}-refresh-cover"} id={"actions-#{@record.id}-refresh-cover"}
phx-click={JS.push("refresh_cover", value: %{id: @record.id})} phx-click={JS.push("refresh_cover", value: %{id: @record.id})}
> >
<.icon <.icon
name="hero-photo" name="hero-photo"
class="h-4 w-4 mr-1 phx-click-loading:animate-bounce" class="h-4 w-4 mr-1 phx-click-loading:animate-bounce"
aria-hidden="true" aria-hidden="true"
data-slot="icon" data-slot="icon"
/> />
{gettext("Refresh cover")} {gettext("Refresh cover")}
</.dropdown_link> </.dropdown_link>
<.dropdown_link <.dropdown_link
id={"actions-#{@record.id}-refresh-mb-data"} id={"actions-#{@record.id}-refresh-mb-data"}
phx-click={JS.push("refresh_musicbrainz_data", value: %{id: @record.id})} phx-click={JS.push("refresh_musicbrainz_data", value: %{id: @record.id})}
> >
<.icon <.icon
name="hero-arrow-path" name="hero-arrow-path"
class="h-4 w-4 mr-1 phx-click-loading:animate-spin" class="h-4 w-4 mr-1 phx-click-loading:animate-spin"
aria-hidden="true" aria-hidden="true"
data-slot="icon" data-slot="icon"
/> />
{gettext("Refresh MB data")} {gettext("Refresh MB data")}
</.dropdown_link> </.dropdown_link>
<.dropdown_link <.dropdown_link
id={"actions-#{@record.id}-populate-genres"} id={"actions-#{@record.id}-populate-genres"}
phx-click={JS.push("populate_genres", value: %{id: @record.id})} phx-click={JS.push("populate_genres", value: %{id: @record.id})}
> >
<.icon <.icon
name="hero-sparkles" name="hero-sparkles"
class="h-4 w-4 mr-1 phx-click-loading:animate-shake" class="h-4 w-4 mr-1 phx-click-loading:animate-shake"
aria-hidden="true" aria-hidden="true"
data-slot="icon" data-slot="icon"
/> />
{gettext("Populate genres")} {gettext("Populate genres")}
</.dropdown_link> </.dropdown_link>
<.dropdown_link <.dropdown_link
id={"actions-#{@record.id}-extract-colors-fast"} id={"actions-#{@record.id}-extract-colors-fast"}
phx-click={JS.push("extract_colors", value: %{id: @record.id, method: :fast})} phx-click={JS.push("extract_colors", value: %{id: @record.id, method: :fast})}
> >
<.icon <.icon
name="hero-paint-brush" name="hero-paint-brush"
class="h-4 w-4 mr-1 phx-click-loading:animate-shake" class="h-4 w-4 mr-1 phx-click-loading:animate-shake"
aria-hidden="true" aria-hidden="true"
data-slot="icon" data-slot="icon"
/> />
{gettext("Extract colors (fast)")} {gettext("Extract colors (fast)")}
</.dropdown_link> </.dropdown_link>
<.dropdown_link <.dropdown_link
id={"actions-#{@record.id}-extract-colors-slow"} id={"actions-#{@record.id}-extract-colors-slow"}
phx-click={JS.push("extract_colors", value: %{id: @record.id, method: :slow})} phx-click={JS.push("extract_colors", value: %{id: @record.id, method: :slow})}
> >
<.icon <.icon
name="hero-paint-brush" name="hero-paint-brush"
class="h-4 w-4 mr-1 phx-click-loading:animate-shake" class="h-4 w-4 mr-1 phx-click-loading:animate-shake"
aria-hidden="true" aria-hidden="true"
data-slot="icon" data-slot="icon"
/> />
{gettext("Extract colors (slow)")} {gettext("Extract colors (slow)")}
</.dropdown_link> </.dropdown_link>
<.dropdown_separator /> <.dropdown_separator />
<.dropdown_link <.dropdown_link
id={"actions-#{@record.id}-delete"} id={"actions-#{@record.id}-delete"}
phx-click={JS.push("delete", value: %{id: @record.id})} phx-click={JS.push("delete", value: %{id: @record.id})}
data-confirm={gettext("Are you sure?")} 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!" class="text-red-900! hover:bg-red-50! dark:text-red-500! dark:hover:bg-red-900/30! dark:hover:text-red-600!"
> >
<.icon <.icon
name="hero-trash" name="hero-trash"
class="h-4 w-4 mr-1 phx-click-loading:animate-spin" class="h-4 w-4 mr-1 phx-click-loading:animate-spin"
aria-hidden="true" aria-hidden="true"
data-slot="icon" data-slot="icon"
/>
{gettext("Delete")}
</.dropdown_link>
</.focus_wrap>
</.dropdown>
</div>
</div>
<div class="mt-4 md:mt-8">
<%!-- TODO: replace with OSS version --%>
<dl class="divide-y divide-zinc-100 dark:divide-slate-300/30">
<div class="py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
<dt class="text-xs md:text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400">
{gettext("ID")}
</dt>
<dd class="mt-1 text-xs md:text-sm flex justify-between leading-6 text-zinc-700 dark:text-zinc-300 sm:col-span-2 sm:mt-0">
<code id={"record-#{@record.id}"}>{@record.id}</code>
<button phx-click={
JS.dispatch("music_library:clipcopy", to: "#record-" <> @record.id)
|> JS.transition("animate-shake")
}>
<span class="sr-only">{gettext("Copy record ID to clipboard")}</span>
<.icon
name="hero-clipboard-document"
class="-mt-1 h-5 w-5"
aria-hidden="true"
data-slot="icon"
/>
</button>
</dd>
</div>
<div class="py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
<dt class="text-xs md:text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400">
{gettext("Genres")}
</dt>
<dd class="mt-1 text-xs md:text-sm leading-6 text-zinc-700 dark:text-zinc-300 sm:col-span-2 sm:mt-0">
<.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>
</dd>
</div>
<div class="py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
<dt class="text-xs md: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 sm:col-span-2 sm:mt-0">
<a href={MusicBrainz.ReleaseGroup.url(@record.musicbrainz_id)}>
<code id={"mb-#{@record.musicbrainz_id}"}>{@record.musicbrainz_id}</code>
</a>
<button phx-click={
JS.dispatch("music_library:clipcopy", to: "#mb-" <> @record.musicbrainz_id)
|> JS.transition("animate-shake")
}>
<span class="sr-only">{gettext("Copy MusicBrainz ID to clipboard")}</span>
<.icon
name="hero-clipboard-document"
class="-mt-1 h-5 w-5"
aria-hidden="true"
data-slot="icon"
/>
</button>
</dd>
</div>
<div class="py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
<dt class="text-xs md:text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400">
{gettext("Purchased on")}
</dt>
<dd class="mt-1 text-xs md:text-sm leading-6 text-zinc-700 dark:text-zinc-300 sm:col-span-2 sm:mt-0">
{Records.Record.format_as_date(@record.purchased_at)}
</dd>
</div>
<div class="py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
<dt class="text-xs md:text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400">
{gettext("Published releases")}
</dt>
<dd class="mt-1 text-xs md:text-sm leading-6 text-zinc-700 dark:text-zinc-300 sm:col-span-2 sm:mt-0">
{Records.Record.release_count(@record)}
</dd>
</div>
<div class="py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
<dt class="text-xs md:text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400">
{gettext("Collected release")}
</dt>
<dd class="mt-1 flex justify-between space-x-2 leading-6 sm:col-span-2 sm:mt-0">
<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)}
/> />
{gettext("Delete")} <span
</.dropdown_link> :if={@record.selected_release_id}
</.focus_wrap> id={"record-selected-release-" <> @record.id}
</.dropdown> class="hidden"
>
{@record.selected_release_id}
</span>
<button
:if={@record.selected_release_id}
phx-click={
JS.dispatch("music_library:clipcopy",
to: "#record-selected-release-" <> @record.id
)
|> JS.transition("animate-shake")
}
>
<span class="sr-only">
{gettext("Copy record selected release ID to clipboard")}
</span>
<.icon
name="hero-clipboard-document"
class="-mt-1 h-5 w-5"
aria-hidden="true"
data-slot="icon"
/>
</button>
</dd>
</div>
<div
:if={Records.Record.included_release_groups_count(@record) > 0}
class="py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0"
>
<dt class="text-xs md:text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400">
{gettext("Includes")}
</dt>
<dd class="mt-1 text-xs md:text-sm leading-6 text-zinc-700 dark:text-zinc-300 sm:col-span-2 sm:mt-0">
<ul>
<li :for={
included_release_group <- Records.Record.included_release_groups(@record)
}>
{included_release_group.artists} - {included_release_group.title}
</li>
</ul>
</dd>
</div>
<div class="py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
<dt class="text-xs md:text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400">
{gettext("Inserted at")}
</dt>
<dd class="mt-1 text-xs md:text-sm leading-6 text-zinc-700 dark:text-zinc-300 sm:col-span-2 sm:mt-0">
{Records.Record.format_as_date(@record.inserted_at)}
</dd>
</div>
<div class="py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
<dt class="text-xs md:text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400">
{gettext("Updated at")}
</dt>
<dd class="mt-1 text-xs md:text-sm leading-6 text-zinc-700 dark:text-zinc-300 sm:col-span-2 sm:mt-0">
{Records.Record.format_as_date(@record.updated_at)}
</dd>
</div>
<div class="py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
<dt class="text-xs md:text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400">
{gettext("Last listened at")}
</dt>
<dd class="mt-1 text-xs md:text-sm leading-6 text-zinc-700 dark:text-zinc-300 sm:col-span-2 sm:mt-0">
{@last_listened_track &&
localize_scrobbled_at(@last_listened_track.scrobbled_at_uts, @timezone)}
</dd>
</div>
</dl>
</div> </div>
</div> </div>
<div class="mt-4 md:mt-8">
<%!-- TODO: replace with OSS version --%>
<dl class="divide-y divide-zinc-100 dark:divide-slate-300/30">
<div class="py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
<dt class="text-xs md:text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400">
{gettext("ID")}
</dt>
<dd class="mt-1 text-xs md:text-sm flex justify-between leading-6 text-zinc-700 dark:text-zinc-300 sm:col-span-2 sm:mt-0">
<code id={"record-#{@record.id}"}>{@record.id}</code>
<button phx-click={
JS.dispatch("music_library:clipcopy", to: "#record-" <> @record.id)
|> JS.transition("animate-shake")
}>
<span class="sr-only">{gettext("Copy record ID to clipboard")}</span>
<.icon
name="hero-clipboard-document"
class="-mt-1 h-5 w-5"
aria-hidden="true"
data-slot="icon"
/>
</button>
</dd>
</div>
<div class="py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
<dt class="text-xs md:text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400">
{gettext("Genres")}
</dt>
<dd class="mt-1 text-xs md:text-sm leading-6 text-zinc-700 dark:text-zinc-300 sm:col-span-2 sm:mt-0">
<.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>
</dd>
</div>
<div class="py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
<dt class="text-xs md: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 sm:col-span-2 sm:mt-0">
<a href={MusicBrainz.ReleaseGroup.url(@record.musicbrainz_id)}>
<code id={"mb-#{@record.musicbrainz_id}"}>{@record.musicbrainz_id}</code>
</a>
<button phx-click={
JS.dispatch("music_library:clipcopy", to: "#mb-" <> @record.musicbrainz_id)
|> JS.transition("animate-shake")
}>
<span class="sr-only">{gettext("Copy MusicBrainz ID to clipboard")}</span>
<.icon
name="hero-clipboard-document"
class="-mt-1 h-5 w-5"
aria-hidden="true"
data-slot="icon"
/>
</button>
</dd>
</div>
<div class="py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
<dt class="text-xs md:text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400">
{gettext("Purchased on")}
</dt>
<dd class="mt-1 text-xs md:text-sm leading-6 text-zinc-700 dark:text-zinc-300 sm:col-span-2 sm:mt-0">
{Records.Record.format_as_date(@record.purchased_at)}
</dd>
</div>
<div class="py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
<dt class="text-xs md:text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400">
{gettext("Published releases")}
</dt>
<dd class="mt-1 text-xs md:text-sm leading-6 text-zinc-700 dark:text-zinc-300 sm:col-span-2 sm:mt-0">
{Records.Record.release_count(@record)}
</dd>
</div>
<div class="py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
<dt class="text-xs md:text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400">
{gettext("Collected release")}
</dt>
<dd class="mt-1 flex justify-between space-x-2 leading-6 sm:col-span-2 sm:mt-0">
<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>
<button
:if={@record.selected_release_id}
phx-click={
JS.dispatch("music_library:clipcopy",
to: "#record-selected-release-" <> @record.id
)
|> JS.transition("animate-shake")
}
>
<span class="sr-only">
{gettext("Copy record selected release ID to clipboard")}
</span>
<.icon
name="hero-clipboard-document"
class="-mt-1 h-5 w-5"
aria-hidden="true"
data-slot="icon"
/>
</button>
</dd>
</div>
<div
:if={Records.Record.included_release_groups_count(@record) > 0}
class="py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0"
>
<dt class="text-xs md:text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400">
{gettext("Includes")}
</dt>
<dd class="mt-1 text-xs md:text-sm leading-6 text-zinc-700 dark:text-zinc-300 sm:col-span-2 sm:mt-0">
<ul>
<li :for={included_release_group <- Records.Record.included_release_groups(@record)}>
{included_release_group.artists} - {included_release_group.title}
</li>
</ul>
</dd>
</div>
<div class="py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
<dt class="text-xs md:text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400">
{gettext("Inserted at")}
</dt>
<dd class="mt-1 text-xs md:text-sm leading-6 text-zinc-700 dark:text-zinc-300 sm:col-span-2 sm:mt-0">
{Records.Record.format_as_date(@record.inserted_at)}
</dd>
</div>
<div class="py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
<dt class="text-xs md:text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400">
{gettext("Updated at")}
</dt>
<dd class="mt-1 text-xs md:text-sm leading-6 text-zinc-700 dark:text-zinc-300 sm:col-span-2 sm:mt-0">
{Records.Record.format_as_date(@record.updated_at)}
</dd>
</div>
<div class="py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
<dt class="text-xs md:text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400">
{gettext("Last listened at")}
</dt>
<dd class="mt-1 text-xs md:text-sm leading-6 text-zinc-700 dark:text-zinc-300 sm:col-span-2 sm:mt-0">
{@last_listened_track &&
localize_scrobbled_at(@last_listened_track.scrobbled_at_uts, @timezone)}
</dd>
</div>
</dl>
</div>
</div> </div>
</div>
<.json_viewer title={gettext("MusicBrainz data")} data={@record.musicbrainz_data} /> <.json_viewer title={gettext("MusicBrainz data")} data={@record.musicbrainz_data} />
<.live_component
id="release-with-tracks"
sheet_id="release-with-tracks-sheet"
module={MusicLibraryWeb.ReleaseComponent}
record={@record}
/>
<.live_component
id="record-notes"
sheet_id="record-notes-sheet"
module={MusicLibraryWeb.NotesComponent}
entity={:record}
musicbrainz_id={@record.musicbrainz_id}
/>
<.structured_modal
:if={@live_action == :edit}
id="record-modal"
on_close={JS.patch(~p"/collection/#{@record}")}
>
<.live_component <.live_component
module={MusicLibraryWeb.RecordFormComponent} id="release-with-tracks"
id={@record.id} sheet_id="release-with-tracks-sheet"
action={@live_action} module={MusicLibraryWeb.ReleaseComponent}
show_purchased_at={true}
record={@record} record={@record}
patch={~p"/collection/#{@record}"}
/> />
</.structured_modal>
<.live_component
id="record-notes"
sheet_id="record-notes-sheet"
module={MusicLibraryWeb.NotesComponent}
entity={:record}
musicbrainz_id={@record.musicbrainz_id}
/>
<.structured_modal
:if={@live_action == :edit}
id="record-modal"
on_close={JS.patch(~p"/collection/#{@record}")}
>
<.live_component
module={MusicLibraryWeb.RecordFormComponent}
id={@record.id}
action={@live_action}
show_purchased_at={true}
record={@record}
patch={~p"/collection/#{@record}"}
/>
</.structured_modal>
</Layouts.app>
lib/music_library_web/live/online_store_template_live/index.html.heex
+101 -99
View File
@@ -1,106 +1,108 @@
<header class="mb-6"> <Layouts.app flash={@flash} current_section={@current_section} socket={@socket}>
<div class="flex items-center justify-between"> <header class="mb-6">
<div> <div class="flex items-center justify-between">
<h1 class="text-2xl font-bold text-zinc-900 dark:text-zinc-100"> <div>
{gettext("Online Store Templates")} <h1 class="text-2xl font-bold text-zinc-900 dark:text-zinc-100">
</h1> {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("New Template")}
</.button>
</div>
</div> </div>
<div> </header>
<.button variant="solid" size="sm" patch={~p"/online-store-templates/new"}>
<.icon name="hero-plus" class="icon" aria-hidden="true" data-slot="icon" />
{gettext("New Template")}
</.button>
</div>
</div>
</header>
<div class="mt-6 space-y-4"> <div class="mt-6 space-y-4">
<ul <ul
role="list" role="list"
class="divide-y divide-gray-200 dark:divide-gray-800" class="divide-y divide-gray-200 dark:divide-gray-800"
phx-update="stream" phx-update="stream"
id="templates" id="templates"
>
<li
:for={{id, template} <- @streams.templates}
id={id}
class="flex items-center justify-between py-5"
> >
<div class="min-w-0"> <li
<div class="flex items-center gap-x-2"> :for={{id, template} <- @streams.templates}
<img id={id}
src={MusicLibrary.OnlineStoreTemplates.favicon_url(template)} class="flex items-center justify-between py-5"
alt={template.name} >
/> <div class="min-w-0">
<p class="text-sm font-semibold text-gray-900 dark:text-white"> <div class="flex items-center gap-x-2">
{template.name} <img
src={MusicLibrary.OnlineStoreTemplates.favicon_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> </p>
<.badge :if={template.enabled} color="success">
{gettext("Enabled")}
</.badge>
<.badge :if={!template.enabled} color="warning">
{gettext("Disabled")}
</.badge>
</div> </div>
<div class="mt-1 flex items-center gap-x-2 text-xs text-gray-500 dark:text-gray-400"> <div class="flex items-center">
<p class="truncate font-mono">{template.url_template}</p> <.dropdown id={"actions-#{template.id}"} placement="bottom-end">
<:toggle>
<div>
<span class="sr-only">{gettext("Actions")}</span>
<.icon
name="hero-ellipsis-vertical"
class="-mt-1 h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer"
aria-hidden="true"
data-slot="icon"
/>
</div>
</: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> </div>
<p :if={template.description} class="mt-1 text-xs text-gray-500 dark:text-gray-400"> </li>
{template.description} </ul>
</p> </div>
</div>
<div class="flex items-center">
<.dropdown id={"actions-#{template.id}"} placement="bottom-end">
<:toggle>
<div>
<span class="sr-only">{gettext("Actions")}</span>
<.icon
name="hero-ellipsis-vertical"
class="-mt-1 h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer"
aria-hidden="true"
data-slot="icon"
/>
</div>
</: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 <.structured_modal
:if={@live_action in [:new, :edit]} :if={@live_action in [:new, :edit]}
id="template-modal" id="template-modal"
on_close={JS.patch(~p"/online-store-templates")} on_close={JS.patch(~p"/online-store-templates")}
> >
<.live_component <.live_component
module={MusicLibraryWeb.OnlineStoreTemplateLive.FormComponent} module={MusicLibraryWeb.OnlineStoreTemplateLive.FormComponent}
id={@template.id || :new} id={@template.id || :new}
title={@page_title} title={@page_title}
action={@live_action} action={@live_action}
template={@template} template={@template}
patch={~p"/online-store-templates"} patch={~p"/online-store-templates"}
/> />
</.structured_modal> </.structured_modal>
</Layouts.app>
lib/music_library_web/live/scrobble_rules_live/index.html.heex
+114 -112
View File
@@ -1,115 +1,117 @@
<header class="mb-6"> <Layouts.app flash={@flash} current_section={@current_section} socket={@socket}>
<div class="flex items-center justify-between"> <header class="mb-6">
<div> <div class="flex items-center justify-between">
<h1 class="text-2xl font-bold text-zinc-900 dark:text-zinc-100"> <div>
{gettext("Scrobble Rules")} <h1 class="text-2xl font-bold text-zinc-900 dark:text-zinc-100">
</h1> {gettext("Scrobble Rules")}
</div> </h1>
<div> </div>
<.button_group> <div>
<.button <.button_group>
variant="solid" <.button
size="sm" variant="solid"
patch={~p"/scrobble-rules/new"} size="sm"
> patch={~p"/scrobble-rules/new"}
<.icon name="hero-plus" class="icon" aria-hidden="true" data-slot="icon" /> >
{gettext("New Rule")} <.icon name="hero-plus" class="icon" aria-hidden="true" data-slot="icon" />
</.button> {gettext("New Rule")}
<.button </.button>
variant="solid" <.button
size="sm" variant="solid"
phx-click="apply_all_rules" size="sm"
> phx-click="apply_all_rules"
<.icon name="hero-play" class="icon" /> >
{gettext("Apply All")} <.icon name="hero-play" class="icon" />
</.button> {gettext("Apply All")}
</.button_group> </.button>
</.button_group>
</div>
</div> </div>
</header>
<div class="mt-6 space-y-4">
<ul phx-update="stream" id="scrobble-rules-list" class="space-y-4">
<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">
<.dropdown id={"actions-#{scrobble_rule.id}"} placement="bottom-end">
<:toggle>
<div>
<span class="sr-only">{gettext("Actions")}</span>
<.icon
name="hero-ellipsis-vertical"
class="-mt-1 h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer"
aria-hidden="true"
data-slot="icon"
/>
</div>
</: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"}
>
{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>
</div> </div>
</header>
<div class="mt-6 space-y-4"> <.structured_modal
<ul phx-update="stream" id="scrobble-rules-list" class="space-y-4"> :if={@live_action in [:new, :edit]}
<li id="scrobble_rule-modal"
:for={{dom_id, scrobble_rule} <- @streams.scrobble_rules} on_close={JS.patch(~p"/scrobble-rules")}
id={dom_id} >
class="flex justify-between" <.live_component
> module={MusicLibraryWeb.ScrobbleRulesLive.FormComponent}
<div class="flex items-center"> id={@scrobble_rule.id || :new}
<.type_badge type={scrobble_rule.type} /> title={@page_title}
</div> action={@live_action}
<div class="grow p-2"> scrobble_rule={@scrobble_rule}
<p class="text-sm text-zinc-900 dark:text-zinc-100"> patch={~p"/scrobble-rules"}
{scrobble_rule.match_value} />
</p> </.structured_modal>
<p class="text-xs font-mono text-zinc-500 dark:text-zinc-400 mt-2"> </Layouts.app>
{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">
<.dropdown id={"actions-#{scrobble_rule.id}"} placement="bottom-end">
<:toggle>
<div>
<span class="sr-only">{gettext("Actions")}</span>
<.icon
name="hero-ellipsis-vertical"
class="-mt-1 h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer"
aria-hidden="true"
data-slot="icon"
/>
</div>
</: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"}
>
{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>
</div>
<.structured_modal
:if={@live_action in [:new, :edit]}
id="scrobble_rule-modal"
on_close={JS.patch(~p"/scrobble-rules")}
>
<.live_component
module={MusicLibraryWeb.ScrobbleRulesLive.FormComponent}
id={@scrobble_rule.id || :new}
title={@page_title}
action={@live_action}
scrobble_rule={@scrobble_rule}
patch={~p"/scrobble-rules"}
/>
</.structured_modal>
lib/music_library_web/live/scrobbled_tracks_live/index.html.heex
+154 -152
View File
@@ -1,160 +1,162 @@
<div> <Layouts.app flash={@flash} current_section={@current_section} socket={@socket}>
<header class="gap-6"> <div>
<div class="mb-2 mt-2"> <header class="gap-6">
<.search_form query={@track_list_params.query} /> <div class="mb-2 mt-2">
</div> <.search_form query={@track_list_params.query} />
</header> </div>
</header>
<div class="flex items-end gap-6 mt-8 justify-center sm:justify-start"> <div class="flex items-end gap-6 mt-8 justify-center sm:justify-start">
<.button_group> <.button_group>
<.button <.button
patch={order_path(@track_list_params, :scrobbled_at)} patch={order_path(@track_list_params, :scrobbled_at)}
size="xs" size="xs"
class={[ class={[
@track_list_params.order == :scrobbled_at && "!bg-zinc-100 dark:!bg-zinc-700" @track_list_params.order == :scrobbled_at && "!bg-zinc-100 dark:!bg-zinc-700"
]} ]}
> >
<.icon <.icon
name="hero-clock-solid" name="hero-clock-solid"
class="icon" class="icon"
aria-hidden="true" aria-hidden="true"
data-slot="icon" 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>
</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} <- @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 :if={track.cover_url && track.cover_url != ""} class="flex-shrink-0">
<img
class="w-12 h-12 rounded-md object-cover"
src={track.cover_url}
alt={"Cover for " <> track.album.title}
onerror={"this.src = '" <> ~p"/images/cover-not-found.png" <> "';"}
/> />
</div> {gettext("Scrobbled")}
<div :if={!track.cover_url || track.cover_url == ""} class="flex-shrink-0"> </.button>
<div class="w-12 h-12 bg-zinc-200 dark:bg-zinc-600 rounded-md flex items-center justify-center"> <.button
<.icon name="hero-musical-note" class="h-6 w-6 text-zinc-400" /> 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>
</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} <- @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 :if={track.cover_url && track.cover_url != ""} class="flex-shrink-0">
<img
class="w-12 h-12 rounded-md object-cover"
src={track.cover_url}
alt={"Cover for " <> track.album.title}
onerror={"this.src = '" <> ~p"/images/cover-not-found.png" <> "';"}
/>
</div>
<div :if={!track.cover_url || track.cover_url == ""} class="flex-shrink-0">
<div class="w-12 h-12 bg-zinc-200 dark:bg-zinc-600 rounded-md flex items-center justify-center">
<.icon name="hero-musical-note" class="h-6 w-6 text-zinc-400" />
</div>
</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>
<p class="text-xs text-zinc-400 dark:text-zinc-600 mt-1">
{track.scrobbled_at_label}
</p>
</div> </div>
</div> </div>
<div class="min-w-0 flex-1"> <div class="flex items-center">
<p class="text-sm font-medium text-zinc-900 dark:text-zinc-100 truncate"> <.dropdown id={"actions-#{track.scrobbled_at_uts}"} placement="bottom-end">
{track.title} <:toggle>
</p> <div>
<p class="text-sm text-zinc-600 dark:text-zinc-400 truncate"> <span class="sr-only">{gettext("Actions")}</span>
{track.artist.name} <.icon
</p> name="hero-ellipsis-vertical"
<p class="text-sm text-zinc-500 dark:text-zinc-500 truncate"> class="-mt-1 h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer"
{track.album.title} aria-hidden="true"
</p> data-slot="icon"
<p class="text-xs text-zinc-400 dark:text-zinc-600 mt-1"> />
{track.scrobbled_at_label} </div>
</p> </: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> </div>
</div> </li>
</ul>
<div class="flex items-center"> <.pagination id={:bottom_pagination} pagination_params={@track_list_params} />
<.dropdown id={"actions-#{track.scrobbled_at_uts}"} placement="bottom-end"> </div>
<:toggle>
<div>
<span class="sr-only">{gettext("Actions")}</span>
<.icon
name="hero-ellipsis-vertical"
class="-mt-1 h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer"
aria-hidden="true"
data-slot="icon"
/>
</div>
</: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} /> <.structured_modal
</div> :if={@live_action == :edit}
id="track-modal"
<.structured_modal on_close={JS.patch(back_path(@track_list_params))}
:if={@live_action == :edit} >
id="track-modal" <.live_component
on_close={JS.patch(back_path(@track_list_params))} module={MusicLibraryWeb.ScrobbledTracksLive.FormComponent}
> id={@track.scrobbled_at_uts}
<.live_component action={@live_action}
module={MusicLibraryWeb.ScrobbledTracksLive.FormComponent} track={@track}
id={@track.scrobbled_at_uts} patch={back_path(@track_list_params)}
action={@live_action} />
track={@track} </.structured_modal>
patch={back_path(@track_list_params)} </Layouts.app>
/>
</.structured_modal>
lib/music_library_web/live/stats_live/index.html.heex
+457 -452
View File
@@ -1,125 +1,311 @@
<div> <Layouts.app flash={@flash} current_section={@current_section} socket={@socket}>
<h1 class="mt-5 text-base lg:text-2xl text-zinc-900 dark:text-zinc-200 font-semibold">
{gettext("Records")}
</h1>
<%!-- TODO: replace with OSS version --%>
<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> <div>
<h1 class="mt-5 text-base lg:text-2xl text-zinc-900 dark:text-zinc-200 font-semibold"> <h1 class="mt-5 text-base lg:text-2xl text-zinc-900 dark:text-zinc-200 font-semibold">
{gettext("Formats")} {gettext("Records")}
</h1> </h1>
<.counters_by_category <%!-- TODO: replace with OSS version --%>
categories_with_counts={@collection_count_by_format} <dl class="mt-5 grid grid-cols-3 gap-5 sm:grid-cols-5">
category_format_fn={&format_label/1} <.album_preview
category_path_fn={fn format -> ~p"/collection?query=format:#{format}" end} 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> <div>
<h1 class="mt-5 text-base lg:text-2xl text-zinc-900 dark:text-zinc-200 font-semibold"> <div class="mt-5 grid grid-cols-1 lg:grid-cols-2 gap-5">
{gettext("Types")} <TopArtists.live id="top-artists" timezone={@timezone} last_updated_uts={@last_updated_uts} />
</h1> <TopAlbums.live id="top-albums" timezone={@timezone} last_updated_uts={@last_updated_uts} />
<.counters_by_category </div>
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> <div class="flow-root">
<div class="mt-5 grid grid-cols-1 lg:grid-cols-2 gap-5"> <div class="mt-5 flex justify-between items-center">
<TopArtists.live id="top-artists" timezone={@timezone} last_updated_uts={@last_updated_uts} /> <h1 class="text-base lg:text-2xl text-zinc-900 dark:text-zinc-200 font-semibold">
<TopAlbums.live id="top-albums" timezone={@timezone} last_updated_uts={@last_updated_uts} /> {gettext("Scrobble activity")}
</div> </h1>
</div> <.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>
<div class="flow-root"> <.tabs_panel name="albums" active={@scrobble_activity_mode == "albums"}>
<div class="mt-5 flex justify-between items-center"> <ul
<h1 class="text-base lg:text-2xl text-zinc-900 dark:text-zinc-200 font-semibold"> id="scrobble-activity-albums"
{gettext("Scrobble activity")} role="list"
</h1> class="mt-5 p-6 bg-white dark:bg-zinc-800 rounded-md shadow-sm"
<.refresh_lastfm_feed_button /> phx-update="stream"
</div> >
<.tabs id="scrobble-activity" class="mt-4"> <li :for={{id, album} <- @streams.recent_albums} id={id} class="group">
<.tabs_list active_tab={@scrobble_activity_mode} variant="segmented" class="w-48"> <div class="relative pb-4 group-last:pb-0">
<:tab <span
name="albums" class="group-last:hidden absolute left-6 top-6 -ml-px h-full w-0.5 bg-zinc-200"
phx-click={JS.push("set_scrobble_activity_mode", value: %{mode: "albums"})} aria-hidden="true"
> >
{gettext("Albums")} </span>
</:tab> <div class="relative flex space-x-3 items-center justify-between">
<:tab <div class="flex min-w-0 justify-between space-x-4 items-center">
name="tracks" <img
phx-click={JS.push("set_scrobble_activity_mode", value: %{mode: "tracks"})} class="h-12 w-12 rounded-md shadow-sm"
> src={album.cover_url}
{gettext("Tracks")} alt={album.metadata.title}
</:tab> />
</.tabs_list> <div>
<p
:if={album.artist.musicbrainz_id not in @artist_ids}
class="font-semibold text-sm block text-zinc-500 dark:text-zinc-400"
>
{album.artist.name}
</p>
<.link
:if={album.artist.musicbrainz_id in @artist_ids}
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/#{album.artist.musicbrainz_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}
<.tooltip>
<.icon
name="hero-information-circle"
class="-mt-1 h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer"
aria-hidden="true"
data-slot="icon"
/>
<:content>
<dl class="p-2">
<div class="flex gap-2 w-full">
<dt>{gettext("Album ID:")}</dt>
<dd class="font-mono">
<code id={"tooltip-album-#{album.scrobbled_at_uts}"}>
{album.metadata.musicbrainz_id || gettext("Unknown")}
</code>
<button
:if={album.metadata.musicbrainz_id not in ["", nil]}
phx-click={
JS.dispatch("music_library:clipcopy",
to: "#tooltip-album-#{album.scrobbled_at_uts}"
)
|> JS.transition("animate-shake")
}
>
<span class="sr-only">
{gettext("Copy album MusicBrainz ID to clipboard")}
</span>
<.icon
name="hero-clipboard-document"
class="-mt-1 h-5 w-5"
aria-hidden="true"
data-slot="icon"
/>
</button>
</dd>
</div>
<div class="flex gap-2 w-full mt-2">
<dt>{gettext("Artist ID:")}</dt>
<dd class="font-mono">
<code id={"tooltip-artist-#{album.scrobbled_at_uts}"}>
{album.artist.musicbrainz_id || gettext("Unknown")}
</code>
<button
:if={album.artist.musicbrainz_id not in ["", nil]}
phx-click={
JS.dispatch("music_library:clipcopy",
to: "#tooltip-artist-#{album.scrobbled_at_uts}"
)
|> JS.transition("animate-shake")
}
>
<span class="sr-only">
{gettext("Copy artist MusicBrainz ID to clipboard")}
</span>
<.icon
name="hero-clipboard-document"
class="-mt-1 h-5 w-5"
aria-hidden="true"
data-slot="icon"
/>
</button>
</dd>
</div>
</dl>
</:content>
</.tooltip>
</time>
</div>
</div>
<.tabs_panel name="albums" active={@scrobble_activity_mode == "albums"}> <div class="flex gap-1 flex-col text-right">
<ul <.badge :if={album.metadata.musicbrainz_id == ""}>
id="scrobble-activity-albums" {gettext("No MB ID")}
role="list" </.badge>
class="mt-5 p-6 bg-white dark:bg-zinc-800 rounded-md shadow-sm"
phx-update="stream"
>
<li :for={{id, album} <- @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={album.cover_url}
alt={album.metadata.title}
/>
<div>
<p
:if={album.artist.musicbrainz_id not in @artist_ids}
class="font-semibold text-sm block text-zinc-500 dark:text-zinc-400"
>
{album.artist.name}
</p>
<.link <.link
:if={album.artist.musicbrainz_id in @artist_ids} :if={
class="font-semibold text-sm block text-zinc-700 hover:text-zinc-500 dark:text-zinc-400 dark:hover:text-zinc-300" record_id =
navigate={~p"/artists/#{album.artist.musicbrainz_id}"} tracked_record?(@collected_releases, album.metadata.musicbrainz_id)
}
navigate={~p"/collection/#{record_id}"}
> >
{album.artist.name} <.badge color="success">
{gettext("Collected")}
</.badge>
</.link> </.link>
<p class="font-semibold text-sm md:text-base text-zinc-700 dark:text-zinc-300"> <.link
{album.metadata.title} :if={
</p> record_id =
<time tracked_record?(@wishlisted_releases, album.metadata.musicbrainz_id)
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" navigate={~p"/wishlist/#{record_id}"}
> >
{album.scrobbled_at_label} <.badge color="warning">
{gettext("Wishlisted")}
</.badge>
</.link>
</div>
<.dropdown
:if={
album.metadata.musicbrainz_id !== "" and
!tracked_record?(
@collected_releases ++ @wishlisted_releases,
album.metadata.musicbrainz_id
)
}
id={"actions-#{album.scrobbled_at_uts}-albums"}
placement="bottom-end"
>
<:toggle>
<span class="sr-only">{gettext("Choose which format to import")}</span>
<.icon
name="hero-star"
class="-mt-1 h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer"
aria-hidden="true"
data-slot="icon"
/>
</:toggle>
<.focus_wrap id={"actions-#{album.scrobbled_at_uts}-albums-focus-wrap"}>
<.dropdown_link
:for={format <- Records.Record.formats()}
id={"actions-#{album.scrobbled_at_uts}-#{format}-import"}
phx-click={
JS.push("import",
value: %{id: album.metadata.musicbrainz_id, format: format},
page_loading: true
)
}
>
{format_label(format)}
</.dropdown_link>
</.focus_wrap>
</.dropdown>
</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} <- @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.cover_url}
alt={track.title}
/>
<div>
<p
:if={track.artist.musicbrainz_id not in @artist_ids}
class="font-semibold text-sm block text-zinc-500 dark:text-zinc-400"
>
{track.artist.name}
</p>
<.link
:if={track.artist.musicbrainz_id in @artist_ids}
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/#{track.artist.musicbrainz_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>
<.tooltip> <.tooltip>
<.icon <.icon
name="hero-information-circle" name="hero-information-circle"
@@ -130,16 +316,43 @@
<:content> <:content>
<dl class="p-2"> <dl class="p-2">
<div class="flex gap-2 w-full"> <div class="flex gap-2 w-full">
<dt>{gettext("Album ID:")}</dt> <dt>{gettext("Track ID:")}</dt>
<dd class="font-mono"> <dd class="font-mono">
<code id={"tooltip-album-#{album.scrobbled_at_uts}"}> <code id={"tooltip-track-#{track.scrobbled_at_uts}"}>
{album.metadata.musicbrainz_id || gettext("Unknown")} {track.musicbrainz_id || gettext("Unknown")}
</code> </code>
<button <button
:if={album.metadata.musicbrainz_id not in ["", nil]} :if={track.musicbrainz_id not in ["", nil]}
phx-click={ phx-click={
JS.dispatch("music_library:clipcopy", JS.dispatch("music_library:clipcopy",
to: "#tooltip-album-#{album.scrobbled_at_uts}" to: "#tooltip-track-#{track.scrobbled_at_uts}"
)
|> JS.transition("animate-shake")
}
>
<span class="sr-only">
{gettext("Copy track MusicBrainz ID to clipboard")}
</span>
<.icon
name="hero-clipboard-document"
class="-mt-1 h-5 w-5"
aria-hidden="true"
data-slot="icon"
/>
</button>
</dd>
</div>
<div class="flex gap-2 w-full mt-2">
<dt>{gettext("Album ID:")}</dt>
<dd class="font-mono">
<code id={"tooltip-track-album-#{track.scrobbled_at_uts}"}>
{track.album.musicbrainz_id || gettext("Unknown")}
</code>
<button
:if={track.album.musicbrainz_id not in ["", nil]}
phx-click={
JS.dispatch("music_library:clipcopy",
to: "#tooltip-track-album-#{track.scrobbled_at_uts}"
) )
|> JS.transition("animate-shake") |> JS.transition("animate-shake")
} }
@@ -159,14 +372,14 @@
<div class="flex gap-2 w-full mt-2"> <div class="flex gap-2 w-full mt-2">
<dt>{gettext("Artist ID:")}</dt> <dt>{gettext("Artist ID:")}</dt>
<dd class="font-mono"> <dd class="font-mono">
<code id={"tooltip-artist-#{album.scrobbled_at_uts}"}> <code id={"tooltip-track-artist-#{track.scrobbled_at_uts}"}>
{album.artist.musicbrainz_id || gettext("Unknown")} {track.artist.musicbrainz_id || gettext("Unknown")}
</code> </code>
<button <button
:if={album.artist.musicbrainz_id not in ["", nil]} :if={track.artist.musicbrainz_id not in ["", nil]}
phx-click={ phx-click={
JS.dispatch("music_library:clipcopy", JS.dispatch("music_library:clipcopy",
to: "#tooltip-artist-#{album.scrobbled_at_uts}" to: "#tooltip-track-artist-#{track.scrobbled_at_uts}"
) )
|> JS.transition("animate-shake") |> JS.transition("animate-shake")
} }
@@ -186,359 +399,151 @@
</dl> </dl>
</:content> </:content>
</.tooltip> </.tooltip>
</time> </div>
</div> </div>
</div>
<div class="flex gap-1 flex-col text-right"> <div class="flex gap-1 flex-col text-right">
<.badge :if={album.metadata.musicbrainz_id == ""}> <.badge :if={track.album.musicbrainz_id == ""}>
{gettext("No MB ID")} {gettext("No MB ID")}
</.badge>
<.link
:if={
record_id =
tracked_record?(@collected_releases, album.metadata.musicbrainz_id)
}
navigate={~p"/collection/#{record_id}"}
>
<.badge color="success">
{gettext("Collected")}
</.badge> </.badge>
</.link>
<.link
:if={
record_id =
tracked_record?(@wishlisted_releases, album.metadata.musicbrainz_id)
}
navigate={~p"/wishlist/#{record_id}"}
>
<.badge color="warning">
{gettext("Wishlisted")}
</.badge>
</.link>
</div>
<.dropdown
:if={
album.metadata.musicbrainz_id !== "" and
!tracked_record?(
@collected_releases ++ @wishlisted_releases,
album.metadata.musicbrainz_id
)
}
id={"actions-#{album.scrobbled_at_uts}-albums"}
placement="bottom-end"
>
<:toggle>
<span class="sr-only">{gettext("Choose which format to import")}</span>
<.icon
name="hero-star"
class="-mt-1 h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer"
aria-hidden="true"
data-slot="icon"
/>
</:toggle>
<.focus_wrap id={"actions-#{album.scrobbled_at_uts}-albums-focus-wrap"}>
<.dropdown_link
:for={format <- Records.Record.formats()}
id={"actions-#{album.scrobbled_at_uts}-#{format}-import"}
phx-click={
JS.push("import",
value: %{id: album.metadata.musicbrainz_id, format: format},
page_loading: true
)
}
>
{format_label(format)}
</.dropdown_link>
</.focus_wrap>
</.dropdown>
</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} <- @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.cover_url}
alt={track.title}
/>
<div>
<p
:if={track.artist.musicbrainz_id not in @artist_ids}
class="font-semibold text-sm block text-zinc-500 dark:text-zinc-400"
>
{track.artist.name}
</p>
<.link <.link
:if={track.artist.musicbrainz_id in @artist_ids} :if={
class="font-semibold text-sm block text-zinc-700 hover:text-zinc-500 dark:text-zinc-400 dark:hover:text-zinc-300" record_id = tracked_record?(@collected_releases, track.album.musicbrainz_id)
navigate={~p"/artists/#{track.artist.musicbrainz_id}"} }
navigate={~p"/collection/#{record_id}"}
> >
{track.artist.name} <.badge color="success">{gettext("Collected")}</.badge>
</.link> </.link>
<p class="font-semibold text-sm md:text-base text-zinc-700 dark:text-zinc-300"> <.link
{track.title} :if={
</p> record_id =
<p class="font-semibold text-sm text-zinc-500 dark:text-zinc-400"> tracked_record?(@wishlisted_releases, track.album.musicbrainz_id)
{track.album.title} }
</p> navigate={~p"/wishlist/#{record_id}"}
<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} <.badge color="warning">{gettext("Wishlisted")}</.badge>
</time> </.link>
<.tooltip> </div>
<.dropdown
:if={
track.album.musicbrainz_id !== "" and
!tracked_record?(
@collected_releases ++ @wishlisted_releases,
track.album.musicbrainz_id
)
}
id={"actions-#{track.scrobbled_at_uts}-tracks"}
placement="bottom-end"
>
<:toggle>
<span class="sr-only">{gettext("Choose which format to import")}</span>
<.icon <.icon
name="hero-information-circle" name="hero-star"
class="-mt-1 h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer" class="-mt-1 h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer"
aria-hidden="true" aria-hidden="true"
data-slot="icon" data-slot="icon"
/> />
<:content> </:toggle>
<dl class="p-2"> <.focus_wrap id={"actions-#{track.scrobbled_at_uts}-tracks-focus-wrap"}>
<div class="flex gap-2 w-full"> <.dropdown_link
<dt>{gettext("Track ID:")}</dt> :for={format <- Records.Record.formats()}
<dd class="font-mono"> id={"actions-#{track.scrobbled_at_uts}-#{format}-import"}
<code id={"tooltip-track-#{track.scrobbled_at_uts}"}> phx-click={
{track.musicbrainz_id || gettext("Unknown")} JS.push("import",
</code> value: %{id: track.album.musicbrainz_id, format: format},
<button page_loading: true
:if={track.musicbrainz_id not in ["", nil]} )
phx-click={ }
JS.dispatch("music_library:clipcopy", >
to: "#tooltip-track-#{track.scrobbled_at_uts}" {format_label(format)}
) </.dropdown_link>
|> JS.transition("animate-shake") </.focus_wrap>
} </.dropdown>
>
<span class="sr-only">
{gettext("Copy track MusicBrainz ID to clipboard")}
</span>
<.icon
name="hero-clipboard-document"
class="-mt-1 h-5 w-5"
aria-hidden="true"
data-slot="icon"
/>
</button>
</dd>
</div>
<div class="flex gap-2 w-full mt-2">
<dt>{gettext("Album ID:")}</dt>
<dd class="font-mono">
<code id={"tooltip-track-album-#{track.scrobbled_at_uts}"}>
{track.album.musicbrainz_id || gettext("Unknown")}
</code>
<button
:if={track.album.musicbrainz_id not in ["", nil]}
phx-click={
JS.dispatch("music_library:clipcopy",
to: "#tooltip-track-album-#{track.scrobbled_at_uts}"
)
|> JS.transition("animate-shake")
}
>
<span class="sr-only">
{gettext("Copy album MusicBrainz ID to clipboard")}
</span>
<.icon
name="hero-clipboard-document"
class="-mt-1 h-5 w-5"
aria-hidden="true"
data-slot="icon"
/>
</button>
</dd>
</div>
<div class="flex gap-2 w-full mt-2">
<dt>{gettext("Artist ID:")}</dt>
<dd class="font-mono">
<code id={"tooltip-track-artist-#{track.scrobbled_at_uts}"}>
{track.artist.musicbrainz_id || gettext("Unknown")}
</code>
<button
:if={track.artist.musicbrainz_id not in ["", nil]}
phx-click={
JS.dispatch("music_library:clipcopy",
to: "#tooltip-track-artist-#{track.scrobbled_at_uts}"
)
|> JS.transition("animate-shake")
}
>
<span class="sr-only">
{gettext("Copy artist MusicBrainz ID to clipboard")}
</span>
<.icon
name="hero-clipboard-document"
class="-mt-1 h-5 w-5"
aria-hidden="true"
data-slot="icon"
/>
</button>
</dd>
</div>
</dl>
</:content>
</.tooltip>
</div>
</div> </div>
<div class="flex gap-1 flex-col text-right">
<.badge :if={track.album.musicbrainz_id == ""}>
{gettext("No MB ID")}
</.badge>
<.link
:if={
record_id = tracked_record?(@collected_releases, track.album.musicbrainz_id)
}
navigate={~p"/collection/#{record_id}"}
>
<.badge color="success">{gettext("Collected")}</.badge>
</.link>
<.link
:if={
record_id = tracked_record?(@wishlisted_releases, track.album.musicbrainz_id)
}
navigate={~p"/wishlist/#{record_id}"}
>
<.badge color="warning">{gettext("Wishlisted")}</.badge>
</.link>
</div>
<.dropdown
:if={
track.album.musicbrainz_id !== "" and
!tracked_record?(
@collected_releases ++ @wishlisted_releases,
track.album.musicbrainz_id
)
}
id={"actions-#{track.scrobbled_at_uts}-tracks"}
placement="bottom-end"
>
<:toggle>
<span class="sr-only">{gettext("Choose which format to import")}</span>
<.icon
name="hero-star"
class="-mt-1 h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer"
aria-hidden="true"
data-slot="icon"
/>
</:toggle>
<.focus_wrap id={"actions-#{track.scrobbled_at_uts}-tracks-focus-wrap"}>
<.dropdown_link
:for={format <- Records.Record.formats()}
id={"actions-#{track.scrobbled_at_uts}-#{format}-import"}
phx-click={
JS.push("import",
value: %{id: track.album.musicbrainz_id, format: format},
page_loading: true
)
}
>
{format_label(format)}
</.dropdown_link>
</.focus_wrap>
</.dropdown>
</div> </div>
</div> </li>
</li> </ul>
</ul> </.tabs_panel>
</.tabs_panel> </.tabs>
</.tabs> </div>
</div>
<div class="mt-5 grid grid-cols-1 lg:grid-cols-11 gap-4"> <div class="mt-5 grid grid-cols-1 lg:grid-cols-11 gap-4">
<div class="lg:col-span-3"> <div class="lg:col-span-3">
<div class="flex justify-between items-center"> <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={@streams.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"> <h1 class="text-base lg:text-2xl text-zinc-900 dark:text-zinc-200 font-semibold">
{gettext("On This day")} {gettext("Top %{n} Artists", %{n: length(@records_by_artist)})}
</h1> </h1>
<.form <div class="mt-5 bg-white dark:bg-zinc-800 rounded-md shadow-sm">
:let={f} <.vertical_bar_chart
for={to_form(%{"current_date" => @current_date})} data={@records_by_artist}
phx-change="set_current_date" width={600}
> height={26 * length(@records_by_artist)}
<.date_picker size="xs" field={f[:current_date]}> color_class="fill-red-500"
<:outer_suffix> label_fn={fn datum -> datum.name end}
<.button value_fn={fn datum -> datum.count end}
size="xs" label_click={
type="button" fn datum ->
phx-click={ JS.navigate(~p"/artists/#{datum.id}")
JS.push("set_current_date", value: %{"current_date" => Date.utc_today()}) end
} }
> class="w-full"
Today />
</.button> </div>
</:outer_suffix>
</.date_picker>
</.form>
</div> </div>
<div class="bg-white dark:bg-zinc-800 rounded-md shadow-sm">
<.records_on_this_day
current_date={@current_date}
records={@streams.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} 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}
label_click={
fn datum ->
JS.navigate(~p"/artists/#{datum.id}")
end
}
class="w-full"
/>
</div>
</div>
<div class="lg:col-span-4"> <div class="lg:col-span-4">
<h1 class="text-base lg:text-2xl text-zinc-900 dark:text-zinc-200 font-semibold"> <h1 class="text-base lg:text-2xl text-zinc-900 dark:text-zinc-200 font-semibold">
{gettext("Top %{n} Genres", %{n: length(@records_by_genre)})} {gettext("Top %{n} Genres", %{n: length(@records_by_genre)})}
</h1> </h1>
<div class="mt-5 bg-white dark:bg-zinc-800 rounded-md shadow-sm"> <div class="mt-5 bg-white dark:bg-zinc-800 rounded-md shadow-sm">
<.vertical_bar_chart <.vertical_bar_chart
data={@records_by_genre} data={@records_by_genre}
width={600} width={600}
height={26 * length(@records_by_genre)} height={26 * length(@records_by_genre)}
color_class="fill-zinc-500" color_class="fill-zinc-500"
label_fn={fn {genre, _count} -> genre end} label_fn={fn {genre, _count} -> genre end}
value_fn={fn {_genre, count} -> count end} value_fn={fn {_genre, count} -> count end}
label_click={ label_click={
fn {genre, _count} -> JS.navigate(~p"/collection?#{%{query: ~s(genre:"#{genre}")}}") end fn {genre, _count} ->
} JS.navigate(~p"/collection?#{%{query: ~s(genre:"#{genre}")}}")
class="w-full" end
/> }
class="w-full"
/>
</div>
</div> </div>
</div> </div>
</div> </Layouts.app>
lib/music_library_web/live/wishlist_live/index.html.heex
+79 -77
View File
@@ -1,83 +1,85 @@
<div> <Layouts.app flash={@flash} current_section={@current_section} socket={@socket}>
<header class="gap-6 mb-2"> <div>
<div class="flex items-center justify-between gap-6 mb-2 mt-2"> <header class="gap-6 mb-2">
<.search_form query={@record_list_params.query} /> <div class="flex items-center justify-between gap-6 mb-2 mt-2">
<.button <.search_form query={@record_list_params.query} />
variant="solid" <.button
size="sm" variant="solid"
patch={~p"/wishlist/import"} size="sm"
> patch={~p"/wishlist/import"}
<.icon name="hero-plus" class="icon" aria-hidden="true" data-slot="icon" /> >
{gettext("Add")} <.icon name="hero-plus" class="icon" aria-hidden="true" data-slot="icon" />
</.button> {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={[
"rounded-l-md rounded-r-none",
@record_list_params.order == :insertion && "!bg-zinc-100 dark:!bg-zinc-700"
]}
>
<.icon name="hero-star" class="icon" aria-hidden="true" data-slot="icon" />
{gettext("Insertion")}
</.button>
<.button
patch={order_path(@record_list_params, :alphabetical)}
size="sm"
class={[
"-ml-px rounded-r-md rounded-l-none",
@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" />
{gettext("A->Z")}
</.button>
</.button_group>
</div> </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={[
"rounded-l-md rounded-r-none",
@record_list_params.order == :insertion && "!bg-zinc-100 dark:!bg-zinc-700"
]}
>
<.icon name="hero-star" class="icon" aria-hidden="true" data-slot="icon" />
{gettext("Insertion")}
</.button>
<.button
patch={order_path(@record_list_params, :alphabetical)}
size="sm"
class={[
"-ml-px rounded-r-md rounded-l-none",
@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" />
{gettext("A->Z")}
</.button>
</.button_group>
</div> </div>
</div>
<.record_list <.record_list
current_date={@current_date} current_date={@current_date}
records={@streams.records} records={@streams.records}
record_show_path={fn record -> ~p"/wishlist/#{record}" end} record_show_path={fn record -> ~p"/wishlist/#{record}" end}
record_edit_path={fn record -> ~p"/wishlist/#{record}/edit" 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.RecordFormComponent}
id={@record.id}
action={@live_action}
show_purchased_at={false}
record={@record}
patch={back_path(@record_list_params)}
/> />
</.structured_modal>
<.structured_modal <.structured_modal
:if={@live_action == :import} :if={@live_action == :edit}
id="record-modal" id="record-modal"
on_close={JS.patch(back_path(@record_list_params))} on_close={JS.patch(back_path(@record_list_params))}
> >
<.live_component <.live_component
module={MusicLibraryWeb.AddRecordComponent} module={MusicLibraryWeb.RecordFormComponent}
id={:search} id={@record.id}
title={@page_title} action={@live_action}
action={@live_action} show_purchased_at={false}
record={@record} record={@record}
patch={back_path(@record_list_params)} patch={back_path(@record_list_params)}
initial_query="" />
icon_name="hero-plus" </.structured_modal>
/>
</.structured_modal>
<.pagination id={:bottom_pagination} pagination_params={@record_list_params} /> <.structured_modal
:if={@live_action == :import}
id="record-modal"
on_close={JS.patch(back_path(@record_list_params))}
>
<.live_component
module={MusicLibraryWeb.AddRecordComponent}
id={:search}
title={@page_title}
action={@live_action}
record={@record}
patch={back_path(@record_list_params)}
initial_query=""
icon_name="hero-plus"
/>
</.structured_modal>
<.pagination id={:bottom_pagination} pagination_params={@record_list_params} />
</Layouts.app>
lib/music_library_web/live/wishlist_live/show.html.heex
+312 -308
View File
@@ -1,317 +1,321 @@
<div class="md:flex mt-4 px-4 md:gap-x-4"> <Layouts.app flash={@flash} current_section={@current_section} socket={@socket}>
<div class="drop-shadow-sm md:max-w-[38rem]"> <div class="md:flex mt-4 px-4 md:gap-x-4">
<.record_cover <div class="drop-shadow-sm md:max-w-[38rem]">
record={@record} <.record_cover
class="w-full rounded-lg drop-shadow-sm" record={@record}
/> class="w-full rounded-lg drop-shadow-sm"
</div> />
<div class="grow">
<div class="mt-4 md:mt-0 flex justify-between">
<div class="min-w-12">
<h1 class="text-base font-medium leading-6 text-zinc-700">
<.artist_links joinphrase_class="text-sm" artists={@record.artists} />
</h1>
<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} />
{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)}
</p>
</div>
<.dropdown id={"actions-#{@record.id}"} placement="bottom-end">
<:toggle class="h-5 block">
<span class="sr-only">{gettext("Actions")}</span>
<.icon
name="hero-ellipsis-vertical"
class="-mt-1 h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer"
aria-hidden="true"
data-slot="icon"
/>
</:toggle>
<.focus_wrap id={"actions-#{@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>
</div> </div>
<div class="mt-4 md:mt-8"> <div class="grow">
<%!-- TODO: replace with OSS version --%> <div class="mt-4 md:mt-0 flex justify-between">
<dl class="divide-y divide-zinc-100 dark:divide-slate-300/30"> <div class="min-w-12">
<div class="py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0"> <h1 class="text-base font-medium leading-6 text-zinc-700">
<dt class="text-xs md:text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400"> <.artist_links joinphrase_class="text-sm" artists={@record.artists} />
{gettext("ID")} </h1>
</dt> <h2 class="mt-1 flex font-semibold text-lg md:text-2xl text-zinc-700 dark:text-zinc-300 text-wrap">
<dd class="mt-1 text-xs md:text-sm flex justify-between leading-6 text-zinc-700 dark:text-zinc-300 sm:col-span-2 sm:mt-0"> {@record.title}
<code id={"record-#{@record.id}"}>{@record.id}</code> </h2>
<button phx-click={ <p class="flex items-center mt-2 text-sm text-zinc-500 dark:text-zinc-400">
JS.dispatch("music_library:clipcopy", to: "#record-" <> @record.id) <.record_colors record={@record} />
|> JS.transition("animate-shake") {Records.Record.format_release_date(@record.release_date)}
}> <span :if={@current_date && !Records.Record.released?(@record, @current_date)}>
<span class="sr-only">{gettext("Copy record ID to clipboard")}</span> ({gettext("Unreleased")})
<.icon
name="hero-clipboard-document"
class="-mt-1 h-5 w-5"
aria-hidden="true"
data-slot="icon"
/>
</button>
</dd>
</div>
<div class="py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
<dt class="text-xs md:text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400">
{gettext("Genres")}
</dt>
<dd class="mt-1 text-xs md:text-sm leading-6 text-zinc-700 dark:text-zinc-300 sm:col-span-2 sm:mt-0">
<.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>
</dd>
</div>
<div class="py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
<dt class="text-xs md: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 sm:col-span-2 sm:mt-0">
<a href={MusicBrainz.ReleaseGroup.url(@record.musicbrainz_id)}>
<code id={"mb-#{@record.musicbrainz_id}"}>{@record.musicbrainz_id}</code>
</a>
<button phx-click={
JS.dispatch("music_library:clipcopy", to: "#mb-" <> @record.musicbrainz_id)
|> JS.transition("animate-shake")
}>
<span class="sr-only">{gettext("Copy MusicBrainz ID to clipboard")}</span>
<.icon
name="hero-clipboard-document"
class="-mt-1 h-5 w-5"
aria-hidden="true"
data-slot="icon"
/>
</button>
</dd>
</div>
<div class="py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
<dt class="text-xs md:text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400">
{gettext("Published releases")}
</dt>
<dd class="mt-1 text-xs md:text-sm leading-6 text-zinc-700 dark:text-zinc-300 sm:col-span-2 sm:mt-0">
{Records.Record.release_count(@record)}
</dd>
</div>
<div class="py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
<dt class="text-xs md:text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400">
{gettext("Wishlisted release")}
</dt>
<dd class="mt-1 flex justify-between space-x-2 leading-6 sm:col-span-2 sm:mt-0">
<span
:if={!@record.selected_release_id}
class="text-xs md:text-sm text-zinc-700 dark:text-zinc-300"
>
{gettext("No release selected")}
</span> </span>
· {format_label(@record.format)} · {type_label(@record.type)}
<.release_summary </p>
:if={@record.selected_release_id} </div>
release={Records.Record.selected_release(@record)} <.dropdown id={"actions-#{@record.id}"} placement="bottom-end">
<:toggle class="h-5 block">
<span class="sr-only">{gettext("Actions")}</span>
<.icon
name="hero-ellipsis-vertical"
class="-mt-1 h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer"
aria-hidden="true"
data-slot="icon"
/> />
</dd> </:toggle>
</div> <.focus_wrap id={"actions-#{@record.id}-focus-wrap"}>
<div <.dropdown_link
:if={Records.Record.included_release_groups_count(@record) > 0} id={"actions-#{@record.id}-edit"}
class="py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0" patch={~p"/wishlist/#{@record}/show/edit"}
> >
<dt class="text-xs md:text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400"> <.icon
{gettext("Includes")} name="hero-pencil-square"
</dt> class="h-4 w-4 mr-1 phx-click-loading:animate-bounce"
<dd class="mt-1 text-xs md:text-sm leading-6 text-zinc-700 dark:text-zinc-300 sm:col-span-2 sm:mt-0"> aria-hidden="true"
<ul> data-slot="icon"
<li :for={included_release_group <- Records.Record.included_release_groups(@record)}> />
{included_release_group.artists} - {included_release_group.title} {gettext("Edit")}
</li> </.dropdown_link>
</ul>
</dd> <.dropdown_link
</div> id={"actions-#{@record.id}-refresh-cover"}
<div class="py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0"> phx-click={JS.push("refresh_cover", value: %{id: @record.id})}
<dt class="text-xs md:text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400"> >
{gettext("Inserted at")} <.icon
</dt> name="hero-photo"
<dd class="mt-1 text-xs md:text-sm leading-6 text-zinc-700 dark:text-zinc-300 sm:col-span-2 sm:mt-0"> class="h-4 w-4 mr-1 phx-click-loading:animate-bounce"
{Records.Record.format_as_date(@record.inserted_at)} aria-hidden="true"
</dd> data-slot="icon"
</div> />
<div class="py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0"> {gettext("Refresh cover")}
<dt class="text-xs md:text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400"> </.dropdown_link>
{gettext("Updated at")}
</dt> <.dropdown_link
<dd class="mt-1 text-xs md:text-sm leading-6 text-zinc-700 dark:text-zinc-300 sm:col-span-2 sm:mt-0"> id={"actions-#{@record.id}-refresh-mb-data"}
{Records.Record.format_as_date(@record.updated_at)} phx-click={JS.push("refresh_musicbrainz_data", value: %{id: @record.id})}
</dd> >
</div> <.icon
</dl> 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>
</div>
<div class="mt-4 md:mt-8">
<%!-- TODO: replace with OSS version --%>
<dl class="divide-y divide-zinc-100 dark:divide-slate-300/30">
<div class="py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
<dt class="text-xs md:text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400">
{gettext("ID")}
</dt>
<dd class="mt-1 text-xs md:text-sm flex justify-between leading-6 text-zinc-700 dark:text-zinc-300 sm:col-span-2 sm:mt-0">
<code id={"record-#{@record.id}"}>{@record.id}</code>
<button phx-click={
JS.dispatch("music_library:clipcopy", to: "#record-" <> @record.id)
|> JS.transition("animate-shake")
}>
<span class="sr-only">{gettext("Copy record ID to clipboard")}</span>
<.icon
name="hero-clipboard-document"
class="-mt-1 h-5 w-5"
aria-hidden="true"
data-slot="icon"
/>
</button>
</dd>
</div>
<div class="py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
<dt class="text-xs md:text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400">
{gettext("Genres")}
</dt>
<dd class="mt-1 text-xs md:text-sm leading-6 text-zinc-700 dark:text-zinc-300 sm:col-span-2 sm:mt-0">
<.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>
</dd>
</div>
<div class="py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
<dt class="text-xs md: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 sm:col-span-2 sm:mt-0">
<a href={MusicBrainz.ReleaseGroup.url(@record.musicbrainz_id)}>
<code id={"mb-#{@record.musicbrainz_id}"}>{@record.musicbrainz_id}</code>
</a>
<button phx-click={
JS.dispatch("music_library:clipcopy", to: "#mb-" <> @record.musicbrainz_id)
|> JS.transition("animate-shake")
}>
<span class="sr-only">{gettext("Copy MusicBrainz ID to clipboard")}</span>
<.icon
name="hero-clipboard-document"
class="-mt-1 h-5 w-5"
aria-hidden="true"
data-slot="icon"
/>
</button>
</dd>
</div>
<div class="py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
<dt class="text-xs md:text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400">
{gettext("Published releases")}
</dt>
<dd class="mt-1 text-xs md:text-sm leading-6 text-zinc-700 dark:text-zinc-300 sm:col-span-2 sm:mt-0">
{Records.Record.release_count(@record)}
</dd>
</div>
<div class="py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
<dt class="text-xs md:text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400">
{gettext("Wishlisted release")}
</dt>
<dd class="mt-1 flex justify-between space-x-2 leading-6 sm:col-span-2 sm:mt-0">
<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)}
/>
</dd>
</div>
<div
:if={Records.Record.included_release_groups_count(@record) > 0}
class="py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0"
>
<dt class="text-xs md:text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400">
{gettext("Includes")}
</dt>
<dd class="mt-1 text-xs md:text-sm leading-6 text-zinc-700 dark:text-zinc-300 sm:col-span-2 sm:mt-0">
<ul>
<li :for={
included_release_group <- Records.Record.included_release_groups(@record)
}>
{included_release_group.artists} - {included_release_group.title}
</li>
</ul>
</dd>
</div>
<div class="py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
<dt class="text-xs md:text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400">
{gettext("Inserted at")}
</dt>
<dd class="mt-1 text-xs md:text-sm leading-6 text-zinc-700 dark:text-zinc-300 sm:col-span-2 sm:mt-0">
{Records.Record.format_as_date(@record.inserted_at)}
</dd>
</div>
<div class="py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
<dt class="text-xs md:text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400">
{gettext("Updated at")}
</dt>
<dd class="mt-1 text-xs md:text-sm leading-6 text-zinc-700 dark:text-zinc-300 sm:col-span-2 sm:mt-0">
{Records.Record.format_as_date(@record.updated_at)}
</dd>
</div>
</dl>
</div>
</div> </div>
</div> </div>
</div>
<div :if={@online_store_templates != []} class="mt-4"> <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"> <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"> <summary class="text-xs sm:text-sm font-medium cursor-pointer">
{gettext("Check Online Stores")} {gettext("Check Online Stores")}
</summary> </summary>
<div class="mt-4 space-y-2"> <div class="mt-4 space-y-2">
<.button <.button
:for={template <- @online_store_templates} :for={template <- @online_store_templates}
href={OnlineStoreTemplates.generate_url(template, @record)} href={OnlineStoreTemplates.generate_url(template, @record)}
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
variant="ghost" variant="ghost"
size="sm" size="sm"
class="ml-2" class="ml-2"
> >
<img <img
class="mr-2" class="mr-2"
src={MusicLibrary.OnlineStoreTemplates.favicon_url(template)} src={MusicLibrary.OnlineStoreTemplates.favicon_url(template)}
alt={template.name} alt={template.name}
loading="lazy" loading="lazy"
/> />
<span class="text-sm font-medium text-zinc-900 dark:text-white"> <span class="text-sm font-medium text-zinc-900 dark:text-white">
{template.name} {template.name}
</span> </span>
</.button> </.button>
</div> </div>
</details> </details>
</div> </div>
<.json_viewer title={gettext("MusicBrainz data")} data={@record.musicbrainz_data} /> <.json_viewer title={gettext("MusicBrainz data")} data={@record.musicbrainz_data} />
<.structured_modal <.structured_modal
:if={@live_action == :edit} :if={@live_action == :edit}
id="record-modal" id="record-modal"
on_close={JS.patch(~p"/wishlist/#{@record}")} on_close={JS.patch(~p"/wishlist/#{@record}")}
> >
<.live_component <.live_component
module={MusicLibraryWeb.RecordFormComponent} module={MusicLibraryWeb.RecordFormComponent}
id={@record.id} id={@record.id}
action={@live_action} action={@live_action}
show_purchased_at={false} show_purchased_at={false}
record={@record} record={@record}
patch={~p"/wishlist/#{@record}"} patch={~p"/wishlist/#{@record}"}
/> />
</.structured_modal> </.structured_modal>
</Layouts.app>