Files
music_library/lib/music_library_web/live/scrobble_live/show.html.heex
T
2026-02-10 10:48:38 +00:00

94 lines
3.3 KiB
Plaintext

<Layouts.app flash={@flash} current_section={:scrobble} socket={@socket}>
<div>
<.alert
:if={not @can_scrobble}
color="warning"
title={gettext("Last.fm not connected")}
hide_close
>
{gettext(
"You need to connect your Last.fm account to scrobble. Please set up your Last.fm session key in the settings."
)}
</.alert>
<div class="mt-2 mb-4">
<.button variant="ghost" size="sm" navigate={~p"/scrobble"}>
<.icon name="hero-arrow-left" class="icon" aria-hidden="true" data-slot="icon" />
{gettext("Back to search")}
</.button>
</div>
<div class="md:flex mt-4 px-4 md:gap-x-4">
<div class="drop-shadow-sm md:max-w-152 lg:min-w-152">
<img
src={MusicBrainz.Release.thumb_url(@release)}
alt={"Cover art for #{@release.title}"}
class="w-full rounded-lg drop-shadow-sm"
loading="lazy"
onerror={"this.src = '" <> ~p"/images/cover-not-found.png" <> "';"}
/>
</div>
<div class="grow">
<div class="mt-4 md:mt-0 flex justify-between items-center">
<h1 :if={@release.artists != []} class="text-base font-medium leading-6 text-zinc-700">
{@release.artists |> Enum.map(& &1.name) |> Enum.join(", ")}
</h1>
</div>
<h2 class="mt-1 flex font-semibold text-lg md:text-2xl text-zinc-700 dark:text-zinc-300 text-wrap">
{@release.title}
</h2>
<div class="mt-4 md:mt-8">
<dl class="divide-y divide-zinc-100 dark:divide-slate-300/30">
<.dl_row :if={@release.date} label={gettext("Release Date")}>
{@release.date}
</.dl_row>
<.dl_row :if={@release.country} label={gettext("Country")}>
{country_label(@release.country)} {@release.country}
</.dl_row>
<.dl_row :if={@release.barcode} label={gettext("Barcode")}>
<code>{@release.barcode}</code>
</.dl_row>
<.dl_row :if={@release.catalog_number} label={gettext("Catalog Number")}>
<code>{@release.catalog_number}</code>
</.dl_row>
<.dl_row :if={@release.media != []} label={gettext("Media")}>
{ngettext("1 disc", "%{count} discs", MusicBrainz.Release.media_count(@release))}
</.dl_row>
</dl>
</div>
<div :if={@release.media != []} class="mt-6 space-y-4">
<div class="flex justify-between items-center">
<h3 class="text-lg font-semibold">{gettext("Tracks")}</h3>
<.button
:if={@can_scrobble}
phx-click={
if MapSet.size(@selected_tracks) > 0,
do: "scrobble_selected_tracks",
else: "scrobble_release"
}
size="sm"
>
{scrobble_button_label(@selected_tracks)}
</.button>
</div>
<.medium
:for={medium <- @release.media}
can_scrobble?={@can_scrobble}
already_scrobbled={false}
medium={medium}
release_artists={@release.artists}
selected_tracks={@selected_tracks}
media_count={MusicBrainz.Release.media_count(@release)}
myself={nil}
/>
</div>
</div>
</div>
</div>
</Layouts.app>