Add copy MusicBrainz ID button

This commit is contained in:
Claudio Ortolina
2024-11-01 10:32:00 +00:00
parent c0f039f2ee
commit 9daaaadb46
4 changed files with 53 additions and 11 deletions
+8
View File
@@ -32,6 +32,14 @@ let liveSocket = new LiveSocket("/live", Socket, {
topbar.config({barColors: {0: "#FD4F00"}, shadowColor: "rgba(0, 0, 0, .3)"})
window.addEventListener("phx:page-loading-start", _info => topbar.show(300))
window.addEventListener("phx:page-loading-stop", _info => topbar.hide())
window.addEventListener("music_library:clipcopy", (event) => {
if ("clipboard" in navigator) {
const text = event.target.textContent;
navigator.clipboard.writeText(text);
} else {
alert("Sorry, your browser does not support clipboard copy.");
}
});
// connect if there are any LiveViews on the page
liveSocket.connect()
@@ -56,10 +56,24 @@
<dt class="text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400">
<%= gettext("MusicBrainz ID") %>
</dt>
<dd class="mt-1 text-sm leading-6 text-zinc-700 dark:text-zinc-300 sm:col-span-2 sm:mt-0">
<dd class="mt-1 text-sm flex leading-6 text-zinc-700 dark:text-zinc-300 sm:col-span-2 sm:mt-0">
<a href={musicbrainz_url(@record)}>
<code><%= @record.musicbrainz_id %></code>
<code id={"mb-#{@record.musicbrainz_id}"}><%= @record.musicbrainz_id %></code>
</a>
<button
class="transition-colors"
phx-click={
JS.dispatch("music_library:clipcopy", to: "#mb-" <> @record.musicbrainz_id)
}
>
<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">
@@ -56,10 +56,24 @@
<dt class="text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400">
<%= gettext("MusicBrainz ID") %>
</dt>
<dd class="mt-1 text-sm leading-6 text-zinc-700 dark:text-zinc-300 sm:col-span-2 sm:mt-0">
<dd class="mt-1 text-sm flex leading-6 text-zinc-700 dark:text-zinc-300 sm:col-span-2 sm:mt-0">
<a href={musicbrainz_url(@record)}>
<code><%= @record.musicbrainz_id %></code>
<code id={"mb-#{@record.musicbrainz_id}"}><%= @record.musicbrainz_id %></code>
</a>
<button
class="transition-colors"
phx-click={
JS.dispatch("music_library:clipcopy", to: "#mb-" <> @record.musicbrainz_id)
}
>
<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">
+13 -7
View File
@@ -29,12 +29,12 @@ msgstr ""
msgid "Attempting to reconnect"
msgstr ""
#: lib/music_library_web/live/record_live/show.html.heex:95
#: lib/music_library_web/live/record_live/show.html.heex:109
#, elixir-autogen, elixir-format
msgid "Back to records"
msgstr ""
#: lib/music_library_web/live/wishlist_live/show.html.heex:87
#: lib/music_library_web/live/wishlist_live/show.html.heex:101
#, elixir-autogen, elixir-format
msgid "Back to wishlist"
msgstr ""
@@ -125,8 +125,8 @@ msgstr ""
msgid "Import from MusicBrainz"
msgstr ""
#: lib/music_library_web/live/record_live/show.html.heex:75
#: lib/music_library_web/live/wishlist_live/show.html.heex:67
#: lib/music_library_web/live/record_live/show.html.heex:89
#: lib/music_library_web/live/wishlist_live/show.html.heex:81
#, elixir-autogen, elixir-format
msgid "Inserted at"
msgstr ""
@@ -201,7 +201,7 @@ msgstr ""
msgid "Purchased at"
msgstr ""
#: lib/music_library_web/live/record_live/show.html.heex:67
#: lib/music_library_web/live/record_live/show.html.heex:81
#, elixir-autogen, elixir-format
msgid "Purchased on"
msgstr ""
@@ -307,8 +307,8 @@ msgstr ""
msgid "Types"
msgstr ""
#: lib/music_library_web/live/record_live/show.html.heex:83
#: lib/music_library_web/live/wishlist_live/show.html.heex:75
#: lib/music_library_web/live/record_live/show.html.heex:97
#: lib/music_library_web/live/wishlist_live/show.html.heex:89
#, elixir-autogen, elixir-format
msgid "Updated at"
msgstr ""
@@ -345,3 +345,9 @@ msgstr ""
#, elixir-autogen, elixir-format
msgid "close"
msgstr ""
#: lib/music_library_web/live/record_live/show.html.heex:69
#: lib/music_library_web/live/wishlist_live/show.html.heex:69
#, elixir-autogen, elixir-format
msgid "Copy MusicBrainz ID to clipboard"
msgstr ""