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/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>