Use tabs for scrobble activity toggle
This commit is contained in:
Claudio Ortolina
@@ -227,7 +227,7 @@ defmodule MusicLibraryWeb.StatsLive.Index do
|
||||
|> assign_top_albums()
|
||||
|> assign_top_artists()
|
||||
|> assign(
|
||||
scrobble_activity_mode: :albums,
|
||||
scrobble_activity_mode: "albums",
|
||||
latest_record: latest_record,
|
||||
page_title: gettext("Stats"),
|
||||
current_section: :stats,
|
||||
@@ -274,7 +274,7 @@ defmodule MusicLibraryWeb.StatsLive.Index do
|
||||
{:noreply,
|
||||
socket
|
||||
|> assign_scrobble_activity(recent_tracks)
|
||||
|> assign(scrobble_activity_mode: String.to_existing_atom(mode))}
|
||||
|> assign(scrobble_activity_mode: mode)}
|
||||
end
|
||||
|
||||
def handle_info(%{track_count: 0}, socket) do
|
||||
|
||||
@@ -146,401 +146,409 @@
|
||||
</h1>
|
||||
<.refresh_lastfm_feed_button />
|
||||
</div>
|
||||
<%!-- TODO: replace with OSS version --%>
|
||||
<span class="mt-5 isolate inline-flex rounded-md shadow-xs">
|
||||
<.button
|
||||
phx-click={JS.push("set_scrobble_activity_mode", value: %{"mode" => :albums})}
|
||||
class={[
|
||||
"rounded-l-md rounded-r-none",
|
||||
@scrobble_activity_mode == :albums && "!bg-zinc-100 dark:!bg-zinc-700"
|
||||
]}
|
||||
>
|
||||
{gettext("Albums")}
|
||||
</.button>
|
||||
<.button
|
||||
phx-click={JS.push("set_scrobble_activity_mode", value: %{"mode" => :tracks})}
|
||||
class={[
|
||||
"-ml-px rounded-r-md rounded-l-none",
|
||||
@scrobble_activity_mode == :tracks && "!bg-zinc-100 dark:!bg-zinc-700"
|
||||
]}
|
||||
>
|
||||
{gettext("Tracks")}
|
||||
</.button>
|
||||
</span>
|
||||
<ul
|
||||
:if={@scrobble_activity_mode == :albums}
|
||||
id="scrobble-activity-albums"
|
||||
role="list"
|
||||
class="mt-5 rounded-md px-4 py-5 shadow-sm"
|
||||
phx-update="stream"
|
||||
>
|
||||
<li :for={{id, album} <- @streams.recent_albums} id={id} class="group">
|
||||
<div class="relative pb-8 group-last:pb-0">
|
||||
<span
|
||||
class="group-last:hidden absolute left-6 top-6 -ml-px h-full w-0.5 bg-zinc-200"
|
||||
aria-hidden="true"
|
||||
>
|
||||
</span>
|
||||
<div class="relative flex space-x-3 items-center justify-between">
|
||||
<div class="flex min-w-0 justify-between space-x-4 items-center">
|
||||
<img
|
||||
class="h-12 w-12 rounded-md shadow-sm"
|
||||
src={album.cover_url}
|
||||
alt={album.metadata.title}
|
||||
/>
|
||||
<div>
|
||||
<p
|
||||
:if={album.artist.musicbrainz_id not in @artist_ids}
|
||||
class="font-semibold text-sm block text-zinc-500 dark:text-zinc-400"
|
||||
<.tabs id="scrobble-activity" class="mt-4">
|
||||
<.tabs_list active_tab={@scrobble_activity_mode} variant="segmented" class="w-48">
|
||||
<:tab
|
||||
name="albums"
|
||||
phx-click={JS.push("set_scrobble_activity_mode", value: %{mode: "albums"})}
|
||||
>
|
||||
{gettext("Albums")}
|
||||
</:tab>
|
||||
<:tab
|
||||
name="tracks"
|
||||
phx-click={JS.push("set_scrobble_activity_mode", value: %{mode: "tracks"})}
|
||||
>
|
||||
{gettext("Tracks")}
|
||||
</:tab>
|
||||
</.tabs_list>
|
||||
|
||||
<.tabs_panel name="albums" active={@scrobble_activity_mode == "albums"}>
|
||||
<ul
|
||||
id="scrobble-activity-albums"
|
||||
role="list"
|
||||
class="rounded-md px-4 py-5 shadow-sm"
|
||||
phx-update="stream"
|
||||
>
|
||||
<li :for={{id, album} <- @streams.recent_albums} id={id} class="group">
|
||||
<div class="relative pb-8 group-last:pb-0">
|
||||
<span
|
||||
class="group-last:hidden absolute left-6 top-6 -ml-px h-full w-0.5 bg-zinc-200"
|
||||
aria-hidden="true"
|
||||
>
|
||||
</span>
|
||||
<div class="relative flex space-x-3 items-center justify-between">
|
||||
<div class="flex min-w-0 justify-between space-x-4 items-center">
|
||||
<img
|
||||
class="h-12 w-12 rounded-md shadow-sm"
|
||||
src={album.cover_url}
|
||||
alt={album.metadata.title}
|
||||
/>
|
||||
<div>
|
||||
<p
|
||||
:if={album.artist.musicbrainz_id not in @artist_ids}
|
||||
class="font-semibold text-sm block text-zinc-500 dark:text-zinc-400"
|
||||
>
|
||||
{album.artist.name}
|
||||
</p>
|
||||
<.link
|
||||
:if={album.artist.musicbrainz_id in @artist_ids}
|
||||
class="font-semibold text-sm block text-zinc-700 hover:text-zinc-500 dark:text-zinc-400 dark:hover:text-zinc-300"
|
||||
navigate={~p"/artists/#{album.artist.musicbrainz_id}"}
|
||||
>
|
||||
{album.artist.name}
|
||||
</.link>
|
||||
<p class="font-semibold text-sm md:text-base text-zinc-700 dark:text-zinc-300">
|
||||
{album.metadata.title}
|
||||
</p>
|
||||
<time
|
||||
datetime={format_scrobbled_at_uts(album.scrobbled_at_uts)}
|
||||
class="whitespace-nowrap text-right text-xs sm:text-sm text-zinc-500 dark:text-zinc-400"
|
||||
>
|
||||
{album.scrobbled_at_label}
|
||||
<.tooltip>
|
||||
<.icon
|
||||
name="hero-information-circle"
|
||||
class="-mt-1 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("Album ID:")}</dt>
|
||||
<dd class="font-mono">
|
||||
<code id={"tooltip-album-#{album.scrobbled_at_uts}"}>
|
||||
{album.metadata.musicbrainz_id || gettext("Unknown")}
|
||||
</code>
|
||||
<button
|
||||
: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="-mt-1 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-artist-#{album.scrobbled_at_uts}"}>
|
||||
{album.artist.musicbrainz_id || gettext("Unknown")}
|
||||
</code>
|
||||
<button
|
||||
: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="-mt-1 h-5 w-5"
|
||||
aria-hidden="true"
|
||||
data-slot="icon"
|
||||
/>
|
||||
</button>
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</:content>
|
||||
</.tooltip>
|
||||
</time>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-1 flex-col text-right">
|
||||
<.badge :if={album.metadata.musicbrainz_id == ""}>
|
||||
{gettext("No MB ID")}
|
||||
</.badge>
|
||||
<.link
|
||||
:if={
|
||||
record_id =
|
||||
tracked_record?(@collected_releases, album.metadata.musicbrainz_id)
|
||||
}
|
||||
navigate={~p"/collection/#{record_id}"}
|
||||
>
|
||||
<.badge color="green">
|
||||
{gettext("Collected")}
|
||||
</.badge>
|
||||
</.link>
|
||||
<.link
|
||||
:if={
|
||||
record_id =
|
||||
tracked_record?(@wishlisted_releases, album.metadata.musicbrainz_id)
|
||||
}
|
||||
navigate={~p"/wishlist/#{record_id}"}
|
||||
>
|
||||
<.badge color="yellow">
|
||||
{gettext("Wishlisted")}
|
||||
</.badge>
|
||||
</.link>
|
||||
</div>
|
||||
|
||||
<.dropdown
|
||||
:if={
|
||||
album.metadata.musicbrainz_id !== "" and
|
||||
!tracked_record?(
|
||||
@collected_releases ++ @wishlisted_releases,
|
||||
album.metadata.musicbrainz_id
|
||||
)
|
||||
}
|
||||
id={"actions-#{album.scrobbled_at_uts}-albums"}
|
||||
placement="bottom-end"
|
||||
>
|
||||
{album.artist.name}
|
||||
</p>
|
||||
<.link
|
||||
:if={album.artist.musicbrainz_id in @artist_ids}
|
||||
class="font-semibold text-sm block text-zinc-700 hover:text-zinc-500 dark:text-zinc-400 dark:hover:text-zinc-300"
|
||||
navigate={~p"/artists/#{album.artist.musicbrainz_id}"}
|
||||
>
|
||||
{album.artist.name}
|
||||
</.link>
|
||||
<p class="font-semibold text-sm md:text-base text-zinc-700 dark:text-zinc-300">
|
||||
{album.metadata.title}
|
||||
</p>
|
||||
<time
|
||||
datetime={format_scrobbled_at_uts(album.scrobbled_at_uts)}
|
||||
class="whitespace-nowrap text-right text-xs sm:text-sm text-zinc-500 dark:text-zinc-400"
|
||||
>
|
||||
{album.scrobbled_at_label}
|
||||
<.tooltip>
|
||||
<:toggle>
|
||||
<span class="sr-only">{gettext("Choose which format to import")}</span>
|
||||
<.icon
|
||||
name="hero-information-circle"
|
||||
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"
|
||||
/>
|
||||
<:content>
|
||||
<dl class="p-2">
|
||||
<div class="flex gap-2 w-full">
|
||||
<dt>{gettext("Album ID:")}</dt>
|
||||
<dd class="font-mono">
|
||||
<code id={"tooltip-album-#{album.scrobbled_at_uts}"}>
|
||||
{album.metadata.musicbrainz_id || gettext("Unknown")}
|
||||
</code>
|
||||
<button
|
||||
: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="-mt-1 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-artist-#{album.scrobbled_at_uts}"}>
|
||||
{album.artist.musicbrainz_id || gettext("Unknown")}
|
||||
</code>
|
||||
<button
|
||||
: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="-mt-1 h-5 w-5"
|
||||
aria-hidden="true"
|
||||
data-slot="icon"
|
||||
/>
|
||||
</button>
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</:content>
|
||||
</.tooltip>
|
||||
</time>
|
||||
</: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 class="flex gap-1 flex-col text-right">
|
||||
<.badge :if={album.metadata.musicbrainz_id == ""}>
|
||||
{gettext("No MB ID")}
|
||||
</.badge>
|
||||
<.link
|
||||
:if={
|
||||
record_id = tracked_record?(@collected_releases, album.metadata.musicbrainz_id)
|
||||
}
|
||||
navigate={~p"/collection/#{record_id}"}
|
||||
</li>
|
||||
</ul>
|
||||
</.tabs_panel>
|
||||
<.tabs_panel name="tracks" active={@scrobble_activity_mode == "tracks"}>
|
||||
<ul
|
||||
id="scrobble-activity-tracks"
|
||||
role="list"
|
||||
class="rounded-md px-4 py-5 shadow-sm"
|
||||
phx-update="stream"
|
||||
>
|
||||
<li :for={{id, track} <- @streams.recent_tracks} id={id} class="group">
|
||||
<div class="relative pb-8 group-last:pb-0">
|
||||
<span
|
||||
class="group-last:hidden absolute left-6 top-6 -ml-px h-full w-0.5 bg-zinc-200"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<.badge color="green">
|
||||
{gettext("Collected")}
|
||||
</.badge>
|
||||
</.link>
|
||||
<.link
|
||||
:if={
|
||||
record_id = tracked_record?(@wishlisted_releases, album.metadata.musicbrainz_id)
|
||||
}
|
||||
navigate={~p"/wishlist/#{record_id}"}
|
||||
>
|
||||
<.badge color="yellow">
|
||||
{gettext("Wishlisted")}
|
||||
</.badge>
|
||||
</.link>
|
||||
</div>
|
||||
|
||||
<.dropdown
|
||||
:if={
|
||||
album.metadata.musicbrainz_id !== "" and
|
||||
!tracked_record?(
|
||||
@collected_releases ++ @wishlisted_releases,
|
||||
album.metadata.musicbrainz_id
|
||||
)
|
||||
}
|
||||
id={"actions-#{album.scrobbled_at_uts}-albums"}
|
||||
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-#{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>
|
||||
</li>
|
||||
</ul>
|
||||
<ul
|
||||
:if={@scrobble_activity_mode == :tracks}
|
||||
id="scrobble-activity-tracks"
|
||||
role="list"
|
||||
class="mt-5 rounded-md px-4 py-5 shadow-sm"
|
||||
phx-update="stream"
|
||||
>
|
||||
<li :for={{id, track} <- @streams.recent_tracks} id={id} class="group">
|
||||
<div class="relative pb-8 group-last:pb-0">
|
||||
<span
|
||||
class="group-last:hidden absolute left-6 top-6 -ml-px h-full w-0.5 bg-zinc-200"
|
||||
aria-hidden="true"
|
||||
>
|
||||
</span>
|
||||
<div class="relative flex space-x-3 items-center justify-between">
|
||||
<div class="flex min-w-0 justify-between space-x-4 items-center">
|
||||
<img class="h-12 w-12 rounded-md shadow-sm" src={track.cover_url} alt={track.title} />
|
||||
<div>
|
||||
<p
|
||||
:if={track.artist.musicbrainz_id not in @artist_ids}
|
||||
class="font-semibold text-sm block text-zinc-500 dark:text-zinc-400"
|
||||
>
|
||||
{track.artist.name}
|
||||
</p>
|
||||
<.link
|
||||
:if={track.artist.musicbrainz_id in @artist_ids}
|
||||
class="font-semibold text-sm block text-zinc-700 hover:text-zinc-500 dark:text-zinc-400 dark:hover:text-zinc-300"
|
||||
navigate={~p"/artists/#{track.artist.musicbrainz_id}"}
|
||||
>
|
||||
{track.artist.name}
|
||||
</.link>
|
||||
<p class="font-semibold text-sm md:text-base text-zinc-700 dark:text-zinc-300">
|
||||
{track.title}
|
||||
</p>
|
||||
<p class="font-semibold text-sm text-zinc-500 dark:text-zinc-400">
|
||||
{track.album.title}
|
||||
</p>
|
||||
<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}
|
||||
</time>
|
||||
<.tooltip>
|
||||
<.icon
|
||||
name="hero-information-circle"
|
||||
class="-mt-1 h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer"
|
||||
aria-hidden="true"
|
||||
data-slot="icon"
|
||||
</span>
|
||||
<div class="relative flex space-x-3 items-center justify-between">
|
||||
<div class="flex min-w-0 justify-between space-x-4 items-center">
|
||||
<img
|
||||
class="h-12 w-12 rounded-md shadow-sm"
|
||||
src={track.cover_url}
|
||||
alt={track.title}
|
||||
/>
|
||||
<: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="-mt-1 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="-mt-1 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="-mt-1 h-5 w-5"
|
||||
aria-hidden="true"
|
||||
data-slot="icon"
|
||||
/>
|
||||
</button>
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</:content>
|
||||
</.tooltip>
|
||||
<div>
|
||||
<p
|
||||
:if={track.artist.musicbrainz_id not in @artist_ids}
|
||||
class="font-semibold text-sm block text-zinc-500 dark:text-zinc-400"
|
||||
>
|
||||
{track.artist.name}
|
||||
</p>
|
||||
<.link
|
||||
:if={track.artist.musicbrainz_id in @artist_ids}
|
||||
class="font-semibold text-sm block text-zinc-700 hover:text-zinc-500 dark:text-zinc-400 dark:hover:text-zinc-300"
|
||||
navigate={~p"/artists/#{track.artist.musicbrainz_id}"}
|
||||
>
|
||||
{track.artist.name}
|
||||
</.link>
|
||||
<p class="font-semibold text-sm md:text-base text-zinc-700 dark:text-zinc-300">
|
||||
{track.title}
|
||||
</p>
|
||||
<p class="font-semibold text-sm text-zinc-500 dark:text-zinc-400">
|
||||
{track.album.title}
|
||||
</p>
|
||||
<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}
|
||||
</time>
|
||||
<.tooltip>
|
||||
<.icon
|
||||
name="hero-information-circle"
|
||||
class="-mt-1 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="-mt-1 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="-mt-1 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="-mt-1 h-5 w-5"
|
||||
aria-hidden="true"
|
||||
data-slot="icon"
|
||||
/>
|
||||
</button>
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</:content>
|
||||
</.tooltip>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-1 flex-col text-right">
|
||||
<.badge :if={track.album.musicbrainz_id == ""}>
|
||||
{gettext("No MB ID")}
|
||||
</.badge>
|
||||
<.link
|
||||
:if={
|
||||
record_id = tracked_record?(@collected_releases, track.album.musicbrainz_id)
|
||||
}
|
||||
navigate={~p"/collection/#{record_id}"}
|
||||
>
|
||||
<.badge color="green">{gettext("Collected")}</.badge>
|
||||
</.link>
|
||||
<.link
|
||||
:if={
|
||||
record_id = tracked_record?(@wishlisted_releases, track.album.musicbrainz_id)
|
||||
}
|
||||
navigate={~p"/wishlist/#{record_id}"}
|
||||
>
|
||||
<.badge color="yellow">{gettext("Wishlisted")}</.badge>
|
||||
</.link>
|
||||
</div>
|
||||
|
||||
<.dropdown
|
||||
:if={
|
||||
track.album.musicbrainz_id !== "" and
|
||||
!tracked_record?(
|
||||
@collected_releases ++ @wishlisted_releases,
|
||||
track.album.musicbrainz_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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-1 flex-col text-right">
|
||||
<.badge :if={track.album.musicbrainz_id == ""}>
|
||||
{gettext("No MB ID")}
|
||||
</.badge>
|
||||
<.link
|
||||
:if={record_id = tracked_record?(@collected_releases, track.album.musicbrainz_id)}
|
||||
navigate={~p"/collection/#{record_id}"}
|
||||
>
|
||||
<.badge color="green">{gettext("Collected")}</.badge>
|
||||
</.link>
|
||||
<.link
|
||||
:if={record_id = tracked_record?(@wishlisted_releases, track.album.musicbrainz_id)}
|
||||
navigate={~p"/wishlist/#{record_id}"}
|
||||
>
|
||||
<.badge color="yellow">{gettext("Wishlisted")}</.badge>
|
||||
</.link>
|
||||
</div>
|
||||
|
||||
<.dropdown
|
||||
:if={
|
||||
track.album.musicbrainz_id !== "" and
|
||||
!tracked_record?(
|
||||
@collected_releases ++ @wishlisted_releases,
|
||||
track.album.musicbrainz_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>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</.tabs_panel>
|
||||
</.tabs>
|
||||
</div>
|
||||
|
||||
<div class="mt-5 grid grid-cols-1 lg:grid-cols-2 gap-5">
|
||||
|
||||
Reference in New Issue
Block a user