Use explicit Phoenix 1.8 style layouts
This commit is contained in:
Claudio Ortolina
@@ -62,8 +62,7 @@ defmodule MusicLibraryWeb do
|
||||
|
||||
def live_view do
|
||||
quote do
|
||||
use Phoenix.LiveView,
|
||||
layout: {MusicLibraryWeb.Layouts, :app}
|
||||
use Phoenix.LiveView
|
||||
|
||||
unquote(html_helpers())
|
||||
end
|
||||
@@ -102,6 +101,7 @@ defmodule MusicLibraryWeb do
|
||||
# HTML escaping functionality
|
||||
import Phoenix.HTML
|
||||
|
||||
alias MusicLibraryWeb.Layouts
|
||||
# Shortcut for generating JS commands
|
||||
alias Phoenix.LiveView.JS
|
||||
|
||||
|
||||
@@ -126,7 +126,7 @@
|
||||
toasts_sync={assigns[:toasts_sync]}
|
||||
toast_class_fn={&toast_class_fn/1}
|
||||
/>
|
||||
{@inner_content}
|
||||
{render_slot(@inner_block)}
|
||||
</div>
|
||||
</main>
|
||||
|
||||
|
||||
@@ -1,270 +1,272 @@
|
||||
<div class="mt-4 px-4 sm:px-6 lg:px-8">
|
||||
<header class="mt-1 gap-1">
|
||||
<div class="flex items-center justify-between">
|
||||
<h1 class="font-semibold text-2xl leading-5 text-zinc-700 dark:text-zinc-300 text-wrap">
|
||||
{@artist.name}
|
||||
<.country_flag country={@country} />
|
||||
</h1>
|
||||
<Layouts.app flash={@flash} current_section={@current_section} socket={@socket}>
|
||||
<div class="mt-4 px-4 sm:px-6 lg:px-8">
|
||||
<header class="mt-1 gap-1">
|
||||
<div class="flex items-center justify-between">
|
||||
<h1 class="font-semibold text-2xl leading-5 text-zinc-700 dark:text-zinc-300 text-wrap">
|
||||
{@artist.name}
|
||||
<.country_flag country={@country} />
|
||||
</h1>
|
||||
|
||||
<div class="flex items-center">
|
||||
<button
|
||||
class="text-xs md:text-sm text-zinc-700 dark:text-zinc-300"
|
||||
phx-click={MusicLibraryWeb.NotesComponent.open("artist-notes-sheet")}
|
||||
>
|
||||
<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>
|
||||
<div class="flex items-center">
|
||||
<button
|
||||
class="text-xs md:text-sm text-zinc-700 dark:text-zinc-300"
|
||||
phx-click={MusicLibraryWeb.NotesComponent.open("artist-notes-sheet")}
|
||||
>
|
||||
<span class="sr-only">{gettext("Open Notes")}</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-#{@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"
|
||||
name="hero-pencil-square"
|
||||
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}
|
||||
/>
|
||||
<.dropdown id={"actions-#{@artist.musicbrainz_id}"} placement="bottom-end">
|
||||
<:toggle>
|
||||
<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-#{@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>
|
||||
|
||||
<.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>
|
||||
<.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"
|
||||
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>
|
||||
|
||||
<.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>
|
||||
|
||||
<.json_viewer
|
||||
:if={@artist_info.musicbrainz_data}
|
||||
title={gettext("MusicBrainz data")}
|
||||
data={@artist_info.musicbrainz_data}
|
||||
/>
|
||||
<.structured_modal
|
||||
:if={@live_action == :import}
|
||||
id="record-modal"
|
||||
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
|
||||
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"
|
||||
id="artist-notes"
|
||||
sheet_id="artist-notes-sheet"
|
||||
module={MusicLibraryWeb.NotesComponent}
|
||||
entity={:artist}
|
||||
musicbrainz_id={@artist.musicbrainz_id}
|
||||
/>
|
||||
</.structured_modal>
|
||||
|
||||
<.live_component
|
||||
id="artist-notes"
|
||||
sheet_id="artist-notes-sheet"
|
||||
module={MusicLibraryWeb.NotesComponent}
|
||||
entity={:artist}
|
||||
musicbrainz_id={@artist.musicbrainz_id}
|
||||
/>
|
||||
|
||||
<.structured_modal
|
||||
:if={@live_action == :edit}
|
||||
id="artist-info-modal"
|
||||
on_close={JS.patch(~p"/artists/#{@artist.musicbrainz_id}")}
|
||||
>
|
||||
<.live_component
|
||||
module={MusicLibraryWeb.ArtistLive.FormComponent}
|
||||
id={@artist_info.id}
|
||||
action={@live_action}
|
||||
artist_info={@artist_info}
|
||||
artist={@artist}
|
||||
patch={~p"/artists/#{@artist.musicbrainz_id}"}
|
||||
/>
|
||||
</.structured_modal>
|
||||
<.structured_modal
|
||||
:if={@live_action == :edit}
|
||||
id="artist-info-modal"
|
||||
on_close={JS.patch(~p"/artists/#{@artist.musicbrainz_id}")}
|
||||
>
|
||||
<.live_component
|
||||
module={MusicLibraryWeb.ArtistLive.FormComponent}
|
||||
id={@artist_info.id}
|
||||
action={@live_action}
|
||||
artist_info={@artist_info}
|
||||
artist={@artist}
|
||||
patch={~p"/artists/#{@artist.musicbrainz_id}"}
|
||||
/>
|
||||
</.structured_modal>
|
||||
</Layouts.app>
|
||||
|
||||
@@ -1,109 +1,111 @@
|
||||
<div>
|
||||
<header class="gap-6 mb-2">
|
||||
<div class="flex items-center justify-between gap-6 mb-2 mt-2">
|
||||
<.search_form query={@record_list_params.query} />
|
||||
<Layouts.app flash={@flash} current_section={@current_section} socket={@socket}>
|
||||
<div>
|
||||
<header class="gap-6 mb-2">
|
||||
<div class="flex items-center justify-between gap-6 mb-2 mt-2">
|
||||
<.search_form query={@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
|
||||
variant="solid"
|
||||
patch={order_path(@record_list_params, :purchase)}
|
||||
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" />
|
||||
{gettext("Add")}
|
||||
<.icon
|
||||
name="hero-banknotes-solid"
|
||||
class="icon"
|
||||
aria-hidden="true"
|
||||
data-slot="icon"
|
||||
/>
|
||||
{gettext("Purchase")}
|
||||
</.button>
|
||||
<.button
|
||||
variant="solid"
|
||||
patch={order_path(@record_list_params, :alphabetical)}
|
||||
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" />
|
||||
{gettext("Scan")}
|
||||
<.icon name="hero-user-solid" class="icon" aria-hidden="true" data-slot="icon" />
|
||||
{gettext("A->Z")}
|
||||
</.button>
|
||||
</.button_group>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="flex items-end justify-between gap-6 mt-8">
|
||||
<.button_group>
|
||||
<.button
|
||||
patch={order_path(@record_list_params, :purchase)}
|
||||
size="sm"
|
||||
class={[
|
||||
@record_list_params.order == :purchase && "!bg-zinc-100 dark:!bg-zinc-700"
|
||||
]}
|
||||
>
|
||||
<.icon
|
||||
name="hero-banknotes-solid"
|
||||
class="icon"
|
||||
aria-hidden="true"
|
||||
data-slot="icon"
|
||||
/>
|
||||
{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>
|
||||
|
||||
<.record_list
|
||||
records={@streams.records}
|
||||
record_show_path={fn record -> ~p"/collection/#{record}" end}
|
||||
record_edit_path={fn record -> ~p"/collection/#{record}/edit" end}
|
||||
/>
|
||||
|
||||
<.structured_modal
|
||||
:if={@live_action == :edit}
|
||||
id="record-modal"
|
||||
on_close={JS.patch(back_path(@record_list_params))}
|
||||
>
|
||||
<.live_component
|
||||
module={MusicLibraryWeb.RecordFormComponent}
|
||||
id={@record.id}
|
||||
action={@live_action}
|
||||
show_purchased_at={true}
|
||||
record={@record}
|
||||
patch={back_path(@record_list_params)}
|
||||
<.record_list
|
||||
records={@streams.records}
|
||||
record_show_path={fn record -> ~p"/collection/#{record}" end}
|
||||
record_edit_path={fn record -> ~p"/collection/#{record}/edit" end}
|
||||
/>
|
||||
</.structured_modal>
|
||||
|
||||
<.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>
|
||||
<.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
|
||||
: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>
|
||||
<.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} />
|
||||
<.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>
|
||||
|
||||
@@ -1,356 +1,360 @@
|
||||
<div class="md:flex mt-4 px-4 md:gap-x-4">
|
||||
<div class="drop-shadow-sm md:max-w-[38rem]">
|
||||
<.record_cover
|
||||
record={@record}
|
||||
class="w-full rounded-lg drop-shadow-sm"
|
||||
/>
|
||||
</div>
|
||||
<Layouts.app flash={@flash} current_section={@current_section} socket={@socket}>
|
||||
<div class="md:flex mt-4 px-4 md:gap-x-4">
|
||||
<div class="drop-shadow-sm md:max-w-[38rem]">
|
||||
<.record_cover
|
||||
record={@record}
|
||||
class="w-full rounded-lg drop-shadow-sm"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="grow">
|
||||
<div class="mt-4 md:mt-0 flex justify-between">
|
||||
<div>
|
||||
<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="mt-2 flex items-center text-sm text-zinc-500 dark:text-zinc-400">
|
||||
<.record_colors record={@record} />
|
||||
<span class="ml-1">
|
||||
{Records.Record.format_release_date(@record.release_date)} · {format_label(
|
||||
@record.format
|
||||
)} · {type_label(@record.type)}
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="min-w-12 text-right">
|
||||
<button
|
||||
class="text-xs md:text-sm text-zinc-700 dark:text-zinc-300"
|
||||
phx-click={MusicLibraryWeb.NotesComponent.open("record-notes-sheet")}
|
||||
>
|
||||
<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>
|
||||
<div class="grow">
|
||||
<div class="mt-4 md:mt-0 flex justify-between">
|
||||
<div>
|
||||
<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="mt-2 flex items-center text-sm text-zinc-500 dark:text-zinc-400">
|
||||
<.record_colors record={@record} />
|
||||
<span class="ml-1">
|
||||
{Records.Record.format_release_date(@record.release_date)} · {format_label(
|
||||
@record.format
|
||||
)} · {type_label(@record.type)}
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="min-w-12 text-right">
|
||||
<button
|
||||
class="text-xs md:text-sm text-zinc-700 dark:text-zinc-300"
|
||||
phx-click={MusicLibraryWeb.NotesComponent.open("record-notes-sheet")}
|
||||
>
|
||||
<span class="sr-only">{gettext("Open Notes")}</span>
|
||||
<.icon
|
||||
name="hero-ellipsis-vertical"
|
||||
class="-mt-1 h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer"
|
||||
name="hero-pencil-square"
|
||||
class="-mt-1 h-5 w-5"
|
||||
aria-hidden="true"
|
||||
data-slot="icon"
|
||||
/>
|
||||
</:toggle>
|
||||
<.focus_wrap id={"actions-#{@record.id}-focus-wrap"}>
|
||||
<.dropdown_link
|
||||
id={"actions-#{@record.id}-edit"}
|
||||
patch={~p"/collection/#{@record}/show/edit"}
|
||||
>
|
||||
</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
|
||||
name="hero-pencil-square"
|
||||
class="h-4 w-4 mr-1 phx-click-loading:animate-bounce"
|
||||
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"
|
||||
/>
|
||||
{gettext("Edit")}
|
||||
</.dropdown_link>
|
||||
</:toggle>
|
||||
<.focus_wrap id={"actions-#{@record.id}-focus-wrap"}>
|
||||
<.dropdown_link
|
||||
id={"actions-#{@record.id}-edit"}
|
||||
patch={~p"/collection/#{@record}/show/edit"}
|
||||
>
|
||||
<.icon
|
||||
name="hero-pencil-square"
|
||||
class="h-4 w-4 mr-1 phx-click-loading:animate-bounce"
|
||||
aria-hidden="true"
|
||||
data-slot="icon"
|
||||
/>
|
||||
{gettext("Edit")}
|
||||
</.dropdown_link>
|
||||
|
||||
<.dropdown_link
|
||||
id={"actions-#{@record.id}-refresh-cover"}
|
||||
phx-click={JS.push("refresh_cover", value: %{id: @record.id})}
|
||||
>
|
||||
<.icon
|
||||
name="hero-photo"
|
||||
class="h-4 w-4 mr-1 phx-click-loading:animate-bounce"
|
||||
aria-hidden="true"
|
||||
data-slot="icon"
|
||||
/>
|
||||
{gettext("Refresh cover")}
|
||||
</.dropdown_link>
|
||||
<.dropdown_link
|
||||
id={"actions-#{@record.id}-refresh-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}-refresh-mb-data"}
|
||||
phx-click={JS.push("refresh_musicbrainz_data", value: %{id: @record.id})}
|
||||
>
|
||||
<.icon
|
||||
name="hero-arrow-path"
|
||||
class="h-4 w-4 mr-1 phx-click-loading:animate-spin"
|
||||
aria-hidden="true"
|
||||
data-slot="icon"
|
||||
/>
|
||||
{gettext("Refresh MB data")}
|
||||
</.dropdown_link>
|
||||
|
||||
<.dropdown_link
|
||||
id={"actions-#{@record.id}-populate-genres"}
|
||||
phx-click={JS.push("populate_genres", value: %{id: @record.id})}
|
||||
>
|
||||
<.icon
|
||||
name="hero-sparkles"
|
||||
class="h-4 w-4 mr-1 phx-click-loading:animate-shake"
|
||||
aria-hidden="true"
|
||||
data-slot="icon"
|
||||
/>
|
||||
{gettext("Populate genres")}
|
||||
</.dropdown_link>
|
||||
<.dropdown_link
|
||||
id={"actions-#{@record.id}-populate-genres"}
|
||||
phx-click={JS.push("populate_genres", value: %{id: @record.id})}
|
||||
>
|
||||
<.icon
|
||||
name="hero-sparkles"
|
||||
class="h-4 w-4 mr-1 phx-click-loading:animate-shake"
|
||||
aria-hidden="true"
|
||||
data-slot="icon"
|
||||
/>
|
||||
{gettext("Populate genres")}
|
||||
</.dropdown_link>
|
||||
|
||||
<.dropdown_link
|
||||
id={"actions-#{@record.id}-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-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_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"
|
||||
<.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">
|
||||
<%!-- 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")}
|
||||
</.dropdown_link>
|
||||
</.focus_wrap>
|
||||
</.dropdown>
|
||||
<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 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>
|
||||
|
||||
<.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
|
||||
module={MusicLibraryWeb.RecordFormComponent}
|
||||
id={@record.id}
|
||||
action={@live_action}
|
||||
show_purchased_at={true}
|
||||
id="release-with-tracks"
|
||||
sheet_id="release-with-tracks-sheet"
|
||||
module={MusicLibraryWeb.ReleaseComponent}
|
||||
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>
|
||||
|
||||
@@ -1,106 +1,108 @@
|
||||
<header class="mb-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold text-zinc-900 dark:text-zinc-100">
|
||||
{gettext("Online Store Templates")}
|
||||
</h1>
|
||||
<Layouts.app flash={@flash} current_section={@current_section} socket={@socket}>
|
||||
<header class="mb-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold text-zinc-900 dark:text-zinc-100">
|
||||
{gettext("Online Store Templates")}
|
||||
</h1>
|
||||
</div>
|
||||
<div>
|
||||
<.button variant="solid" size="sm" patch={~p"/online-store-templates/new"}>
|
||||
<.icon name="hero-plus" class="icon" aria-hidden="true" data-slot="icon" />
|
||||
{gettext("New Template")}
|
||||
</.button>
|
||||
</div>
|
||||
</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>
|
||||
</header>
|
||||
</header>
|
||||
|
||||
<div class="mt-6 space-y-4">
|
||||
<ul
|
||||
role="list"
|
||||
class="divide-y divide-gray-200 dark:divide-gray-800"
|
||||
phx-update="stream"
|
||||
id="templates"
|
||||
>
|
||||
<li
|
||||
:for={{id, template} <- @streams.templates}
|
||||
id={id}
|
||||
class="flex items-center justify-between py-5"
|
||||
<div class="mt-6 space-y-4">
|
||||
<ul
|
||||
role="list"
|
||||
class="divide-y divide-gray-200 dark:divide-gray-800"
|
||||
phx-update="stream"
|
||||
id="templates"
|
||||
>
|
||||
<div class="min-w-0">
|
||||
<div class="flex items-center gap-x-2">
|
||||
<img
|
||||
src={MusicLibrary.OnlineStoreTemplates.favicon_url(template)}
|
||||
alt={template.name}
|
||||
/>
|
||||
<p class="text-sm font-semibold text-gray-900 dark:text-white">
|
||||
{template.name}
|
||||
<li
|
||||
:for={{id, template} <- @streams.templates}
|
||||
id={id}
|
||||
class="flex items-center justify-between py-5"
|
||||
>
|
||||
<div class="min-w-0">
|
||||
<div class="flex items-center gap-x-2">
|
||||
<img
|
||||
src={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>
|
||||
<.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 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>
|
||||
<p :if={template.description} class="mt-1 text-xs text-gray-500 dark:text-gray-400">
|
||||
{template.description}
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<.dropdown id={"actions-#{template.id}"} placement="bottom-end">
|
||||
<:toggle>
|
||||
<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>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<.structured_modal
|
||||
:if={@live_action in [:new, :edit]}
|
||||
id="template-modal"
|
||||
on_close={JS.patch(~p"/online-store-templates")}
|
||||
>
|
||||
<.live_component
|
||||
module={MusicLibraryWeb.OnlineStoreTemplateLive.FormComponent}
|
||||
id={@template.id || :new}
|
||||
title={@page_title}
|
||||
action={@live_action}
|
||||
template={@template}
|
||||
patch={~p"/online-store-templates"}
|
||||
/>
|
||||
</.structured_modal>
|
||||
<.structured_modal
|
||||
:if={@live_action in [:new, :edit]}
|
||||
id="template-modal"
|
||||
on_close={JS.patch(~p"/online-store-templates")}
|
||||
>
|
||||
<.live_component
|
||||
module={MusicLibraryWeb.OnlineStoreTemplateLive.FormComponent}
|
||||
id={@template.id || :new}
|
||||
title={@page_title}
|
||||
action={@live_action}
|
||||
template={@template}
|
||||
patch={~p"/online-store-templates"}
|
||||
/>
|
||||
</.structured_modal>
|
||||
</Layouts.app>
|
||||
|
||||
@@ -1,115 +1,117 @@
|
||||
<header class="mb-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold text-zinc-900 dark:text-zinc-100">
|
||||
{gettext("Scrobble Rules")}
|
||||
</h1>
|
||||
</div>
|
||||
<div>
|
||||
<.button_group>
|
||||
<.button
|
||||
variant="solid"
|
||||
size="sm"
|
||||
patch={~p"/scrobble-rules/new"}
|
||||
>
|
||||
<.icon name="hero-plus" class="icon" aria-hidden="true" data-slot="icon" />
|
||||
{gettext("New Rule")}
|
||||
</.button>
|
||||
<.button
|
||||
variant="solid"
|
||||
size="sm"
|
||||
phx-click="apply_all_rules"
|
||||
>
|
||||
<.icon name="hero-play" class="icon" />
|
||||
{gettext("Apply All")}
|
||||
</.button>
|
||||
</.button_group>
|
||||
<Layouts.app flash={@flash} current_section={@current_section} socket={@socket}>
|
||||
<header class="mb-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold text-zinc-900 dark:text-zinc-100">
|
||||
{gettext("Scrobble Rules")}
|
||||
</h1>
|
||||
</div>
|
||||
<div>
|
||||
<.button_group>
|
||||
<.button
|
||||
variant="solid"
|
||||
size="sm"
|
||||
patch={~p"/scrobble-rules/new"}
|
||||
>
|
||||
<.icon name="hero-plus" class="icon" aria-hidden="true" data-slot="icon" />
|
||||
{gettext("New Rule")}
|
||||
</.button>
|
||||
<.button
|
||||
variant="solid"
|
||||
size="sm"
|
||||
phx-click="apply_all_rules"
|
||||
>
|
||||
<.icon name="hero-play" class="icon" />
|
||||
{gettext("Apply All")}
|
||||
</.button>
|
||||
</.button_group>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="mt-6 space-y-4">
|
||||
<ul phx-update="stream" id="scrobble-rules-list" class="space-y-4">
|
||||
<li
|
||||
: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>
|
||||
</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>
|
||||
|
||||
<.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>
|
||||
<.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>
|
||||
</Layouts.app>
|
||||
|
||||
@@ -1,160 +1,162 @@
|
||||
<div>
|
||||
<header class="gap-6">
|
||||
<div class="mb-2 mt-2">
|
||||
<.search_form query={@track_list_params.query} />
|
||||
</div>
|
||||
</header>
|
||||
<Layouts.app flash={@flash} current_section={@current_section} socket={@socket}>
|
||||
<div>
|
||||
<header class="gap-6">
|
||||
<div class="mb-2 mt-2">
|
||||
<.search_form query={@track_list_params.query} />
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="flex items-end gap-6 mt-8 justify-center sm:justify-start">
|
||||
<.button_group>
|
||||
<.button
|
||||
patch={order_path(@track_list_params, :scrobbled_at)}
|
||||
size="xs"
|
||||
class={[
|
||||
@track_list_params.order == :scrobbled_at && "!bg-zinc-100 dark:!bg-zinc-700"
|
||||
]}
|
||||
>
|
||||
<.icon
|
||||
name="hero-clock-solid"
|
||||
class="icon"
|
||||
aria-hidden="true"
|
||||
data-slot="icon"
|
||||
/>
|
||||
{gettext("Scrobbled")}
|
||||
</.button>
|
||||
<.button
|
||||
patch={order_path(@track_list_params, :title)}
|
||||
size="xs"
|
||||
class={[
|
||||
@track_list_params.order == :title && "!bg-zinc-100 dark:!bg-zinc-700"
|
||||
]}
|
||||
>
|
||||
<.icon name="hero-musical-note-solid" class="icon" aria-hidden="true" data-slot="icon" />
|
||||
{gettext("Title")}
|
||||
</.button>
|
||||
<.button
|
||||
patch={order_path(@track_list_params, :artist)}
|
||||
size="xs"
|
||||
class={[
|
||||
@track_list_params.order == :artist && "!bg-zinc-100 dark:!bg-zinc-700"
|
||||
]}
|
||||
>
|
||||
<.icon name="hero-user-solid" class="icon" aria-hidden="true" data-slot="icon" />
|
||||
{gettext("Artist")}
|
||||
</.button>
|
||||
<.button
|
||||
patch={order_path(@track_list_params, :album)}
|
||||
size="xs"
|
||||
class={[
|
||||
@track_list_params.order == :album && "!bg-zinc-100 dark:!bg-zinc-700"
|
||||
]}
|
||||
>
|
||||
<.icon name="hero-musical-note-solid" class="icon" aria-hidden="true" data-slot="icon" />
|
||||
{gettext("Album")}
|
||||
</.button>
|
||||
</.button_group>
|
||||
</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 class="flex items-end gap-6 mt-8 justify-center sm:justify-start">
|
||||
<.button_group>
|
||||
<.button
|
||||
patch={order_path(@track_list_params, :scrobbled_at)}
|
||||
size="xs"
|
||||
class={[
|
||||
@track_list_params.order == :scrobbled_at && "!bg-zinc-100 dark:!bg-zinc-700"
|
||||
]}
|
||||
>
|
||||
<.icon
|
||||
name="hero-clock-solid"
|
||||
class="icon"
|
||||
aria-hidden="true"
|
||||
data-slot="icon"
|
||||
/>
|
||||
</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" />
|
||||
{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>
|
||||
<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 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 class="flex items-center">
|
||||
<.dropdown id={"actions-#{track.scrobbled_at_uts}"} 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_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>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="flex items-center">
|
||||
<.dropdown id={"actions-#{track.scrobbled_at_uts}"} 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_link patch={~p"/scrobbled-tracks/#{track.scrobbled_at_uts}/edit"}>
|
||||
{gettext("Edit")}
|
||||
</.dropdown_link>
|
||||
<.dropdown_button
|
||||
phx-click={
|
||||
JS.push("delete", value: %{"scrobbled-at-uts": track.scrobbled_at_uts})
|
||||
|> JS.hide(to: "##{id}")
|
||||
}
|
||||
data-confirm={gettext("Are you sure?")}
|
||||
class={[
|
||||
"text-red-900! hover:bg-red-50! dark:text-red-500! dark:hover:bg-red-900/30! dark:hover:text-red-600!"
|
||||
]}
|
||||
>
|
||||
{gettext("Delete")}
|
||||
</.dropdown_button>
|
||||
</.dropdown>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<.pagination id={:bottom_pagination} pagination_params={@track_list_params} />
|
||||
</div>
|
||||
|
||||
<.pagination id={:bottom_pagination} pagination_params={@track_list_params} />
|
||||
</div>
|
||||
|
||||
<.structured_modal
|
||||
:if={@live_action == :edit}
|
||||
id="track-modal"
|
||||
on_close={JS.patch(back_path(@track_list_params))}
|
||||
>
|
||||
<.live_component
|
||||
module={MusicLibraryWeb.ScrobbledTracksLive.FormComponent}
|
||||
id={@track.scrobbled_at_uts}
|
||||
action={@live_action}
|
||||
track={@track}
|
||||
patch={back_path(@track_list_params)}
|
||||
/>
|
||||
</.structured_modal>
|
||||
<.structured_modal
|
||||
:if={@live_action == :edit}
|
||||
id="track-modal"
|
||||
on_close={JS.patch(back_path(@track_list_params))}
|
||||
>
|
||||
<.live_component
|
||||
module={MusicLibraryWeb.ScrobbledTracksLive.FormComponent}
|
||||
id={@track.scrobbled_at_uts}
|
||||
action={@live_action}
|
||||
track={@track}
|
||||
patch={back_path(@track_list_params)}
|
||||
/>
|
||||
</.structured_modal>
|
||||
</Layouts.app>
|
||||
|
||||
@@ -1,125 +1,311 @@
|
||||
<div>
|
||||
<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">
|
||||
<Layouts.app flash={@flash} current_section={@current_section} socket={@socket}>
|
||||
<div>
|
||||
<h1 class="mt-5 text-base lg:text-2xl text-zinc-900 dark:text-zinc-200 font-semibold">
|
||||
{gettext("Formats")}
|
||||
{gettext("Records")}
|
||||
</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}
|
||||
/>
|
||||
<%!-- 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>
|
||||
<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>
|
||||
<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 class="mt-5 grid grid-cols-1 lg:grid-cols-2 gap-5">
|
||||
<TopArtists.live id="top-artists" timezone={@timezone} last_updated_uts={@last_updated_uts} />
|
||||
<TopAlbums.live id="top-albums" timezone={@timezone} last_updated_uts={@last_updated_uts} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="mt-5 grid grid-cols-1 lg:grid-cols-2 gap-5">
|
||||
<TopArtists.live id="top-artists" timezone={@timezone} last_updated_uts={@last_updated_uts} />
|
||||
<TopAlbums.live id="top-albums" timezone={@timezone} last_updated_uts={@last_updated_uts} />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flow-root">
|
||||
<div class="mt-5 flex justify-between items-center">
|
||||
<h1 class="text-base lg:text-2xl text-zinc-900 dark:text-zinc-200 font-semibold">
|
||||
{gettext("Scrobble activity")}
|
||||
</h1>
|
||||
<.refresh_lastfm_feed_button />
|
||||
</div>
|
||||
<.tabs id="scrobble-activity" class="mt-4">
|
||||
<.tabs_list active_tab={@scrobble_activity_mode} variant="segmented" class="w-48">
|
||||
<:tab
|
||||
name="albums"
|
||||
phx-click={JS.push("set_scrobble_activity_mode", value: %{mode: "albums"})}
|
||||
>
|
||||
{gettext("Albums")}
|
||||
</:tab>
|
||||
<:tab
|
||||
name="tracks"
|
||||
phx-click={JS.push("set_scrobble_activity_mode", value: %{mode: "tracks"})}
|
||||
>
|
||||
{gettext("Tracks")}
|
||||
</:tab>
|
||||
</.tabs_list>
|
||||
|
||||
<div class="flow-root">
|
||||
<div class="mt-5 flex justify-between items-center">
|
||||
<h1 class="text-base lg:text-2xl text-zinc-900 dark:text-zinc-200 font-semibold">
|
||||
{gettext("Scrobble activity")}
|
||||
</h1>
|
||||
<.refresh_lastfm_feed_button />
|
||||
</div>
|
||||
<.tabs id="scrobble-activity" class="mt-4">
|
||||
<.tabs_list active_tab={@scrobble_activity_mode} variant="segmented" class="w-48">
|
||||
<:tab
|
||||
name="albums"
|
||||
phx-click={JS.push("set_scrobble_activity_mode", value: %{mode: "albums"})}
|
||||
>
|
||||
{gettext("Albums")}
|
||||
</:tab>
|
||||
<:tab
|
||||
name="tracks"
|
||||
phx-click={JS.push("set_scrobble_activity_mode", value: %{mode: "tracks"})}
|
||||
>
|
||||
{gettext("Tracks")}
|
||||
</:tab>
|
||||
</.tabs_list>
|
||||
<.tabs_panel name="albums" active={@scrobble_activity_mode == "albums"}>
|
||||
<ul
|
||||
id="scrobble-activity-albums"
|
||||
role="list"
|
||||
class="mt-5 p-6 bg-white dark:bg-zinc-800 rounded-md shadow-sm"
|
||||
phx-update="stream"
|
||||
>
|
||||
<li :for={{id, album} <- @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
|
||||
: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"}>
|
||||
<ul
|
||||
id="scrobble-activity-albums"
|
||||
role="list"
|
||||
class="mt-5 p-6 bg-white dark:bg-zinc-800 rounded-md shadow-sm"
|
||||
phx-update="stream"
|
||||
>
|
||||
<li :for={{id, album} <- @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>
|
||||
<div class="flex gap-1 flex-col text-right">
|
||||
<.badge :if={album.metadata.musicbrainz_id == ""}>
|
||||
{gettext("No MB ID")}
|
||||
</.badge>
|
||||
<.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}"}
|
||||
:if={
|
||||
record_id =
|
||||
tracked_record?(@collected_releases, album.metadata.musicbrainz_id)
|
||||
}
|
||||
navigate={~p"/collection/#{record_id}"}
|
||||
>
|
||||
{album.artist.name}
|
||||
<.badge color="success">
|
||||
{gettext("Collected")}
|
||||
</.badge>
|
||||
</.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"
|
||||
<.link
|
||||
:if={
|
||||
record_id =
|
||||
tracked_record?(@wishlisted_releases, album.metadata.musicbrainz_id)
|
||||
}
|
||||
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>
|
||||
<.icon
|
||||
name="hero-information-circle"
|
||||
@@ -130,16 +316,43 @@
|
||||
<:content>
|
||||
<dl class="p-2">
|
||||
<div class="flex gap-2 w-full">
|
||||
<dt>{gettext("Album ID:")}</dt>
|
||||
<dt>{gettext("Track ID:")}</dt>
|
||||
<dd class="font-mono">
|
||||
<code id={"tooltip-album-#{album.scrobbled_at_uts}"}>
|
||||
{album.metadata.musicbrainz_id || gettext("Unknown")}
|
||||
<code id={"tooltip-track-#{track.scrobbled_at_uts}"}>
|
||||
{track.musicbrainz_id || gettext("Unknown")}
|
||||
</code>
|
||||
<button
|
||||
:if={album.metadata.musicbrainz_id not in ["", nil]}
|
||||
:if={track.musicbrainz_id not in ["", nil]}
|
||||
phx-click={
|
||||
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")
|
||||
}
|
||||
@@ -159,14 +372,14 @@
|
||||
<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 id={"tooltip-track-artist-#{track.scrobbled_at_uts}"}>
|
||||
{track.artist.musicbrainz_id || gettext("Unknown")}
|
||||
</code>
|
||||
<button
|
||||
:if={album.artist.musicbrainz_id not in ["", nil]}
|
||||
:if={track.artist.musicbrainz_id not in ["", nil]}
|
||||
phx-click={
|
||||
JS.dispatch("music_library:clipcopy",
|
||||
to: "#tooltip-artist-#{album.scrobbled_at_uts}"
|
||||
to: "#tooltip-track-artist-#{track.scrobbled_at_uts}"
|
||||
)
|
||||
|> JS.transition("animate-shake")
|
||||
}
|
||||
@@ -186,359 +399,151 @@
|
||||
</dl>
|
||||
</:content>
|
||||
</.tooltip>
|
||||
</time>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-1 flex-col text-right">
|
||||
<.badge :if={album.metadata.musicbrainz_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")}
|
||||
<div class="flex gap-1 flex-col text-right">
|
||||
<.badge :if={track.album.musicbrainz_id == ""}>
|
||||
{gettext("No MB ID")}
|
||||
</.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
|
||||
: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}"}
|
||||
:if={
|
||||
record_id = tracked_record?(@collected_releases, track.album.musicbrainz_id)
|
||||
}
|
||||
navigate={~p"/collection/#{record_id}"}
|
||||
>
|
||||
{track.artist.name}
|
||||
<.badge color="success">{gettext("Collected")}</.badge>
|
||||
</.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"
|
||||
<.link
|
||||
:if={
|
||||
record_id =
|
||||
tracked_record?(@wishlisted_releases, track.album.musicbrainz_id)
|
||||
}
|
||||
navigate={~p"/wishlist/#{record_id}"}
|
||||
>
|
||||
{track.scrobbled_at_label}
|
||||
</time>
|
||||
<.tooltip>
|
||||
<.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-information-circle"
|
||||
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"
|
||||
/>
|
||||
<:content>
|
||||
<dl class="p-2">
|
||||
<div class="flex gap-2 w-full">
|
||||
<dt>{gettext("Track ID:")}</dt>
|
||||
<dd class="font-mono">
|
||||
<code id={"tooltip-track-#{track.scrobbled_at_uts}"}>
|
||||
{track.musicbrainz_id || gettext("Unknown")}
|
||||
</code>
|
||||
<button
|
||||
:if={track.musicbrainz_id not in ["", nil]}
|
||||
phx-click={
|
||||
JS.dispatch("music_library:clipcopy",
|
||||
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")
|
||||
}
|
||||
>
|
||||
<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>
|
||||
</: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 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>
|
||||
</li>
|
||||
</ul>
|
||||
</.tabs_panel>
|
||||
</.tabs>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</.tabs_panel>
|
||||
</.tabs>
|
||||
</div>
|
||||
|
||||
<div class="mt-5 grid grid-cols-1 lg:grid-cols-11 gap-4">
|
||||
<div class="lg:col-span-3">
|
||||
<div class="flex justify-between items-center">
|
||||
<div class="mt-5 grid grid-cols-1 lg:grid-cols-11 gap-4">
|
||||
<div class="lg:col-span-3">
|
||||
<div class="flex justify-between items-center">
|
||||
<h1 class="text-base lg:text-2xl text-zinc-900 dark:text-zinc-200 font-semibold">
|
||||
{gettext("On This day")}
|
||||
</h1>
|
||||
<.form
|
||||
:let={f}
|
||||
for={to_form(%{"current_date" => @current_date})}
|
||||
phx-change="set_current_date"
|
||||
>
|
||||
<.date_picker size="xs" field={f[:current_date]}>
|
||||
<:outer_suffix>
|
||||
<.button
|
||||
size="xs"
|
||||
type="button"
|
||||
phx-click={
|
||||
JS.push("set_current_date", value: %{"current_date" => Date.utc_today()})
|
||||
}
|
||||
>
|
||||
Today
|
||||
</.button>
|
||||
</:outer_suffix>
|
||||
</.date_picker>
|
||||
</.form>
|
||||
</div>
|
||||
<div class="bg-white dark:bg-zinc-800 rounded-md shadow-sm">
|
||||
<.records_on_this_day
|
||||
current_date={@current_date}
|
||||
records={@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("On This day")}
|
||||
{gettext("Top %{n} Artists", %{n: length(@records_by_artist)})}
|
||||
</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 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="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">
|
||||
<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)})}
|
||||
</h1>
|
||||
<div class="mt-5 bg-white dark:bg-zinc-800 rounded-md shadow-sm">
|
||||
<.vertical_bar_chart
|
||||
data={@records_by_genre}
|
||||
width={600}
|
||||
height={26 * length(@records_by_genre)}
|
||||
color_class="fill-zinc-500"
|
||||
label_fn={fn {genre, _count} -> genre end}
|
||||
value_fn={fn {_genre, count} -> count end}
|
||||
label_click={
|
||||
fn {genre, _count} -> JS.navigate(~p"/collection?#{%{query: ~s(genre:"#{genre}")}}") end
|
||||
}
|
||||
class="w-full"
|
||||
/>
|
||||
<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} Genres", %{n: length(@records_by_genre)})}
|
||||
</h1>
|
||||
<div class="mt-5 bg-white dark:bg-zinc-800 rounded-md shadow-sm">
|
||||
<.vertical_bar_chart
|
||||
data={@records_by_genre}
|
||||
width={600}
|
||||
height={26 * length(@records_by_genre)}
|
||||
color_class="fill-zinc-500"
|
||||
label_fn={fn {genre, _count} -> genre end}
|
||||
value_fn={fn {_genre, count} -> count end}
|
||||
label_click={
|
||||
fn {genre, _count} ->
|
||||
JS.navigate(~p"/collection?#{%{query: ~s(genre:"#{genre}")}}")
|
||||
end
|
||||
}
|
||||
class="w-full"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Layouts.app>
|
||||
|
||||
@@ -1,83 +1,85 @@
|
||||
<div>
|
||||
<header class="gap-6 mb-2">
|
||||
<div class="flex items-center justify-between gap-6 mb-2 mt-2">
|
||||
<.search_form query={@record_list_params.query} />
|
||||
<.button
|
||||
variant="solid"
|
||||
size="sm"
|
||||
patch={~p"/wishlist/import"}
|
||||
>
|
||||
<.icon name="hero-plus" class="icon" aria-hidden="true" data-slot="icon" />
|
||||
{gettext("Add")}
|
||||
</.button>
|
||||
<Layouts.app flash={@flash} current_section={@current_section} socket={@socket}>
|
||||
<div>
|
||||
<header class="gap-6 mb-2">
|
||||
<div class="flex items-center justify-between gap-6 mb-2 mt-2">
|
||||
<.search_form query={@record_list_params.query} />
|
||||
<.button
|
||||
variant="solid"
|
||||
size="sm"
|
||||
patch={~p"/wishlist/import"}
|
||||
>
|
||||
<.icon name="hero-plus" class="icon" aria-hidden="true" data-slot="icon" />
|
||||
{gettext("Add")}
|
||||
</.button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="flex items-end justify-between gap-6 mt-8">
|
||||
<.button_group>
|
||||
<.button
|
||||
patch={order_path(@record_list_params, :insertion)}
|
||||
size="sm"
|
||||
class={[
|
||||
"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>
|
||||
</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>
|
||||
|
||||
<.record_list
|
||||
current_date={@current_date}
|
||||
records={@streams.records}
|
||||
record_show_path={fn record -> ~p"/wishlist/#{record}" end}
|
||||
record_edit_path={fn record -> ~p"/wishlist/#{record}/edit" end}
|
||||
/>
|
||||
|
||||
<.structured_modal
|
||||
:if={@live_action == :edit}
|
||||
id="record-modal"
|
||||
on_close={JS.patch(back_path(@record_list_params))}
|
||||
>
|
||||
<.live_component
|
||||
module={MusicLibraryWeb.RecordFormComponent}
|
||||
id={@record.id}
|
||||
action={@live_action}
|
||||
show_purchased_at={false}
|
||||
record={@record}
|
||||
patch={back_path(@record_list_params)}
|
||||
<.record_list
|
||||
current_date={@current_date}
|
||||
records={@streams.records}
|
||||
record_show_path={fn record -> ~p"/wishlist/#{record}" end}
|
||||
record_edit_path={fn record -> ~p"/wishlist/#{record}/edit" end}
|
||||
/>
|
||||
</.structured_modal>
|
||||
|
||||
<.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>
|
||||
<.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>
|
||||
|
||||
<.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>
|
||||
|
||||
@@ -1,317 +1,321 @@
|
||||
<div class="md:flex mt-4 px-4 md:gap-x-4">
|
||||
<div class="drop-shadow-sm md:max-w-[38rem]">
|
||||
<.record_cover
|
||||
record={@record}
|
||||
class="w-full rounded-lg drop-shadow-sm"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="grow">
|
||||
<div class="mt-4 md:mt-0 flex justify-between">
|
||||
<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>
|
||||
<Layouts.app flash={@flash} current_section={@current_section} socket={@socket}>
|
||||
<div class="md:flex mt-4 px-4 md:gap-x-4">
|
||||
<div class="drop-shadow-sm md:max-w-[38rem]">
|
||||
<.record_cover
|
||||
record={@record}
|
||||
class="w-full rounded-lg drop-shadow-sm"
|
||||
/>
|
||||
</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")}
|
||||
<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>
|
||||
|
||||
<.release_summary
|
||||
:if={@record.selected_release_id}
|
||||
release={Records.Record.selected_release(@record)}
|
||||
· {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"
|
||||
/>
|
||||
</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>
|
||||
</: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 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 :if={@online_store_templates != []} class="mt-4">
|
||||
<details class="px-4 text-zinc-700 hover:text-zinc-500 dark:text-zinc-400 dark:hover:text-zinc-300">
|
||||
<summary class="text-xs sm:text-sm font-medium cursor-pointer">
|
||||
{gettext("Check Online Stores")}
|
||||
</summary>
|
||||
<div class="mt-4 space-y-2">
|
||||
<.button
|
||||
:for={template <- @online_store_templates}
|
||||
href={OnlineStoreTemplates.generate_url(template, @record)}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
class="ml-2"
|
||||
>
|
||||
<img
|
||||
class="mr-2"
|
||||
src={MusicLibrary.OnlineStoreTemplates.favicon_url(template)}
|
||||
alt={template.name}
|
||||
loading="lazy"
|
||||
/>
|
||||
<span class="text-sm font-medium text-zinc-900 dark:text-white">
|
||||
{template.name}
|
||||
</span>
|
||||
</.button>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
<div :if={@online_store_templates != []} class="mt-4">
|
||||
<details class="px-4 text-zinc-700 hover:text-zinc-500 dark:text-zinc-400 dark:hover:text-zinc-300">
|
||||
<summary class="text-xs sm:text-sm font-medium cursor-pointer">
|
||||
{gettext("Check Online Stores")}
|
||||
</summary>
|
||||
<div class="mt-4 space-y-2">
|
||||
<.button
|
||||
:for={template <- @online_store_templates}
|
||||
href={OnlineStoreTemplates.generate_url(template, @record)}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
class="ml-2"
|
||||
>
|
||||
<img
|
||||
class="mr-2"
|
||||
src={MusicLibrary.OnlineStoreTemplates.favicon_url(template)}
|
||||
alt={template.name}
|
||||
loading="lazy"
|
||||
/>
|
||||
<span class="text-sm font-medium text-zinc-900 dark:text-white">
|
||||
{template.name}
|
||||
</span>
|
||||
</.button>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
|
||||
<.json_viewer title={gettext("MusicBrainz data")} data={@record.musicbrainz_data} />
|
||||
<.json_viewer title={gettext("MusicBrainz data")} data={@record.musicbrainz_data} />
|
||||
|
||||
<.structured_modal
|
||||
:if={@live_action == :edit}
|
||||
id="record-modal"
|
||||
on_close={JS.patch(~p"/wishlist/#{@record}")}
|
||||
>
|
||||
<.live_component
|
||||
module={MusicLibraryWeb.RecordFormComponent}
|
||||
id={@record.id}
|
||||
action={@live_action}
|
||||
show_purchased_at={false}
|
||||
record={@record}
|
||||
patch={~p"/wishlist/#{@record}"}
|
||||
/>
|
||||
</.structured_modal>
|
||||
<.structured_modal
|
||||
:if={@live_action == :edit}
|
||||
id="record-modal"
|
||||
on_close={JS.patch(~p"/wishlist/#{@record}")}
|
||||
>
|
||||
<.live_component
|
||||
module={MusicLibraryWeb.RecordFormComponent}
|
||||
id={@record.id}
|
||||
action={@live_action}
|
||||
show_purchased_at={false}
|
||||
record={@record}
|
||||
patch={~p"/wishlist/#{@record}"}
|
||||
/>
|
||||
</.structured_modal>
|
||||
</Layouts.app>
|
||||
|
||||
Reference in New Issue
Block a user