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

Extract some reused components

Browse Source
This commit is contained in:
Claudio Ortolina
2026-02-07 17:23:13 +00:00
parent ecd87ee2c6
commit a7056aa8d9
10 changed files with 258 additions and 500 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/music_library_web/components/core_components.ex
+31
View File
@@ -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
lib/music_library_web/components/scrobble_components.ex
+78 -90
View File
@@ -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
lib/music_library_web/live/artist_live/show.html.heex
+4 -12
View File
@@ -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}>
lib/music_library_web/live/collection_live/show.html.heex
+65 -141
View File
@@ -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>
lib/music_library_web/live/scrobbled_tracks_live/index.ex
+1 -2
View File
@@ -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: "",
lib/music_library_web/live/scrobbled_tracks_live/index.html.heex
+8 -44
View File
@@ -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">
lib/music_library_web/live/stats_live/index.html.heex
+16 -96
View File
@@ -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>
lib/music_library_web/live/wishlist_live/show.html.heex
+47 -99
View File
@@ -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>
priv/gettext/default.pot
+4 -8
View File
@@ -267,24 +267,21 @@ msgid "Scrobble activity"
msgstr ""
#: lib/music_library_web/components/add_record.ex
#: lib/music_library_web/live/scrobbled_tracks_live/index.html.heex
#: lib/music_library_web/live/stats_live/index.html.heex
#: lib/music_library_web/components/scrobble_components.ex
#, elixir-autogen, elixir-format
msgid "Choose which format to import"
msgstr ""
#: lib/music_library_web/components/barcode_scanner.ex
#: lib/music_library_web/components/scrobble_components.ex
#: lib/music_library_web/live/record_set_live/record_picker.ex
#: lib/music_library_web/live/scrobbled_tracks_live/index.html.heex
#: lib/music_library_web/live/stats_live/index.html.heex
#, elixir-autogen, elixir-format
msgid "Collected"
msgstr ""
#: lib/music_library_web/components/barcode_scanner.ex
#: lib/music_library_web/components/scrobble_components.ex
#: lib/music_library_web/live/record_set_live/record_picker.ex
#: lib/music_library_web/live/scrobbled_tracks_live/index.html.heex
#: lib/music_library_web/live/stats_live/index.html.heex
#, elixir-autogen, elixir-format
msgid "Wishlisted"
msgstr ""
@@ -328,8 +325,7 @@ msgstr ""
msgid "Error refreshing cover"
msgstr ""
#: lib/music_library_web/live/scrobbled_tracks_live/index.html.heex
#: lib/music_library_web/live/stats_live/index.html.heex
#: lib/music_library_web/components/scrobble_components.ex
#, elixir-autogen, elixir-format
msgid "No MB ID"
msgstr ""
priv/gettext/en/LC_MESSAGES/default.po
+4 -8
View File
@@ -267,24 +267,21 @@ msgid "Scrobble activity"
msgstr ""
#: lib/music_library_web/components/add_record.ex
#: lib/music_library_web/live/scrobbled_tracks_live/index.html.heex
#: lib/music_library_web/live/stats_live/index.html.heex
#: lib/music_library_web/components/scrobble_components.ex
#, elixir-autogen, elixir-format
msgid "Choose which format to import"
msgstr ""
#: lib/music_library_web/components/barcode_scanner.ex
#: lib/music_library_web/components/scrobble_components.ex
#: lib/music_library_web/live/record_set_live/record_picker.ex
#: lib/music_library_web/live/scrobbled_tracks_live/index.html.heex
#: lib/music_library_web/live/stats_live/index.html.heex
#, elixir-autogen, elixir-format
msgid "Collected"
msgstr ""
#: lib/music_library_web/components/barcode_scanner.ex
#: lib/music_library_web/components/scrobble_components.ex
#: lib/music_library_web/live/record_set_live/record_picker.ex
#: lib/music_library_web/live/scrobbled_tracks_live/index.html.heex
#: lib/music_library_web/live/stats_live/index.html.heex
#, elixir-autogen, elixir-format
msgid "Wishlisted"
msgstr ""
@@ -328,8 +325,7 @@ msgstr ""
msgid "Error refreshing cover"
msgstr ""
#: lib/music_library_web/live/scrobbled_tracks_live/index.html.heex
#: lib/music_library_web/live/stats_live/index.html.heex
#: lib/music_library_web/components/scrobble_components.ex
#, elixir-autogen, elixir-format
msgid "No MB ID"
msgstr ""