Files
music_library/lib/music_library_web/live/scrobble_live/show.html.heex
T
2025-11-11 08:15:38 +00:00

109 lines
3.8 KiB
Plaintext

<Layouts.app flash={@flash} current_section={:scrobble} socket={@socket}>
<div>
<div class="space-y-6">
<div class="flex items-center gap-4">
<div class="min-w-0 flex-1"></div>
</div>
<div
:if={not @can_scrobble}
class="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-4"
>
<div class="flex">
<.icon name="hero-exclamation-triangle" class="h-5 w-5 text-yellow-400" />
<div class="ml-3">
<p class="text-sm text-yellow-800 dark:text-yellow-200">
{gettext(
"You need to connect your Last.fm account to scrobble. Please set up your Last.fm session key in the settings."
)}
</p>
</div>
</div>
</div>
<div class="bg-white dark:bg-zinc-800 shadow rounded-lg">
<div class="p-6">
<h1 class="text-base lg:text-2xl text-zinc-900 dark:text-zinc-200 font-semibold">
{@release.title}
</h1>
<p class="text-sm text-gray-600 dark:text-gray-400 mt-1">
<span :if={@release.artists != []}>
by {@release.artists |> Enum.map(& &1.name) |> Enum.join(", ")}
</span>
<span :if={@release.date}>
{@release.date}
</span>
</p>
<div class="flex gap-6 mt-4">
<div class="flex-shrink-0">
<img
src={MusicBrainz.Release.thumb_url(@release)}
alt={"Cover art for #{@release.title}"}
class="w-32 h-32 object-cover rounded-lg shadow-sm"
loading="lazy"
/>
</div>
<div class="flex-1">
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4 text-sm">
<div :if={@release.date}>
<span class="font-medium text-gray-600 dark:text-gray-400">
{gettext("Release Date:")}
</span>
<br />{@release.date}
</div>
<div :if={@release.country}>
<span class="font-medium text-gray-600 dark:text-gray-400">
{gettext("Country:")}
</span>
<br />{@release.country}
</div>
<div :if={@release.barcode}>
<span class="font-medium text-gray-600 dark:text-gray-400">
{gettext("Barcode:")}
</span>
<br />{@release.barcode}
</div>
<div :if={@release.catalog_number}>
<span class="font-medium text-gray-600 dark:text-gray-400">
{gettext("Catalog Number:")}
</span>
<br />{@release.catalog_number}
</div>
</div>
</div>
</div>
</div>
</div>
<div :if={@release.media != []} class="mt-6 space-y-4">
<div class="flex justify-between items-center">
<h3 class="text-lg font-semibold mb-4">{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>
</Layouts.app>