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

Improve display of scrobbled tracks in index

Browse Source 
- Use proper time element
- Add tooltip with metadata
This commit is contained in:
Claudio Ortolina
2025-12-09 15:01:16 +00:00
parent 84e1a80deb
commit 857c981e1d
7 changed files with 131 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/music_library_web/components/scrobble_components.ex
+102
View File
@@ -3,6 +3,8 @@ defmodule MusicLibraryWeb.ScrobbleComponents do
Universal search modal and related components.
"""
alias LastFm.Track
use MusicLibraryWeb, :html
def refresh_lastfm_feed_button(assigns) do
@@ -22,4 +24,104 @@ defmodule MusicLibraryWeb.ScrobbleComponents do
</button>
"""
end
attr :track, Track, required: true
def track_metadata_tooltip(assigns) do
~H"""
<.tooltip>
<.icon
name="hero-information-circle"
class="h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer"
aria-hidden="true"
data-slot="icon"
/>
<:content>
<dl class="p-2">
<div class="flex gap-2 w-full">
<dt>{gettext("Track ID:")}</dt>
<dd class="font-mono">
<code id={"tooltip-track-#{@track.scrobbled_at_uts}"}>
{@track.musicbrainz_id || gettext("Unknown")}
</code>
<button
:if={@track.musicbrainz_id not in ["", nil]}
phx-click={
JS.dispatch("music_library:clipcopy",
to: "#tooltip-track-#{@track.scrobbled_at_uts}"
)
|> JS.transition("animate-shake")
}
>
<span class="sr-only">
{gettext("Copy track MusicBrainz ID to clipboard")}
</span>
<.icon
name="hero-clipboard-document"
class="h-5 w-5"
aria-hidden="true"
data-slot="icon"
/>
</button>
</dd>
</div>
<div class="flex gap-2 w-full mt-2">
<dt>{gettext("Album ID:")}</dt>
<dd class="font-mono">
<code id={"tooltip-track-album-#{@track.scrobbled_at_uts}"}>
{@track.album.musicbrainz_id || gettext("Unknown")}
</code>
<button
:if={@track.album.musicbrainz_id not in ["", nil]}
phx-click={
JS.dispatch("music_library:clipcopy",
to: "#tooltip-track-album-#{@track.scrobbled_at_uts}"
)
|> JS.transition("animate-shake")
}
>
<span class="sr-only">
{gettext("Copy album MusicBrainz ID to clipboard")}
</span>
<.icon
name="hero-clipboard-document"
class="h-5 w-5"
aria-hidden="true"
data-slot="icon"
/>
</button>
</dd>
</div>
<div class="flex gap-2 w-full mt-2">
<dt>{gettext("Artist ID:")}</dt>
<dd class="font-mono">
<code id={"tooltip-track-artist-#{@track.scrobbled_at_uts}"}>
{@track.artist.musicbrainz_id || gettext("Unknown")}
</code>
<button
:if={@track.artist.musicbrainz_id not in ["", nil]}
phx-click={
JS.dispatch("music_library:clipcopy",
to: "#tooltip-track-artist-#{@track.scrobbled_at_uts}"
)
|> JS.transition("animate-shake")
}
>
<span class="sr-only">
{gettext("Copy artist MusicBrainz ID to clipboard")}
</span>
<.icon
name="hero-clipboard-document"
class="h-5 w-5"
aria-hidden="true"
data-slot="icon"
/>
</button>
</dd>
</div>
</dl>
</:content>
</.tooltip>
"""
end
end
lib/music_library_web/live/scrobbled_tracks_live/index.ex
+7 -1
View File
@@ -3,7 +3,7 @@ defmodule MusicLibraryWeb.ScrobbledTracksLive.Index do
import MusicLibraryWeb.Components.Pagination
import MusicLibraryWeb.RecordComponents, only: [format_label: 1]
import MusicLibraryWeb.ScrobbleComponents, only: [refresh_lastfm_feed_button: 1]
import MusicLibraryWeb.ScrobbleComponents
alias LastFm.Track
alias MusicLibrary.Assets.Transform
@@ -186,4 +186,10 @@ defmodule MusicLibraryWeb.ScrobbledTracksLive.Index do
defp track_cover_url(_track, cover_hash) do
~p"/assets/#{Transform.new(hash: cover_hash, width: 96)}"
end
defp format_scrobbled_at_uts(uts) do
uts
|> DateTime.from_unix!()
|> DateTime.to_iso8601()
end
end
lib/music_library_web/live/scrobbled_tracks_live/index.html.heex
+6 -2
View File
@@ -109,9 +109,13 @@
<p class="text-sm text-zinc-500 dark:text-zinc-500 truncate">
{track.album.title}
</p>
<p class="text-xs text-zinc-400 dark:text-zinc-600 mt-1">
<time
datetime={format_scrobbled_at_uts(track.scrobbled_at_uts)}
class="whitespace-nowrap text-right text-xs sm:text-sm text-zinc-500 dark:text-zinc-400"
>
{track.scrobbled_at_label}
</p>
</time>
<.track_metadata_tooltip track={track} />
</div>
</div>
lib/music_library_web/live/stats_live/index.ex
+1 -1
View File
@@ -5,7 +5,7 @@ defmodule MusicLibraryWeb.StatsLive.Index do
import MusicLibraryWeb.ChartComponents
import MusicLibraryWeb.RecordComponents, only: [format_label: 1, type_label: 1]
import MusicLibraryWeb.StatsComponents
import MusicLibraryWeb.ScrobbleComponents, only: [refresh_lastfm_feed_button: 1]
import MusicLibraryWeb.ScrobbleComponents
alias MusicLibrary.Assets.Transform
alias MusicLibrary.{Collection, Records, ScrobbleActivity, Wishlist}
lib/music_library_web/live/stats_live/index.html.heex
+1 -93
View File
@@ -325,99 +325,7 @@
>
{track.scrobbled_at_label}
</time>
<.tooltip>
<.icon
name="hero-information-circle"
class="h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer"
aria-hidden="true"
data-slot="icon"
/>
<:content>
<dl class="p-2">
<div class="flex gap-2 w-full">
<dt>{gettext("Track ID:")}</dt>
<dd class="font-mono">
<code id={"tooltip-track-#{track.scrobbled_at_uts}"}>
{track.musicbrainz_id || gettext("Unknown")}
</code>
<button
:if={track.musicbrainz_id not in ["", nil]}
phx-click={
JS.dispatch("music_library:clipcopy",
to: "#tooltip-track-#{track.scrobbled_at_uts}"
)
|> JS.transition("animate-shake")
}
>
<span class="sr-only">
{gettext("Copy track MusicBrainz ID to clipboard")}
</span>
<.icon
name="hero-clipboard-document"
class="h-5 w-5"
aria-hidden="true"
data-slot="icon"
/>
</button>
</dd>
</div>
<div class="flex gap-2 w-full mt-2">
<dt>{gettext("Album ID:")}</dt>
<dd class="font-mono">
<code id={"tooltip-track-album-#{track.scrobbled_at_uts}"}>
{track.album.musicbrainz_id || gettext("Unknown")}
</code>
<button
:if={track.album.musicbrainz_id not in ["", nil]}
phx-click={
JS.dispatch("music_library:clipcopy",
to: "#tooltip-track-album-#{track.scrobbled_at_uts}"
)
|> JS.transition("animate-shake")
}
>
<span class="sr-only">
{gettext("Copy album MusicBrainz ID to clipboard")}
</span>
<.icon
name="hero-clipboard-document"
class="h-5 w-5"
aria-hidden="true"
data-slot="icon"
/>
</button>
</dd>
</div>
<div class="flex gap-2 w-full mt-2">
<dt>{gettext("Artist ID:")}</dt>
<dd class="font-mono">
<code id={"tooltip-track-artist-#{track.scrobbled_at_uts}"}>
{track.artist.musicbrainz_id || gettext("Unknown")}
</code>
<button
:if={track.artist.musicbrainz_id not in ["", nil]}
phx-click={
JS.dispatch("music_library:clipcopy",
to: "#tooltip-track-artist-#{track.scrobbled_at_uts}"
)
|> JS.transition("animate-shake")
}
>
<span class="sr-only">
{gettext("Copy artist MusicBrainz ID to clipboard")}
</span>
<.icon
name="hero-clipboard-document"
class="h-5 w-5"
aria-hidden="true"
data-slot="icon"
/>
</button>
</dd>
</div>
</dl>
</:content>
</.tooltip>
<.track_metadata_tooltip track={track} />
</div>
</div>
priv/gettext/default.pot
+7 -2
View File
@@ -836,6 +836,7 @@ msgid "Discogs data"
msgstr ""
#: lib/music_library_web/components/record_components.ex
#: lib/music_library_web/components/scrobble_components.ex
#: lib/music_library_web/live/stats_live/index.html.heex
#, elixir-autogen, elixir-format
msgid "Unknown"
@@ -923,32 +924,36 @@ msgstr ""
msgid "All time"
msgstr ""
#: lib/music_library_web/components/scrobble_components.ex
#: lib/music_library_web/live/stats_live/index.html.heex
#, elixir-autogen, elixir-format
msgid "Album ID:"
msgstr ""
#: lib/music_library_web/components/scrobble_components.ex
#: lib/music_library_web/live/stats_live/index.html.heex
#, elixir-autogen, elixir-format
msgid "Artist ID:"
msgstr ""
#: lib/music_library_web/components/scrobble_components.ex
#: lib/music_library_web/live/stats_live/index.html.heex
#, elixir-autogen, elixir-format
msgid "Copy album MusicBrainz ID to clipboard"
msgstr ""
#: lib/music_library_web/components/scrobble_components.ex
#: lib/music_library_web/live/stats_live/index.html.heex
#, elixir-autogen, elixir-format
msgid "Copy artist MusicBrainz ID to clipboard"
msgstr ""
#: lib/music_library_web/live/stats_live/index.html.heex
#: lib/music_library_web/components/scrobble_components.ex
#, elixir-autogen, elixir-format
msgid "Copy track MusicBrainz ID to clipboard"
msgstr ""
#: lib/music_library_web/live/stats_live/index.html.heex
#: lib/music_library_web/components/scrobble_components.ex
#, elixir-autogen, elixir-format
msgid "Track ID:"
msgstr ""
priv/gettext/en/LC_MESSAGES/default.po
+7 -2
View File
@@ -836,6 +836,7 @@ msgid "Discogs data"
msgstr ""
#: lib/music_library_web/components/record_components.ex
#: lib/music_library_web/components/scrobble_components.ex
#: lib/music_library_web/live/stats_live/index.html.heex
#, elixir-autogen, elixir-format
msgid "Unknown"
@@ -923,32 +924,36 @@ msgstr ""
msgid "All time"
msgstr ""
#: lib/music_library_web/components/scrobble_components.ex
#: lib/music_library_web/live/stats_live/index.html.heex
#, elixir-autogen, elixir-format, fuzzy
msgid "Album ID:"
msgstr ""
#: lib/music_library_web/components/scrobble_components.ex
#: lib/music_library_web/live/stats_live/index.html.heex
#, elixir-autogen, elixir-format
msgid "Artist ID:"
msgstr ""
#: lib/music_library_web/components/scrobble_components.ex
#: lib/music_library_web/live/stats_live/index.html.heex
#, elixir-autogen, elixir-format, fuzzy
msgid "Copy album MusicBrainz ID to clipboard"
msgstr ""
#: lib/music_library_web/components/scrobble_components.ex
#: lib/music_library_web/live/stats_live/index.html.heex
#, elixir-autogen, elixir-format, fuzzy
msgid "Copy artist MusicBrainz ID to clipboard"
msgstr ""
#: lib/music_library_web/live/stats_live/index.html.heex
#: lib/music_library_web/components/scrobble_components.ex
#, elixir-autogen, elixir-format, fuzzy
msgid "Copy track MusicBrainz ID to clipboard"
msgstr ""
#: lib/music_library_web/live/stats_live/index.html.heex
#: lib/music_library_web/components/scrobble_components.ex
#, elixir-autogen, elixir-format
msgid "Track ID:"
msgstr ""