Use :if attributes and proper translations
This commit is contained in:
Claudio Ortolina
@@ -1,245 +1,231 @@
|
||||
<Layouts.app flash={@flash} current_section={:scrobble} socket={@socket}>
|
||||
<div>
|
||||
<%= if @loading do %>
|
||||
<div class="text-center py-8">
|
||||
<.icon name="hero-arrow-path" class="h-8 w-8 animate-spin mx-auto text-gray-400" />
|
||||
<p class="text-gray-600 dark:text-gray-400 mt-2">Loading release details...</p>
|
||||
</div>
|
||||
<% else %>
|
||||
<div class="space-y-6">
|
||||
<div class="flex items-center gap-4">
|
||||
<.link navigate={~p"/scrobble"} class="flex-shrink-0">
|
||||
<.button variant="ghost" size="sm">
|
||||
<.icon name="hero-arrow-left" class="h-4 w-4 mr-2" /> Back to Search
|
||||
</.button>
|
||||
</.link>
|
||||
<div :if={@loading} class="text-center py-8">
|
||||
<.icon name="hero-arrow-path" class="h-8 w-8 animate-spin mx-auto text-gray-400" />
|
||||
<p class="text-gray-600 dark:text-gray-400 mt-2">{gettext("Loading release details...")}</p>
|
||||
</div>
|
||||
<div :if={not @loading} class="space-y-6">
|
||||
<div class="flex items-center gap-4">
|
||||
<.link navigate={~p"/scrobble"} class="flex-shrink-0">
|
||||
<.button variant="ghost" size="sm">
|
||||
<.icon name="hero-arrow-left" class="h-4 w-4 mr-2" /> {gettext("Back to Search")}
|
||||
</.button>
|
||||
</.link>
|
||||
|
||||
<div class="min-w-0 flex-1">
|
||||
<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">
|
||||
<%= if @release.artists != [] do %>
|
||||
by {@release.artists |> Enum.map(& &1.name) |> Enum.join(", ")}
|
||||
<% end %>
|
||||
<%= if @release.date do %>
|
||||
{@release.date}
|
||||
<% end %>
|
||||
<div class="min-w-0 flex-1">
|
||||
<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>
|
||||
</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>
|
||||
|
||||
<%= if not @can_scrobble do %>
|
||||
<div 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">
|
||||
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>
|
||||
<% end %>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
<div class="lg:col-span-2">
|
||||
<div class="bg-white dark:bg-zinc-800 shadow rounded-lg">
|
||||
<div class="p-6">
|
||||
<h3 class="text-lg font-semibold mb-4">Release Information</h3>
|
||||
<div class="flex gap-6">
|
||||
<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">
|
||||
<%= if @release.date do %>
|
||||
<div>
|
||||
<span class="font-medium text-gray-600 dark:text-gray-400">
|
||||
Release Date:
|
||||
</span>
|
||||
<br />{@release.date}
|
||||
</div>
|
||||
<% end %>
|
||||
<%= if @release.country do %>
|
||||
<div>
|
||||
<span class="font-medium text-gray-600 dark:text-gray-400">
|
||||
Country:
|
||||
</span>
|
||||
<br />{@release.country}
|
||||
</div>
|
||||
<% end %>
|
||||
<%= if @release.barcode do %>
|
||||
<div>
|
||||
<span class="font-medium text-gray-600 dark:text-gray-400">
|
||||
Barcode:
|
||||
</span>
|
||||
<br />{@release.barcode}
|
||||
</div>
|
||||
<% end %>
|
||||
<%= if @release.catalog_number do %>
|
||||
<div>
|
||||
<span class="font-medium text-gray-600 dark:text-gray-400">
|
||||
Catalog Number:
|
||||
</span>
|
||||
<br />{@release.catalog_number}
|
||||
</div>
|
||||
<% end %>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
<div class="lg:col-span-2">
|
||||
<div class="bg-white dark:bg-zinc-800 shadow rounded-lg">
|
||||
<div class="p-6">
|
||||
<h3 class="text-lg font-semibold mb-4">{gettext("Release Information")}</h3>
|
||||
<div class="flex gap-6">
|
||||
<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>
|
||||
|
||||
<%= if @release.media != [] do %>
|
||||
<div class="bg-white dark:bg-zinc-800 shadow rounded-lg mt-6">
|
||||
<div class="p-6">
|
||||
<h3 class="text-lg font-semibold mb-4">Tracks</h3>
|
||||
<div class="space-y-6">
|
||||
<%= for medium <- @release.media do %>
|
||||
<div class="space-y-3">
|
||||
<div class="flex justify-between items-center">
|
||||
<h4 class="font-medium">
|
||||
<%= if length(@release.media) > 1 do %>
|
||||
Medium {medium.number}
|
||||
<%= if medium.title do %>
|
||||
- {medium.title}
|
||||
<% end %>
|
||||
<%= if medium.format do %>
|
||||
({medium.format})
|
||||
<% end %>
|
||||
<% else %>
|
||||
Tracks
|
||||
<%= if medium.format do %>
|
||||
({medium.format})
|
||||
<% end %>
|
||||
<% end %>
|
||||
</h4>
|
||||
<%= if @can_scrobble do %>
|
||||
<.button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
phx-click="scrobble_medium"
|
||||
phx-value-medium_number={medium.number}
|
||||
>
|
||||
<.icon name="hero-play" class="h-3 w-3 mr-1" /> Scrobble Medium
|
||||
</.button>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<div class="space-y-1">
|
||||
<%= for track <- medium.tracks do %>
|
||||
<div class="flex justify-between items-center py-2 px-3 bg-gray-50 dark:bg-gray-800 rounded">
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="text-xs text-gray-500 dark:text-gray-400 w-6 text-right">
|
||||
{track.position}
|
||||
</span>
|
||||
<div class="min-w-0 flex-1">
|
||||
<p class="font-medium text-sm text-gray-900 dark:text-gray-100 truncate">
|
||||
{track.title}
|
||||
</p>
|
||||
<%= if track.artists != [] and track.artists != @release.artists do %>
|
||||
<p class="text-xs text-gray-600 dark:text-gray-400 truncate">
|
||||
{track.artists |> Enum.map(& &1.name) |> Enum.join(", ")}
|
||||
</p>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
<%= if track.length do %>
|
||||
<span class="text-xs text-gray-500 dark:text-gray-400 font-mono">
|
||||
{format_duration(track.length)}
|
||||
</span>
|
||||
<% end %>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<%= if @can_scrobble do %>
|
||||
<div class="lg:col-span-1">
|
||||
<div class="bg-white dark:bg-zinc-800 shadow rounded-lg sticky top-6">
|
||||
<div class="p-6">
|
||||
<h3 class="text-lg font-semibold mb-4">Scrobble Options</h3>
|
||||
|
||||
<.form
|
||||
for={%{}}
|
||||
as={:scrobble}
|
||||
phx-change="update_scrobble_form"
|
||||
class="space-y-4"
|
||||
>
|
||||
<.select
|
||||
name="type"
|
||||
label="Scrobble timing"
|
||||
value={@scrobble_form["type"]}
|
||||
options={[
|
||||
{"Just finished listening", "finished_at"},
|
||||
{"Started listening at", "started_at"}
|
||||
]}
|
||||
/>
|
||||
|
||||
<%= if @scrobble_form["type"] == "finished_at" do %>
|
||||
<div class="space-y-2">
|
||||
<.input
|
||||
type="date"
|
||||
name="finished_at_date"
|
||||
label="Finished Date"
|
||||
value={@scrobble_form["finished_at_date"]}
|
||||
/>
|
||||
<.input
|
||||
type="time"
|
||||
name="finished_at_time"
|
||||
label="Finished Time"
|
||||
value={@scrobble_form["finished_at_time"]}
|
||||
/>
|
||||
</div>
|
||||
<% else %>
|
||||
<div class="space-y-2">
|
||||
<.input
|
||||
type="date"
|
||||
name="started_at_date"
|
||||
label="Started Date"
|
||||
value={@scrobble_form["started_at_date"]}
|
||||
/>
|
||||
<.input
|
||||
type="time"
|
||||
name="started_at_time"
|
||||
label="Started Time"
|
||||
value={@scrobble_form["started_at_time"]}
|
||||
/>
|
||||
</div>
|
||||
<% end %>
|
||||
</.form>
|
||||
|
||||
<div class="space-y-3 mt-6">
|
||||
<div :if={@release.media != []} class="bg-white dark:bg-zinc-800 shadow rounded-lg mt-6">
|
||||
<div class="p-6">
|
||||
<h3 class="text-lg font-semibold mb-4">{gettext("Tracks")}</h3>
|
||||
<div class="space-y-6">
|
||||
<div :for={medium <- @release.media} class="space-y-3">
|
||||
<div class="flex justify-between items-center">
|
||||
<h4 :if={length(@release.media) > 1} class="font-medium">
|
||||
Medium {medium.number}
|
||||
<span :if={medium.title}>
|
||||
- {medium.title}
|
||||
</span>
|
||||
<span :if={medium.format}>
|
||||
({medium.format})
|
||||
</span>
|
||||
</h4>
|
||||
<h4 :if={length(@release.media) == 1} class="font-medium">
|
||||
{gettext("Tracks")}
|
||||
<span :if={medium.format}>
|
||||
({medium.format})
|
||||
</span>
|
||||
</h4>
|
||||
<.button
|
||||
phx-click="scrobble_release"
|
||||
class="w-full"
|
||||
size="lg"
|
||||
:if={@can_scrobble}
|
||||
size="sm"
|
||||
variant="outline"
|
||||
phx-click="scrobble_medium"
|
||||
phx-value-medium_number={medium.number}
|
||||
>
|
||||
<.icon name="hero-play" class="h-4 w-4 mr-2" /> Scrobble Entire Release
|
||||
<.icon name="hero-play" class="h-3 w-3 mr-1" /> {gettext("Scrobble Medium")}
|
||||
</.button>
|
||||
</div>
|
||||
|
||||
<p class="text-xs text-gray-500 dark:text-gray-400 text-center">
|
||||
This will scrobble all tracks from all media in sequence
|
||||
</p>
|
||||
<div class="space-y-1">
|
||||
<div
|
||||
:for={track <- medium.tracks}
|
||||
class="flex justify-between items-center py-2 px-3 bg-gray-50 dark:bg-gray-800 rounded"
|
||||
>
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="text-xs text-gray-500 dark:text-gray-400 w-6 text-right">
|
||||
{track.position}
|
||||
</span>
|
||||
<div class="min-w-0 flex-1">
|
||||
<p class="font-medium text-sm text-gray-900 dark:text-gray-100 truncate">
|
||||
{track.title}
|
||||
</p>
|
||||
<p
|
||||
:if={track.artists != [] and track.artists != @release.artists}
|
||||
class="text-xs text-gray-600 dark:text-gray-400 truncate"
|
||||
>
|
||||
{track.artists |> Enum.map(& &1.name) |> Enum.join(", ")}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
:if={track.length}
|
||||
class="text-xs text-gray-500 dark:text-gray-400 font-mono"
|
||||
>
|
||||
{format_duration(track.length)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div :if={@can_scrobble} class="lg:col-span-1">
|
||||
<div class="bg-white dark:bg-zinc-800 shadow rounded-lg sticky top-6">
|
||||
<div class="p-6">
|
||||
<h3 class="text-lg font-semibold mb-4">{gettext("Scrobble Options")}</h3>
|
||||
|
||||
<.form
|
||||
for={%{}}
|
||||
as={:scrobble}
|
||||
phx-change="update_scrobble_form"
|
||||
class="space-y-4"
|
||||
>
|
||||
<.select
|
||||
name="type"
|
||||
label={gettext("Scrobble timing")}
|
||||
value={@scrobble_form["type"]}
|
||||
options={[
|
||||
{gettext("Just finished listening"), "finished_at"},
|
||||
{gettext("Started listening at"), "started_at"}
|
||||
]}
|
||||
/>
|
||||
|
||||
<div :if={@scrobble_form["type"] == "finished_at"} class="space-y-2">
|
||||
<.input
|
||||
type="date"
|
||||
name="finished_at_date"
|
||||
label={gettext("Finished Date")}
|
||||
value={@scrobble_form["finished_at_date"]}
|
||||
/>
|
||||
<.input
|
||||
type="time"
|
||||
name="finished_at_time"
|
||||
label={gettext("Finished Time")}
|
||||
value={@scrobble_form["finished_at_time"]}
|
||||
/>
|
||||
</div>
|
||||
<div :if={@scrobble_form["type"] != "finished_at"} class="space-y-2">
|
||||
<.input
|
||||
type="date"
|
||||
name="started_at_date"
|
||||
label={gettext("Started Date")}
|
||||
value={@scrobble_form["started_at_date"]}
|
||||
/>
|
||||
<.input
|
||||
type="time"
|
||||
name="started_at_time"
|
||||
label={gettext("Started Time")}
|
||||
value={@scrobble_form["started_at_time"]}
|
||||
/>
|
||||
</div>
|
||||
</.form>
|
||||
|
||||
<div class="space-y-3 mt-6">
|
||||
<.button
|
||||
phx-click="scrobble_release"
|
||||
class="w-full"
|
||||
size="lg"
|
||||
>
|
||||
<.icon name="hero-play" class="h-4 w-4 mr-2" /> {gettext(
|
||||
"Scrobble Entire Release"
|
||||
)}
|
||||
</.button>
|
||||
|
||||
<p class="text-xs text-gray-500 dark:text-gray-400 text-center">
|
||||
{gettext("This will scrobble all tracks from all media in sequence")}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
</Layouts.app>
|
||||
|
||||
Reference in New Issue
Block a user