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" "https://www.google.com/s2/favicons?domain=#{uri.host}&sz=16"
end 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 ## JS Commands
def show(js \\ %JS{}, selector) do 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 LastFm.Track
alias MusicLibrary.Records
use MusicLibraryWeb, :html use MusicLibraryWeb, :html
import MusicLibraryWeb.RecordComponents, only: [format_label: 1]
def refresh_lastfm_feed_button(assigns) do def refresh_lastfm_feed_button(assigns) do
~H""" ~H"""
<button <button
@@ -44,25 +47,11 @@ defmodule MusicLibraryWeb.ScrobbleComponents do
<code id={"tooltip-track-#{@track.scrobbled_at_uts}"}> <code id={"tooltip-track-#{@track.scrobbled_at_uts}"}>
{@track.musicbrainz_id || gettext("Unknown")} {@track.musicbrainz_id || gettext("Unknown")}
</code> </code>
<button <.copy_to_clipboard
:if={@track.musicbrainz_id not in ["", nil]} :if={@track.musicbrainz_id not in ["", nil]}
phx-click={ target_id={"tooltip-track-#{@track.scrobbled_at_uts}"}
JS.dispatch("music_library:clipcopy", label={gettext("Copy track MusicBrainz ID to clipboard")}
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>
</dd> </dd>
</div> </div>
<div class="flex gap-2 w-full mt-2"> <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}"}> <code id={"tooltip-track-album-#{@track.scrobbled_at_uts}"}>
{@track.album.musicbrainz_id || gettext("Unknown")} {@track.album.musicbrainz_id || gettext("Unknown")}
</code> </code>
<button <.copy_to_clipboard
:if={@track.album.musicbrainz_id not in ["", nil]} :if={@track.album.musicbrainz_id not in ["", nil]}
phx-click={ target_id={"tooltip-track-album-#{@track.scrobbled_at_uts}"}
JS.dispatch("music_library:clipcopy", label={gettext("Copy album MusicBrainz ID to clipboard")}
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>
</dd> </dd>
</div> </div>
<div class="flex gap-2 w-full mt-2"> <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}"}> <code id={"tooltip-track-artist-#{@track.scrobbled_at_uts}"}>
{@track.artist.musicbrainz_id || gettext("Unknown")} {@track.artist.musicbrainz_id || gettext("Unknown")}
</code> </code>
<button <.copy_to_clipboard
:if={@track.artist.musicbrainz_id not in ["", nil]} :if={@track.artist.musicbrainz_id not in ["", nil]}
phx-click={ target_id={"tooltip-track-artist-#{@track.scrobbled_at_uts}"}
JS.dispatch("music_library:clipcopy", label={gettext("Copy artist MusicBrainz ID to clipboard")}
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>
</dd> </dd>
</div> </div>
</dl> </dl>
@@ -144,25 +105,11 @@ defmodule MusicLibraryWeb.ScrobbleComponents do
<code id={"tooltip-album-#{@album.scrobbled_at_uts}"}> <code id={"tooltip-album-#{@album.scrobbled_at_uts}"}>
{@album.metadata.musicbrainz_id || gettext("Unknown")} {@album.metadata.musicbrainz_id || gettext("Unknown")}
</code> </code>
<button <.copy_to_clipboard
:if={@album.metadata.musicbrainz_id not in ["", nil]} :if={@album.metadata.musicbrainz_id not in ["", nil]}
phx-click={ target_id={"tooltip-album-#{@album.scrobbled_at_uts}"}
JS.dispatch("music_library:clipcopy", label={gettext("Copy album MusicBrainz ID to clipboard")}
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>
</dd> </dd>
</div> </div>
<div class="flex gap-2 w-full mt-2"> <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}"}> <code id={"tooltip-artist-#{@album.scrobbled_at_uts}"}>
{@album.artist.musicbrainz_id || gettext("Unknown")} {@album.artist.musicbrainz_id || gettext("Unknown")}
</code> </code>
<button <.copy_to_clipboard
:if={@album.artist.musicbrainz_id not in ["", nil]} :if={@album.artist.musicbrainz_id not in ["", nil]}
phx-click={ target_id={"tooltip-artist-#{@album.scrobbled_at_uts}"}
JS.dispatch("music_library:clipcopy", label={gettext("Copy artist MusicBrainz ID to clipboard")}
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>
</dd> </dd>
</div> </div>
</dl> </dl>
@@ -197,4 +130,59 @@ defmodule MusicLibraryWeb.ScrobbleComponents do
</.tooltip> </.tooltip>
""" """
end 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 end
lib/music_library_web/live/artist_live/show.html.heex
+4 -12
View File
@@ -135,18 +135,10 @@
{@artist.musicbrainz_id} {@artist.musicbrainz_id}
</code> </code>
</a> </a>
<button phx-click={ <.copy_to_clipboard
JS.dispatch("music_library:clipcopy", to: "#mb-" <> @artist.musicbrainz_id) target_id={"mb-#{@artist.musicbrainz_id}"}
|> JS.transition("animate-shake") label={gettext("Copy MusicBrainz ID to clipboard")}
}> />
<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> </dd>
</dl> </dl>
<.async_result :let={lastfm_artist_info} assign={@lastfm_artist_info}> <.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> </p>
</div> </div>
<div class="mt-4 md:mt-8"> <div class="mt-4 md:mt-8">
<%!-- TODO: replace with OSS version --%>
<dl class="divide-y divide-zinc-100 dark:divide-slate-300/30"> <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"> <.dl_row label={gettext("ID")}>
<dt class="text-xs md:text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400"> <div class="flex justify-between">
{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> <code id={"record-#{@record.id}"}>{@record.id}</code>
<button phx-click={ <.copy_to_clipboard
JS.dispatch("music_library:clipcopy", to: "#record-" <> @record.id) target_id={"record-#{@record.id}"}
|> JS.transition("animate-shake") label={gettext("Copy record ID to clipboard")}
}> />
<span class="sr-only">{gettext("Copy record ID to clipboard")}</span> </div>
<.icon </.dl_row>
name="hero-clipboard-document" <.dl_row label={gettext("Genres")}>
class="-mt-1 h-5 w-5" <.link
aria-hidden="true" :for={genre <- @record.genres}
data-slot="icon" 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}")}}"}
</button> >
</dd> {genre}
</div> </.link>
<div class="py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0"> </.dl_row>
<dt class="text-xs md:text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400"> <.dl_row label={gettext("MusicBrainz ID")}>
{gettext("Genres")} <div class="flex justify-between">
</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)}> <a href={MusicBrainz.ReleaseGroup.url(@record.musicbrainz_id)}>
<code id={"mb-#{@record.musicbrainz_id}"}>{@record.musicbrainz_id}</code> <code id={"mb-#{@record.musicbrainz_id}"}>{@record.musicbrainz_id}</code>
</a> </a>
<button phx-click={ <.copy_to_clipboard
JS.dispatch("music_library:clipcopy", to: "#mb-" <> @record.musicbrainz_id) target_id={"mb-#{@record.musicbrainz_id}"}
|> JS.transition("animate-shake") label={gettext("Copy MusicBrainz ID to clipboard")}
}> />
<span class="sr-only">{gettext("Copy MusicBrainz ID to clipboard")}</span> </div>
<.icon </.dl_row>
name="hero-clipboard-document" <.dl_row label={gettext("Purchased on")}>
class="-mt-1 h-5 w-5" {Records.Record.format_as_date(@record.purchased_at)}
aria-hidden="true" </.dl_row>
data-slot="icon" <.dl_row label={gettext("Published releases")}>
/> <div class="flex justify-between">
</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">
{Records.Record.release_count(@record)} {Records.Record.release_count(@record)}
<.release_list record={@record} /> <.release_list record={@record} />
<button phx-click={Fluxon.open_dialog("release-list-" <> @record.id)}> <button phx-click={Fluxon.open_dialog("release-list-" <> @record.id)}>
@@ -261,13 +225,10 @@
data-slot="icon" data-slot="icon"
/> />
</button> </button>
</dd> </div>
</div> </.dl_row>
<div class="py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0"> <.dl_row label={gettext("Collected release")}>
<dt class="text-xs md:text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400"> <div class="flex justify-between space-x-2">
{gettext("Collected release")}
</dt>
<dd class="mt-1 flex justify-between space-x-2 leading-6 sm:col-span-2 sm:mt-0">
<span <span
:if={!@record.selected_release_id} :if={!@record.selected_release_id}
class="text-xs md:text-sm text-zinc-700 dark:text-zinc-300" class="text-xs md:text-sm text-zinc-700 dark:text-zinc-300"
@@ -285,77 +246,40 @@
> >
{@record.selected_release_id} {@record.selected_release_id}
</span> </span>
<.copy_to_clipboard
<button
:if={@record.selected_release_id} :if={@record.selected_release_id}
phx-click={ target_id={"record-selected-release-" <> @record.id}
JS.dispatch("music_library:clipcopy", label={gettext("Copy record selected release ID to clipboard")}
to: "#record-selected-release-" <> @record.id />
) </div>
|> JS.transition("animate-shake") </.dl_row>
} <.dl_row
>
<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} :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"> <ul>
{gettext("Includes")} <li :for={included_release_group <- Records.Record.included_release_groups(@record)}>
</dt> {included_release_group.artists} - {included_release_group.title}
<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"> </li>
<ul> </ul>
<li :for={ </.dl_row>
included_release_group <- Records.Record.included_release_groups(@record) <.dl_row label={gettext("Inserted at")}>
}> {Records.Record.format_as_date(@record.inserted_at)}
{included_release_group.artists} - {included_release_group.title} </.dl_row>
</li> <.dl_row label={gettext("Updated at")}>
</ul> {Records.Record.format_as_date(@record.updated_at)}
</dd> </.dl_row>
</div> <.dl_row label={gettext("Last listened at")}>
<div class="py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0"> <span :if={@last_listened_track}>
<dt class="text-xs md:text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400"> {localize_scrobbled_at(@last_listened_track.scrobbled_at_uts, @timezone)}
{gettext("Inserted at")} </span>
</dt> <span :if={@play_count == 0}>
<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"> {gettext("Never")}
{Records.Record.format_as_date(@record.inserted_at)} </span>
</dd> <span :if={@play_count > 0}>
</div> {ngettext("(1 scrobble)", "(%{count} scrobbles)", @play_count)}
<div class="py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0"> </span>
<dt class="text-xs md:text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400"> </.dl_row>
{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>
</dl> </dl>
</div> </div>
</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 use MusicLibraryWeb, :live_view
import MusicLibraryWeb.Components.Pagination import MusicLibraryWeb.Components.Pagination
import MusicLibraryWeb.RecordComponents, only: [format_label: 1]
import MusicLibraryWeb.ScrobbleComponents import MusicLibraryWeb.ScrobbleComponents
alias LastFm.Track alias LastFm.Track
alias MusicLibrary.Assets.Transform alias MusicLibrary.Assets.Transform
alias MusicLibrary.{Records, ScrobbleActivity} alias MusicLibrary.ScrobbleActivity
@default_tracks_list_params %{ @default_tracks_list_params %{
query: "", query: "",
lib/music_library_web/live/scrobbled_tracks_live/index.html.heex
+8 -44
View File
@@ -120,56 +120,20 @@
</div> </div>
<div class="flex items-center"> <div class="flex items-center">
<div class="flex gap-1 flex-col text-right"> <.record_status_badges
<.badge :if={track.album.musicbrainz_id == ""}> musicbrainz_id={track.album.musicbrainz_id}
{gettext("No MB ID")} collected_record_id={collected_record_id}
</.badge> wishlisted_record_id={wishlisted_record_id}
<.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>
<.dropdown <.import_format_dropdown
:if={ :if={
track.album.musicbrainz_id !== "" and !collected_record_id and track.album.musicbrainz_id !== "" and !collected_record_id and
!wishlisted_record_id !wishlisted_record_id
} }
id={"actions-#{track.scrobbled_at_uts}-tracks"} id={"actions-#{track.scrobbled_at_uts}-tracks"}
placement="bottom-end" musicbrainz_id={track.album.musicbrainz_id}
> />
<: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>
<.dropdown id={"actions-#{track.scrobbled_at_uts}"} placement="bottom-end"> <.dropdown id={"actions-#{track.scrobbled_at_uts}"} placement="bottom-end">
<:toggle> <:toggle>
<.button variant="ghost"> <.button variant="ghost">
lib/music_library_web/live/stats_live/index.html.heex
+16 -96
View File
@@ -139,62 +139,20 @@
</div> </div>
</div> </div>
<div class="flex gap-1 flex-col text-right"> <.record_status_badges
<.badge :if={album.metadata.musicbrainz_id == ""}> musicbrainz_id={album.metadata.musicbrainz_id}
{gettext("No MB ID")} collected_record_id={collected_record_id}
</.badge> wishlisted_record_id={wishlisted_record_id}
<.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>
<.dropdown <.import_format_dropdown
:if={ :if={
album.metadata.musicbrainz_id !== "" and !collected_record_id and album.metadata.musicbrainz_id !== "" and !collected_record_id and
!wishlisted_record_id !wishlisted_record_id
} }
id={"actions-#{album.scrobbled_at_uts}-albums"} id={"actions-#{album.scrobbled_at_uts}-albums"}
placement="bottom-end" musicbrainz_id={album.metadata.musicbrainz_id}
> />
<: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>
</div> </div>
</div> </div>
</li> </li>
@@ -264,58 +222,20 @@
</div> </div>
</div> </div>
<div class="flex gap-1 flex-col text-right"> <.record_status_badges
<.badge :if={track.album.musicbrainz_id == ""}> musicbrainz_id={track.album.musicbrainz_id}
{gettext("No MB ID")} collected_record_id={collected_record_id}
</.badge> wishlisted_record_id={wishlisted_record_id}
<.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>
<.dropdown <.import_format_dropdown
:if={ :if={
track.album.musicbrainz_id !== "" and !collected_record_id and track.album.musicbrainz_id !== "" and !collected_record_id and
!wishlisted_record_id !wishlisted_record_id
} }
id={"actions-#{track.scrobbled_at_uts}-tracks"} id={"actions-#{track.scrobbled_at_uts}-tracks"}
placement="bottom-end" musicbrainz_id={track.album.musicbrainz_id}
> />
<: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>
</div> </div>
</div> </div>
</li> </li>
lib/music_library_web/live/wishlist_live/show.html.heex
+47 -99
View File
@@ -153,69 +153,38 @@
</div> </div>
<div class="mt-4 md:mt-8"> <div class="mt-4 md:mt-8">
<%!-- TODO: replace with OSS version --%>
<dl class="divide-y divide-zinc-100 dark:divide-slate-300/30"> <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"> <.dl_row label={gettext("ID")}>
<dt class="text-xs md:text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400"> <div class="flex justify-between">
{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> <code id={"record-#{@record.id}"}>{@record.id}</code>
<button phx-click={ <.copy_to_clipboard
JS.dispatch("music_library:clipcopy", to: "#record-" <> @record.id) target_id={"record-#{@record.id}"}
|> JS.transition("animate-shake") label={gettext("Copy record ID to clipboard")}
}> />
<span class="sr-only">{gettext("Copy record ID to clipboard")}</span> </div>
<.icon </.dl_row>
name="hero-clipboard-document" <.dl_row label={gettext("Genres")}>
class="-mt-1 h-5 w-5" <.link
aria-hidden="true" :for={genre <- @record.genres}
data-slot="icon" 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}")}}"}
</button> >
</dd> {genre}
</div> </.link>
<div class="py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0"> </.dl_row>
<dt class="text-xs md:text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400"> <.dl_row label={gettext("MusicBrainz ID")}>
{gettext("Genres")} <div class="flex justify-between">
</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)}> <a href={MusicBrainz.ReleaseGroup.url(@record.musicbrainz_id)}>
<code id={"mb-#{@record.musicbrainz_id}"}>{@record.musicbrainz_id}</code> <code id={"mb-#{@record.musicbrainz_id}"}>{@record.musicbrainz_id}</code>
</a> </a>
<button phx-click={ <.copy_to_clipboard
JS.dispatch("music_library:clipcopy", to: "#mb-" <> @record.musicbrainz_id) target_id={"mb-#{@record.musicbrainz_id}"}
|> JS.transition("animate-shake") label={gettext("Copy MusicBrainz ID to clipboard")}
}> />
<span class="sr-only">{gettext("Copy MusicBrainz ID to clipboard")}</span> </div>
<.icon </.dl_row>
name="hero-clipboard-document" <.dl_row label={gettext("Published releases")}>
class="-mt-1 h-5 w-5" <div class="flex justify-between">
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">
{Records.Record.release_count(@record)} {Records.Record.release_count(@record)}
<.release_list record={@record} /> <.release_list record={@record} />
<button phx-click={Fluxon.open_dialog("release-list-" <> @record.id)}> <button phx-click={Fluxon.open_dialog("release-list-" <> @record.id)}>
@@ -229,59 +198,38 @@
data-slot="icon" data-slot="icon"
/> />
</button> </button>
</dd> </div>
</div> </.dl_row>
<div class="py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0"> <.dl_row label={gettext("Wishlisted release")}>
<dt class="text-xs md:text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400"> <div class="flex justify-between space-x-2">
{gettext("Wishlisted release")}
</dt>
<dd class="mt-1 flex justify-between space-x-2 leading-6 sm:col-span-2 sm:mt-0">
<span <span
:if={!@record.selected_release_id} :if={!@record.selected_release_id}
class="text-xs md:text-sm text-zinc-700 dark:text-zinc-300" class="text-xs md:text-sm text-zinc-700 dark:text-zinc-300"
> >
{gettext("No release selected")} {gettext("No release selected")}
</span> </span>
<.release_summary <.release_summary
:if={@record.selected_release_id} :if={@record.selected_release_id}
release={Records.Record.selected_release(@record)} release={Records.Record.selected_release(@record)}
/> />
</dd> </div>
</div> </.dl_row>
<div <.dl_row
:if={Records.Record.included_release_groups_count(@record) > 0} :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"> <ul>
{gettext("Includes")} <li :for={included_release_group <- Records.Record.included_release_groups(@record)}>
</dt> {included_release_group.artists} - {included_release_group.title}
<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"> </li>
<ul> </ul>
<li :for={ </.dl_row>
included_release_group <- Records.Record.included_release_groups(@record) <.dl_row label={gettext("Inserted at")}>
}> {Records.Record.format_as_date(@record.inserted_at)}
{included_release_group.artists} - {included_release_group.title} </.dl_row>
</li> <.dl_row label={gettext("Updated at")}>
</ul> {Records.Record.format_as_date(@record.updated_at)}
</dd> </.dl_row>
</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> </dl>
</div> </div>
</div> </div>
priv/gettext/default.pot
+4 -8
View File
@@ -267,24 +267,21 @@ msgid "Scrobble activity"
msgstr "" msgstr ""
#: lib/music_library_web/components/add_record.ex #: lib/music_library_web/components/add_record.ex
#: lib/music_library_web/live/scrobbled_tracks_live/index.html.heex #: lib/music_library_web/components/scrobble_components.ex
#: lib/music_library_web/live/stats_live/index.html.heex
#, elixir-autogen, elixir-format #, elixir-autogen, elixir-format
msgid "Choose which format to import" msgid "Choose which format to import"
msgstr "" msgstr ""
#: lib/music_library_web/components/barcode_scanner.ex #: 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/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 #, elixir-autogen, elixir-format
msgid "Collected" msgid "Collected"
msgstr "" msgstr ""
#: lib/music_library_web/components/barcode_scanner.ex #: 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/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 #, elixir-autogen, elixir-format
msgid "Wishlisted" msgid "Wishlisted"
msgstr "" msgstr ""
@@ -328,8 +325,7 @@ msgstr ""
msgid "Error refreshing cover" msgid "Error refreshing cover"
msgstr "" msgstr ""
#: lib/music_library_web/live/scrobbled_tracks_live/index.html.heex #: lib/music_library_web/components/scrobble_components.ex
#: lib/music_library_web/live/stats_live/index.html.heex
#, elixir-autogen, elixir-format #, elixir-autogen, elixir-format
msgid "No MB ID" msgid "No MB ID"
msgstr "" msgstr ""
priv/gettext/en/LC_MESSAGES/default.po
+4 -8
View File
@@ -267,24 +267,21 @@ msgid "Scrobble activity"
msgstr "" msgstr ""
#: lib/music_library_web/components/add_record.ex #: lib/music_library_web/components/add_record.ex
#: lib/music_library_web/live/scrobbled_tracks_live/index.html.heex #: lib/music_library_web/components/scrobble_components.ex
#: lib/music_library_web/live/stats_live/index.html.heex
#, elixir-autogen, elixir-format #, elixir-autogen, elixir-format
msgid "Choose which format to import" msgid "Choose which format to import"
msgstr "" msgstr ""
#: lib/music_library_web/components/barcode_scanner.ex #: 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/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 #, elixir-autogen, elixir-format
msgid "Collected" msgid "Collected"
msgstr "" msgstr ""
#: lib/music_library_web/components/barcode_scanner.ex #: 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/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 #, elixir-autogen, elixir-format
msgid "Wishlisted" msgid "Wishlisted"
msgstr "" msgstr ""
@@ -328,8 +325,7 @@ msgstr ""
msgid "Error refreshing cover" msgid "Error refreshing cover"
msgstr "" msgstr ""
#: lib/music_library_web/live/scrobbled_tracks_live/index.html.heex #: lib/music_library_web/components/scrobble_components.ex
#: lib/music_library_web/live/stats_live/index.html.heex
#, elixir-autogen, elixir-format #, elixir-autogen, elixir-format
msgid "No MB ID" msgid "No MB ID"
msgstr "" msgstr ""