Extract some reused components
This commit is contained in:
Claudio Ortolina
@@ -186,6 +186,37 @@ defmodule MusicLibraryWeb.CoreComponents do
|
||||
"https://www.google.com/s2/favicons?domain=#{uri.host}&sz=16"
|
||||
end
|
||||
|
||||
attr :target_id, :string, required: true
|
||||
attr :label, :string, required: true
|
||||
|
||||
def copy_to_clipboard(assigns) do
|
||||
~H"""
|
||||
<button phx-click={
|
||||
JS.dispatch("music_library:clipcopy", to: "#" <> @target_id)
|
||||
|> JS.transition("animate-shake")
|
||||
}>
|
||||
<span class="sr-only">{@label}</span>
|
||||
<.icon name="hero-clipboard-document" class="-mt-1 h-5 w-5" aria-hidden="true" data-slot="icon" />
|
||||
</button>
|
||||
"""
|
||||
end
|
||||
|
||||
attr :label, :string, required: true
|
||||
slot :inner_block, required: true
|
||||
|
||||
def dl_row(assigns) do
|
||||
~H"""
|
||||
<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">
|
||||
{@label}
|
||||
</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">
|
||||
{render_slot(@inner_block)}
|
||||
</dd>
|
||||
</div>
|
||||
"""
|
||||
end
|
||||
|
||||
## JS Commands
|
||||
|
||||
def show(js \\ %JS{}, selector) do
|
||||
|
||||
@@ -4,9 +4,12 @@ defmodule MusicLibraryWeb.ScrobbleComponents do
|
||||
"""
|
||||
|
||||
alias LastFm.Track
|
||||
alias MusicLibrary.Records
|
||||
|
||||
use MusicLibraryWeb, :html
|
||||
|
||||
import MusicLibraryWeb.RecordComponents, only: [format_label: 1]
|
||||
|
||||
def refresh_lastfm_feed_button(assigns) do
|
||||
~H"""
|
||||
<button
|
||||
@@ -44,25 +47,11 @@ defmodule MusicLibraryWeb.ScrobbleComponents do
|
||||
<code id={"tooltip-track-#{@track.scrobbled_at_uts}"}>
|
||||
{@track.musicbrainz_id || gettext("Unknown")}
|
||||
</code>
|
||||
<button
|
||||
<.copy_to_clipboard
|
||||
: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="h-5 w-5"
|
||||
aria-hidden="true"
|
||||
data-slot="icon"
|
||||
/>
|
||||
</button>
|
||||
target_id={"tooltip-track-#{@track.scrobbled_at_uts}"}
|
||||
label={gettext("Copy track MusicBrainz ID to clipboard")}
|
||||
/>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="flex gap-2 w-full mt-2">
|
||||
@@ -71,25 +60,11 @@ defmodule MusicLibraryWeb.ScrobbleComponents do
|
||||
<code id={"tooltip-track-album-#{@track.scrobbled_at_uts}"}>
|
||||
{@track.album.musicbrainz_id || gettext("Unknown")}
|
||||
</code>
|
||||
<button
|
||||
<.copy_to_clipboard
|
||||
: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="h-5 w-5"
|
||||
aria-hidden="true"
|
||||
data-slot="icon"
|
||||
/>
|
||||
</button>
|
||||
target_id={"tooltip-track-album-#{@track.scrobbled_at_uts}"}
|
||||
label={gettext("Copy album MusicBrainz ID to clipboard")}
|
||||
/>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="flex gap-2 w-full mt-2">
|
||||
@@ -98,25 +73,11 @@ defmodule MusicLibraryWeb.ScrobbleComponents do
|
||||
<code id={"tooltip-track-artist-#{@track.scrobbled_at_uts}"}>
|
||||
{@track.artist.musicbrainz_id || gettext("Unknown")}
|
||||
</code>
|
||||
<button
|
||||
<.copy_to_clipboard
|
||||
: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="h-5 w-5"
|
||||
aria-hidden="true"
|
||||
data-slot="icon"
|
||||
/>
|
||||
</button>
|
||||
target_id={"tooltip-track-artist-#{@track.scrobbled_at_uts}"}
|
||||
label={gettext("Copy artist MusicBrainz ID to clipboard")}
|
||||
/>
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
@@ -144,25 +105,11 @@ defmodule MusicLibraryWeb.ScrobbleComponents do
|
||||
<code id={"tooltip-album-#{@album.scrobbled_at_uts}"}>
|
||||
{@album.metadata.musicbrainz_id || gettext("Unknown")}
|
||||
</code>
|
||||
<button
|
||||
<.copy_to_clipboard
|
||||
: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="h-5 w-5"
|
||||
aria-hidden="true"
|
||||
data-slot="icon"
|
||||
/>
|
||||
</button>
|
||||
target_id={"tooltip-album-#{@album.scrobbled_at_uts}"}
|
||||
label={gettext("Copy album MusicBrainz ID to clipboard")}
|
||||
/>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="flex gap-2 w-full mt-2">
|
||||
@@ -171,25 +118,11 @@ defmodule MusicLibraryWeb.ScrobbleComponents do
|
||||
<code id={"tooltip-artist-#{@album.scrobbled_at_uts}"}>
|
||||
{@album.artist.musicbrainz_id || gettext("Unknown")}
|
||||
</code>
|
||||
<button
|
||||
<.copy_to_clipboard
|
||||
: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="h-5 w-5"
|
||||
aria-hidden="true"
|
||||
data-slot="icon"
|
||||
/>
|
||||
</button>
|
||||
target_id={"tooltip-artist-#{@album.scrobbled_at_uts}"}
|
||||
label={gettext("Copy artist MusicBrainz ID to clipboard")}
|
||||
/>
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
@@ -197,4 +130,59 @@ defmodule MusicLibraryWeb.ScrobbleComponents do
|
||||
</.tooltip>
|
||||
"""
|
||||
end
|
||||
|
||||
attr :musicbrainz_id, :string, required: true
|
||||
attr :collected_record_id, :string, default: nil
|
||||
attr :wishlisted_record_id, :string, default: nil
|
||||
|
||||
def record_status_badges(assigns) do
|
||||
~H"""
|
||||
<div class="flex gap-1 flex-col text-right">
|
||||
<.badge :if={@musicbrainz_id == ""}>
|
||||
{gettext("No MB ID")}
|
||||
</.badge>
|
||||
<.link :if={@collected_record_id} navigate={~p"/collection/#{@collected_record_id}"}>
|
||||
<.badge color="success">{gettext("Collected")}</.badge>
|
||||
</.link>
|
||||
<.link :if={@wishlisted_record_id} navigate={~p"/wishlist/#{@wishlisted_record_id}"}>
|
||||
<.badge color="warning">{gettext("Wishlisted")}</.badge>
|
||||
</.link>
|
||||
</div>
|
||||
"""
|
||||
end
|
||||
|
||||
attr :id, :string, required: true
|
||||
attr :musicbrainz_id, :string, required: true
|
||||
|
||||
def import_format_dropdown(assigns) do
|
||||
~H"""
|
||||
<.dropdown id={@id} placement="bottom-end">
|
||||
<:toggle>
|
||||
<.button variant="ghost">
|
||||
<span class="sr-only">{gettext("Choose which format to import")}</span>
|
||||
<.icon
|
||||
name="hero-star"
|
||||
class="h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer"
|
||||
aria-hidden="true"
|
||||
data-slot="icon"
|
||||
/>
|
||||
</.button>
|
||||
</:toggle>
|
||||
<.focus_wrap id={@id <> "-focus-wrap"}>
|
||||
<.dropdown_link
|
||||
:for={format <- Records.Record.formats()}
|
||||
id={@id <> "-#{format}-import"}
|
||||
phx-click={
|
||||
JS.push("import",
|
||||
value: %{id: @musicbrainz_id, format: format},
|
||||
page_loading: true
|
||||
)
|
||||
}
|
||||
>
|
||||
{format_label(format)}
|
||||
</.dropdown_link>
|
||||
</.focus_wrap>
|
||||
</.dropdown>
|
||||
"""
|
||||
end
|
||||
end
|
||||
|
||||
@@ -135,18 +135,10 @@
|
||||
{@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>
|
||||
<.copy_to_clipboard
|
||||
target_id={"mb-#{@artist.musicbrainz_id}"}
|
||||
label={gettext("Copy MusicBrainz ID to clipboard")}
|
||||
/>
|
||||
</dd>
|
||||
</dl>
|
||||
<.async_result :let={lastfm_artist_info} assign={@lastfm_artist_info}>
|
||||
|
||||
@@ -177,77 +177,41 @@
|
||||
</p>
|
||||
</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">
|
||||
<.dl_row label={gettext("ID")}>
|
||||
<div class="flex justify-between">
|
||||
<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">
|
||||
<.copy_to_clipboard
|
||||
target_id={"record-#{@record.id}"}
|
||||
label={gettext("Copy record ID to clipboard")}
|
||||
/>
|
||||
</div>
|
||||
</.dl_row>
|
||||
<.dl_row label={gettext("Genres")}>
|
||||
<.link
|
||||
:for={genre <- @record.genres}
|
||||
class="mr-2 text-zinc-700 hover:text-zinc-500 dark:text-zinc-400 dark:hover:text-zinc-300"
|
||||
patch={~p"/collection?#{%{query: ~s(genre:"#{genre}")}}"}
|
||||
>
|
||||
{genre}
|
||||
</.link>
|
||||
</.dl_row>
|
||||
<.dl_row label={gettext("MusicBrainz ID")}>
|
||||
<div class="flex justify-between">
|
||||
<a href={MusicBrainz.ReleaseGroup.url(@record.musicbrainz_id)}>
|
||||
<code id={"mb-#{@record.musicbrainz_id}"}>{@record.musicbrainz_id}</code>
|
||||
</a>
|
||||
<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 flex justify-between text-xs md:text-sm leading-6 text-zinc-700 dark:text-zinc-300 sm:col-span-2 sm:mt-0">
|
||||
<.copy_to_clipboard
|
||||
target_id={"mb-#{@record.musicbrainz_id}"}
|
||||
label={gettext("Copy MusicBrainz ID to clipboard")}
|
||||
/>
|
||||
</div>
|
||||
</.dl_row>
|
||||
<.dl_row label={gettext("Purchased on")}>
|
||||
{Records.Record.format_as_date(@record.purchased_at)}
|
||||
</.dl_row>
|
||||
<.dl_row label={gettext("Published releases")}>
|
||||
<div class="flex justify-between">
|
||||
{Records.Record.release_count(@record)}
|
||||
<.release_list record={@record} />
|
||||
<button phx-click={Fluxon.open_dialog("release-list-" <> @record.id)}>
|
||||
@@ -261,13 +225,10 @@
|
||||
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("Collected release")}
|
||||
</dt>
|
||||
<dd class="mt-1 flex justify-between space-x-2 leading-6 sm:col-span-2 sm:mt-0">
|
||||
</div>
|
||||
</.dl_row>
|
||||
<.dl_row label={gettext("Collected release")}>
|
||||
<div class="flex justify-between space-x-2">
|
||||
<span
|
||||
:if={!@record.selected_release_id}
|
||||
class="text-xs md:text-sm text-zinc-700 dark:text-zinc-300"
|
||||
@@ -285,77 +246,40 @@
|
||||
>
|
||||
{@record.selected_release_id}
|
||||
</span>
|
||||
|
||||
<button
|
||||
<.copy_to_clipboard
|
||||
: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
|
||||
target_id={"record-selected-release-" <> @record.id}
|
||||
label={gettext("Copy record selected release ID to clipboard")}
|
||||
/>
|
||||
</div>
|
||||
</.dl_row>
|
||||
<.dl_row
|
||||
:if={Records.Record.included_release_groups_count(@record) > 0}
|
||||
class="py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0"
|
||||
label={gettext("Includes")}
|
||||
>
|
||||
<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">
|
||||
<span :if={@last_listened_track}>
|
||||
{localize_scrobbled_at(@last_listened_track.scrobbled_at_uts, @timezone)}
|
||||
</span>
|
||||
<span :if={@play_count == 0}>
|
||||
{gettext("Never")}
|
||||
</span>
|
||||
<span :if={@play_count > 0}>
|
||||
{ngettext("(1 scrobble)", "(%{count} scrobbles)", @play_count)}
|
||||
</span>
|
||||
</dd>
|
||||
</div>
|
||||
<ul>
|
||||
<li :for={included_release_group <- Records.Record.included_release_groups(@record)}>
|
||||
{included_release_group.artists} - {included_release_group.title}
|
||||
</li>
|
||||
</ul>
|
||||
</.dl_row>
|
||||
<.dl_row label={gettext("Inserted at")}>
|
||||
{Records.Record.format_as_date(@record.inserted_at)}
|
||||
</.dl_row>
|
||||
<.dl_row label={gettext("Updated at")}>
|
||||
{Records.Record.format_as_date(@record.updated_at)}
|
||||
</.dl_row>
|
||||
<.dl_row label={gettext("Last listened at")}>
|
||||
<span :if={@last_listened_track}>
|
||||
{localize_scrobbled_at(@last_listened_track.scrobbled_at_uts, @timezone)}
|
||||
</span>
|
||||
<span :if={@play_count == 0}>
|
||||
{gettext("Never")}
|
||||
</span>
|
||||
<span :if={@play_count > 0}>
|
||||
{ngettext("(1 scrobble)", "(%{count} scrobbles)", @play_count)}
|
||||
</span>
|
||||
</.dl_row>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -2,12 +2,11 @@ defmodule MusicLibraryWeb.ScrobbledTracksLive.Index do
|
||||
use MusicLibraryWeb, :live_view
|
||||
|
||||
import MusicLibraryWeb.Components.Pagination
|
||||
import MusicLibraryWeb.RecordComponents, only: [format_label: 1]
|
||||
import MusicLibraryWeb.ScrobbleComponents
|
||||
|
||||
alias LastFm.Track
|
||||
alias MusicLibrary.Assets.Transform
|
||||
alias MusicLibrary.{Records, ScrobbleActivity}
|
||||
alias MusicLibrary.ScrobbleActivity
|
||||
|
||||
@default_tracks_list_params %{
|
||||
query: "",
|
||||
|
||||
@@ -120,56 +120,20 @@
|
||||
</div>
|
||||
|
||||
<div class="flex items-center">
|
||||
<div class="flex gap-1 flex-col text-right">
|
||||
<.badge :if={track.album.musicbrainz_id == ""}>
|
||||
{gettext("No MB ID")}
|
||||
</.badge>
|
||||
<.link
|
||||
:if={collected_record_id}
|
||||
navigate={~p"/collection/#{collected_record_id}"}
|
||||
>
|
||||
<.badge color="success">{gettext("Collected")}</.badge>
|
||||
</.link>
|
||||
<.link
|
||||
:if={wishlisted_record_id}
|
||||
navigate={~p"/wishlist/#{wishlisted_record_id}"}
|
||||
>
|
||||
<.badge color="warning">{gettext("Wishlisted")}</.badge>
|
||||
</.link>
|
||||
</div>
|
||||
<.record_status_badges
|
||||
musicbrainz_id={track.album.musicbrainz_id}
|
||||
collected_record_id={collected_record_id}
|
||||
wishlisted_record_id={wishlisted_record_id}
|
||||
/>
|
||||
|
||||
<.dropdown
|
||||
<.import_format_dropdown
|
||||
:if={
|
||||
track.album.musicbrainz_id !== "" and !collected_record_id and
|
||||
!wishlisted_record_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>
|
||||
musicbrainz_id={track.album.musicbrainz_id}
|
||||
/>
|
||||
<.dropdown id={"actions-#{track.scrobbled_at_uts}"} placement="bottom-end">
|
||||
<:toggle>
|
||||
<.button variant="ghost">
|
||||
|
||||
@@ -139,62 +139,20 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-1 flex-col text-right">
|
||||
<.badge :if={album.metadata.musicbrainz_id == ""}>
|
||||
{gettext("No MB ID")}
|
||||
</.badge>
|
||||
<.link
|
||||
:if={collected_record_id}
|
||||
navigate={~p"/collection/#{collected_record_id}"}
|
||||
>
|
||||
<.badge color="success">
|
||||
{gettext("Collected")}
|
||||
</.badge>
|
||||
</.link>
|
||||
<.link
|
||||
:if={wishlisted_record_id}
|
||||
navigate={~p"/wishlist/#{wishlisted_record_id}"}
|
||||
>
|
||||
<.badge color="warning">
|
||||
{gettext("Wishlisted")}
|
||||
</.badge>
|
||||
</.link>
|
||||
</div>
|
||||
<.record_status_badges
|
||||
musicbrainz_id={album.metadata.musicbrainz_id}
|
||||
collected_record_id={collected_record_id}
|
||||
wishlisted_record_id={wishlisted_record_id}
|
||||
/>
|
||||
|
||||
<.dropdown
|
||||
<.import_format_dropdown
|
||||
:if={
|
||||
album.metadata.musicbrainz_id !== "" and !collected_record_id and
|
||||
!wishlisted_record_id
|
||||
}
|
||||
id={"actions-#{album.scrobbled_at_uts}-albums"}
|
||||
placement="bottom-end"
|
||||
>
|
||||
<:toggle>
|
||||
<.button variant="ghost">
|
||||
<span class="sr-only">{gettext("Choose which format to import")}</span>
|
||||
<.icon
|
||||
name="hero-star"
|
||||
class="h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer"
|
||||
aria-hidden="true"
|
||||
data-slot="icon"
|
||||
/>
|
||||
</.button>
|
||||
</:toggle>
|
||||
<.focus_wrap id={"actions-#{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>
|
||||
musicbrainz_id={album.metadata.musicbrainz_id}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
@@ -264,58 +222,20 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-1 flex-col text-right">
|
||||
<.badge :if={track.album.musicbrainz_id == ""}>
|
||||
{gettext("No MB ID")}
|
||||
</.badge>
|
||||
<.link
|
||||
:if={collected_record_id}
|
||||
navigate={~p"/collection/#{collected_record_id}"}
|
||||
>
|
||||
<.badge color="success">{gettext("Collected")}</.badge>
|
||||
</.link>
|
||||
<.link
|
||||
:if={wishlisted_record_id}
|
||||
navigate={~p"/wishlist/#{wishlisted_record_id}"}
|
||||
>
|
||||
<.badge color="warning">{gettext("Wishlisted")}</.badge>
|
||||
</.link>
|
||||
</div>
|
||||
<.record_status_badges
|
||||
musicbrainz_id={track.album.musicbrainz_id}
|
||||
collected_record_id={collected_record_id}
|
||||
wishlisted_record_id={wishlisted_record_id}
|
||||
/>
|
||||
|
||||
<.dropdown
|
||||
<.import_format_dropdown
|
||||
:if={
|
||||
track.album.musicbrainz_id !== "" and !collected_record_id and
|
||||
!wishlisted_record_id
|
||||
}
|
||||
id={"actions-#{track.scrobbled_at_uts}-tracks"}
|
||||
placement="bottom-end"
|
||||
>
|
||||
<:toggle>
|
||||
<.button variant="ghost">
|
||||
<span class="sr-only">{gettext("Choose which format to import")}</span>
|
||||
<.icon
|
||||
name="hero-star"
|
||||
class="h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer"
|
||||
aria-hidden="true"
|
||||
data-slot="icon"
|
||||
/>
|
||||
</.button>
|
||||
</:toggle>
|
||||
<.focus_wrap id={"actions-#{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>
|
||||
musicbrainz_id={track.album.musicbrainz_id}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
@@ -153,69 +153,38 @@
|
||||
</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">
|
||||
<.dl_row label={gettext("ID")}>
|
||||
<div class="flex justify-between">
|
||||
<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">
|
||||
<.copy_to_clipboard
|
||||
target_id={"record-#{@record.id}"}
|
||||
label={gettext("Copy record ID to clipboard")}
|
||||
/>
|
||||
</div>
|
||||
</.dl_row>
|
||||
<.dl_row label={gettext("Genres")}>
|
||||
<.link
|
||||
:for={genre <- @record.genres}
|
||||
class="mr-2 text-zinc-700 hover:text-zinc-500 dark:text-zinc-400 dark:hover:text-zinc-300"
|
||||
patch={~p"/wishlist?#{%{query: ~s(genre:"#{genre}")}}"}
|
||||
>
|
||||
{genre}
|
||||
</.link>
|
||||
</.dl_row>
|
||||
<.dl_row label={gettext("MusicBrainz ID")}>
|
||||
<div class="flex justify-between">
|
||||
<a href={MusicBrainz.ReleaseGroup.url(@record.musicbrainz_id)}>
|
||||
<code id={"mb-#{@record.musicbrainz_id}"}>{@record.musicbrainz_id}</code>
|
||||
</a>
|
||||
<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 flex justify-between text-xs md:text-sm leading-6 text-zinc-700 dark:text-zinc-300 sm:col-span-2 sm:mt-0">
|
||||
<.copy_to_clipboard
|
||||
target_id={"mb-#{@record.musicbrainz_id}"}
|
||||
label={gettext("Copy MusicBrainz ID to clipboard")}
|
||||
/>
|
||||
</div>
|
||||
</.dl_row>
|
||||
<.dl_row label={gettext("Published releases")}>
|
||||
<div class="flex justify-between">
|
||||
{Records.Record.release_count(@record)}
|
||||
<.release_list record={@record} />
|
||||
<button phx-click={Fluxon.open_dialog("release-list-" <> @record.id)}>
|
||||
@@ -229,59 +198,38 @@
|
||||
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("Wishlisted release")}
|
||||
</dt>
|
||||
<dd class="mt-1 flex justify-between space-x-2 leading-6 sm:col-span-2 sm:mt-0">
|
||||
</div>
|
||||
</.dl_row>
|
||||
<.dl_row label={gettext("Wishlisted release")}>
|
||||
<div class="flex justify-between space-x-2">
|
||||
<span
|
||||
:if={!@record.selected_release_id}
|
||||
class="text-xs md:text-sm text-zinc-700 dark:text-zinc-300"
|
||||
>
|
||||
{gettext("No release selected")}
|
||||
</span>
|
||||
|
||||
<.release_summary
|
||||
:if={@record.selected_release_id}
|
||||
release={Records.Record.selected_release(@record)}
|
||||
/>
|
||||
</dd>
|
||||
</div>
|
||||
<div
|
||||
</div>
|
||||
</.dl_row>
|
||||
<.dl_row
|
||||
:if={Records.Record.included_release_groups_count(@record) > 0}
|
||||
class="py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0"
|
||||
label={gettext("Includes")}
|
||||
>
|
||||
<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>
|
||||
<ul>
|
||||
<li :for={included_release_group <- Records.Record.included_release_groups(@record)}>
|
||||
{included_release_group.artists} - {included_release_group.title}
|
||||
</li>
|
||||
</ul>
|
||||
</.dl_row>
|
||||
<.dl_row label={gettext("Inserted at")}>
|
||||
{Records.Record.format_as_date(@record.inserted_at)}
|
||||
</.dl_row>
|
||||
<.dl_row label={gettext("Updated at")}>
|
||||
{Records.Record.format_as_date(@record.updated_at)}
|
||||
</.dl_row>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user