cloud/music_library
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Use :if attributes and proper translations

Browse Source
This commit is contained in:
Claudio Ortolina
2025-09-25 11:26:54 +03:00
parent c1627b0e56
commit 5631ecce81
3 changed files with 397 additions and 219 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/music_library_web/live/scrobble_live/show.html.heex
+70 -84
View File
@@ -1,16 +1,14 @@
<Layouts.app flash={@flash} current_section={:scrobble} socket={@socket}> <Layouts.app flash={@flash} current_section={:scrobble} socket={@socket}>
<div> <div>
<%= if @loading do %> <div :if={@loading} class="text-center py-8">
<div class="text-center py-8">
<.icon name="hero-arrow-path" class="h-8 w-8 animate-spin mx-auto text-gray-400" /> <.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> <p class="text-gray-600 dark:text-gray-400 mt-2">{gettext("Loading release details...")}</p>
</div> </div>
<% else %> <div :if={not @loading} class="space-y-6">
<div class="space-y-6">
<div class="flex items-center gap-4"> <div class="flex items-center gap-4">
<.link navigate={~p"/scrobble"} class="flex-shrink-0"> <.link navigate={~p"/scrobble"} class="flex-shrink-0">
<.button variant="ghost" size="sm"> <.button variant="ghost" size="sm">
<.icon name="hero-arrow-left" class="h-4 w-4 mr-2" /> Back to Search <.icon name="hero-arrow-left" class="h-4 w-4 mr-2" /> {gettext("Back to Search")}
</.button> </.button>
</.link> </.link>
@@ -19,34 +17,37 @@
{@release.title} {@release.title}
</h1> </h1>
<p class="text-sm text-gray-600 dark:text-gray-400 mt-1"> <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">
<%= if @release.artists != [] do %> <span :if={@release.artists != []}>
by {@release.artists |> Enum.map(& &1.name) |> Enum.join(", ")} by {@release.artists |> Enum.map(& &1.name) |> Enum.join(", ")}
<% end %> </span>
<%= if @release.date do %> <span :if={@release.date}>
{@release.date} {@release.date}
<% end %> </span>
</p> </p>
</div> </div>
</div> </div>
<%= if not @can_scrobble do %> <div
<div class="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-4"> :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"> <div class="flex">
<.icon name="hero-exclamation-triangle" class="h-5 w-5 text-yellow-400" /> <.icon name="hero-exclamation-triangle" class="h-5 w-5 text-yellow-400" />
<div class="ml-3"> <div class="ml-3">
<p class="text-sm text-yellow-800 dark:text-yellow-200"> <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. {gettext(
"You need to connect your Last.fm account to scrobble. Please set up your Last.fm session key in the settings."
)}
</p> </p>
</div> </div>
</div> </div>
</div> </div>
<% end %>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<div class="lg:col-span-2"> <div class="lg:col-span-2">
<div class="bg-white dark:bg-zinc-800 shadow rounded-lg"> <div class="bg-white dark:bg-zinc-800 shadow rounded-lg">
<div class="p-6"> <div class="p-6">
<h3 class="text-lg font-semibold mb-4">Release Information</h3> <h3 class="text-lg font-semibold mb-4">{gettext("Release Information")}</h3>
<div class="flex gap-6"> <div class="flex gap-6">
<div class="flex-shrink-0"> <div class="flex-shrink-0">
<img <img
@@ -58,83 +59,73 @@
</div> </div>
<div class="flex-1"> <div class="flex-1">
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4 text-sm"> <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 text-sm">
<%= if @release.date do %> <div :if={@release.date}>
<div>
<span class="font-medium text-gray-600 dark:text-gray-400"> <span class="font-medium text-gray-600 dark:text-gray-400">
Release Date: {gettext("Release Date:")}
</span> </span>
<br />{@release.date} <br />{@release.date}
</div> </div>
<% end %> <div :if={@release.country}>
<%= if @release.country do %>
<div>
<span class="font-medium text-gray-600 dark:text-gray-400"> <span class="font-medium text-gray-600 dark:text-gray-400">
Country: {gettext("Country:")}
</span> </span>
<br />{@release.country} <br />{@release.country}
</div> </div>
<% end %> <div :if={@release.barcode}>
<%= if @release.barcode do %>
<div>
<span class="font-medium text-gray-600 dark:text-gray-400"> <span class="font-medium text-gray-600 dark:text-gray-400">
Barcode: {gettext("Barcode:")}
</span> </span>
<br />{@release.barcode} <br />{@release.barcode}
</div> </div>
<% end %> <div :if={@release.catalog_number}>
<%= if @release.catalog_number do %>
<div>
<span class="font-medium text-gray-600 dark:text-gray-400"> <span class="font-medium text-gray-600 dark:text-gray-400">
Catalog Number: {gettext("Catalog Number:")}
</span> </span>
<br />{@release.catalog_number} <br />{@release.catalog_number}
</div> </div>
<% end %>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<%= if @release.media != [] do %> <div :if={@release.media != []} class="bg-white dark:bg-zinc-800 shadow rounded-lg mt-6">
<div class="bg-white dark:bg-zinc-800 shadow rounded-lg mt-6">
<div class="p-6"> <div class="p-6">
<h3 class="text-lg font-semibold mb-4">Tracks</h3> <h3 class="text-lg font-semibold mb-4">{gettext("Tracks")}</h3>
<div class="space-y-6"> <div class="space-y-6">
<%= for medium <- @release.media do %> <div :for={medium <- @release.media} class="space-y-3">
<div class="space-y-3">
<div class="flex justify-between items-center"> <div class="flex justify-between items-center">
<h4 class="font-medium"> <h4 :if={length(@release.media) > 1} class="font-medium">
<%= if length(@release.media) > 1 do %>
Medium {medium.number} Medium {medium.number}
<%= if medium.title do %> <span :if={medium.title}>
- {medium.title} - {medium.title}
<% end %> </span>
<%= if medium.format do %> <span :if={medium.format}>
({medium.format}) ({medium.format})
<% end %> </span>
<% else %> </h4>
Tracks <h4 :if={length(@release.media) == 1} class="font-medium">
<%= if medium.format do %> {gettext("Tracks")}
({medium.format}) <span :if={medium.format}>
<% end %> ({medium.format})
<% end %> </span>
</h4> </h4>
<%= if @can_scrobble do %>
<.button <.button
:if={@can_scrobble}
size="sm" size="sm"
variant="outline" variant="outline"
phx-click="scrobble_medium" phx-click="scrobble_medium"
phx-value-medium_number={medium.number} phx-value-medium_number={medium.number}
> >
<.icon name="hero-play" class="h-3 w-3 mr-1" /> Scrobble Medium <.icon name="hero-play" class="h-3 w-3 mr-1" /> {gettext("Scrobble Medium")}
</.button> </.button>
<% end %>
</div> </div>
<div class="space-y-1"> <div class="space-y-1">
<%= for track <- medium.tracks do %> <div
<div class="flex justify-between items-center py-2 px-3 bg-gray-50 dark:bg-gray-800 rounded"> :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"> <div class="flex items-center gap-3">
<span class="text-xs text-gray-500 dark:text-gray-400 w-6 text-right"> <span class="text-xs text-gray-500 dark:text-gray-400 w-6 text-right">
{track.position} {track.position}
@@ -143,34 +134,32 @@
<p class="font-medium text-sm text-gray-900 dark:text-gray-100 truncate"> <p class="font-medium text-sm text-gray-900 dark:text-gray-100 truncate">
{track.title} {track.title}
</p> </p>
<%= if track.artists != [] and track.artists != @release.artists do %> <p
<p class="text-xs text-gray-600 dark:text-gray-400 truncate"> :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(", ")} {track.artists |> Enum.map(& &1.name) |> Enum.join(", ")}
</p> </p>
<% end %>
</div> </div>
</div> </div>
<%= if track.length do %> <span
<span class="text-xs text-gray-500 dark:text-gray-400 font-mono"> :if={track.length}
class="text-xs text-gray-500 dark:text-gray-400 font-mono"
>
{format_duration(track.length)} {format_duration(track.length)}
</span> </span>
<% end %>
</div>
<% end %>
</div>
</div>
<% end %>
</div> </div>
</div> </div>
</div> </div>
<% end %> </div>
</div>
</div>
</div> </div>
<%= if @can_scrobble do %> <div :if={@can_scrobble} class="lg:col-span-1">
<div class="lg:col-span-1">
<div class="bg-white dark:bg-zinc-800 shadow rounded-lg sticky top-6"> <div class="bg-white dark:bg-zinc-800 shadow rounded-lg sticky top-6">
<div class="p-6"> <div class="p-6">
<h3 class="text-lg font-semibold mb-4">Scrobble Options</h3> <h3 class="text-lg font-semibold mb-4">{gettext("Scrobble Options")}</h3>
<.form <.form
for={%{}} for={%{}}
@@ -180,45 +169,42 @@
> >
<.select <.select
name="type" name="type"
label="Scrobble timing" label={gettext("Scrobble timing")}
value={@scrobble_form["type"]} value={@scrobble_form["type"]}
options={[ options={[
{"Just finished listening", "finished_at"}, {gettext("Just finished listening"), "finished_at"},
{"Started listening at", "started_at"} {gettext("Started listening at"), "started_at"}
]} ]}
/> />
<%= if @scrobble_form["type"] == "finished_at" do %> <div :if={@scrobble_form["type"] == "finished_at"} class="space-y-2">
<div class="space-y-2">
<.input <.input
type="date" type="date"
name="finished_at_date" name="finished_at_date"
label="Finished Date" label={gettext("Finished Date")}
value={@scrobble_form["finished_at_date"]} value={@scrobble_form["finished_at_date"]}
/> />
<.input <.input
type="time" type="time"
name="finished_at_time" name="finished_at_time"
label="Finished Time" label={gettext("Finished Time")}
value={@scrobble_form["finished_at_time"]} value={@scrobble_form["finished_at_time"]}
/> />
</div> </div>
<% else %> <div :if={@scrobble_form["type"] != "finished_at"} class="space-y-2">
<div class="space-y-2">
<.input <.input
type="date" type="date"
name="started_at_date" name="started_at_date"
label="Started Date" label={gettext("Started Date")}
value={@scrobble_form["started_at_date"]} value={@scrobble_form["started_at_date"]}
/> />
<.input <.input
type="time" type="time"
name="started_at_time" name="started_at_time"
label="Started Time" label={gettext("Started Time")}
value={@scrobble_form["started_at_time"]} value={@scrobble_form["started_at_time"]}
/> />
</div> </div>
<% end %>
</.form> </.form>
<div class="space-y-3 mt-6"> <div class="space-y-3 mt-6">
@@ -227,19 +213,19 @@
class="w-full" class="w-full"
size="lg" size="lg"
> >
<.icon name="hero-play" class="h-4 w-4 mr-2" /> Scrobble Entire Release <.icon name="hero-play" class="h-4 w-4 mr-2" /> {gettext(
"Scrobble Entire Release"
)}
</.button> </.button>
<p class="text-xs text-gray-500 dark:text-gray-400 text-center"> <p class="text-xs text-gray-500 dark:text-gray-400 text-center">
This will scrobble all tracks from all media in sequence {gettext("This will scrobble all tracks from all media in sequence")}
</p> </p>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<% end %>
</div> </div>
</div> </div>
<% end %>
</div> </div>
</Layouts.app> </Layouts.app>
priv/gettext/default.pot
+96
View File
@@ -630,6 +630,7 @@ msgid "Albums"
msgstr "" msgstr ""
#: lib/music_library_web/components/release.ex #: lib/music_library_web/components/release.ex
#: lib/music_library_web/live/scrobble_live/show.html.heex
#: lib/music_library_web/live/stats_live/index.html.heex #: lib/music_library_web/live/stats_live/index.html.heex
#, elixir-autogen, elixir-format #, elixir-autogen, elixir-format
msgid "Tracks" msgid "Tracks"
@@ -1433,3 +1434,98 @@ msgstr[1] ""
#, elixir-autogen, elixir-format #, elixir-autogen, elixir-format
msgid "Releases for \"%{title}\"" msgid "Releases for \"%{title}\""
msgstr "" msgstr ""
#: lib/music_library_web/live/scrobble_live/show.html.heex
#, elixir-autogen, elixir-format
msgid "Back to Search"
msgstr ""
#: lib/music_library_web/live/scrobble_live/show.html.heex
#, elixir-autogen, elixir-format
msgid "Barcode:"
msgstr ""
#: lib/music_library_web/live/scrobble_live/show.html.heex
#, elixir-autogen, elixir-format
msgid "Catalog Number:"
msgstr ""
#: lib/music_library_web/live/scrobble_live/show.html.heex
#, elixir-autogen, elixir-format
msgid "Country:"
msgstr ""
#: lib/music_library_web/live/scrobble_live/show.html.heex
#, elixir-autogen, elixir-format
msgid "Finished Date"
msgstr ""
#: lib/music_library_web/live/scrobble_live/show.html.heex
#, elixir-autogen, elixir-format
msgid "Finished Time"
msgstr ""
#: lib/music_library_web/live/scrobble_live/show.html.heex
#, elixir-autogen, elixir-format
msgid "Just finished listening"
msgstr ""
#: lib/music_library_web/live/scrobble_live/show.html.heex
#, elixir-autogen, elixir-format
msgid "Loading release details..."
msgstr ""
#: lib/music_library_web/live/scrobble_live/show.html.heex
#, elixir-autogen, elixir-format
msgid "Release Date:"
msgstr ""
#: lib/music_library_web/live/scrobble_live/show.html.heex
#, elixir-autogen, elixir-format
msgid "Release Information"
msgstr ""
#: lib/music_library_web/live/scrobble_live/show.html.heex
#, elixir-autogen, elixir-format
msgid "Scrobble Entire Release"
msgstr ""
#: lib/music_library_web/live/scrobble_live/show.html.heex
#, elixir-autogen, elixir-format
msgid "Scrobble Medium"
msgstr ""
#: lib/music_library_web/live/scrobble_live/show.html.heex
#, elixir-autogen, elixir-format
msgid "Scrobble Options"
msgstr ""
#: lib/music_library_web/live/scrobble_live/show.html.heex
#, elixir-autogen, elixir-format
msgid "Scrobble timing"
msgstr ""
#: lib/music_library_web/live/scrobble_live/show.html.heex
#, elixir-autogen, elixir-format
msgid "Started Date"
msgstr ""
#: lib/music_library_web/live/scrobble_live/show.html.heex
#, elixir-autogen, elixir-format
msgid "Started Time"
msgstr ""
#: lib/music_library_web/live/scrobble_live/show.html.heex
#, elixir-autogen, elixir-format
msgid "Started listening at"
msgstr ""
#: lib/music_library_web/live/scrobble_live/show.html.heex
#, elixir-autogen, elixir-format
msgid "This will scrobble all tracks from all media in sequence"
msgstr ""
#: lib/music_library_web/live/scrobble_live/show.html.heex
#, elixir-autogen, elixir-format
msgid "You need to connect your Last.fm account to scrobble. Please set up your Last.fm session key in the settings."
msgstr ""
priv/gettext/en/LC_MESSAGES/default.po
+96
View File
@@ -630,6 +630,7 @@ msgid "Albums"
msgstr "" msgstr ""
#: lib/music_library_web/components/release.ex #: lib/music_library_web/components/release.ex
#: lib/music_library_web/live/scrobble_live/show.html.heex
#: lib/music_library_web/live/stats_live/index.html.heex #: lib/music_library_web/live/stats_live/index.html.heex
#, elixir-autogen, elixir-format #, elixir-autogen, elixir-format
msgid "Tracks" msgid "Tracks"
@@ -1433,3 +1434,98 @@ msgstr[1] ""
#, elixir-autogen, elixir-format #, elixir-autogen, elixir-format
msgid "Releases for \"%{title}\"" msgid "Releases for \"%{title}\""
msgstr "" msgstr ""
#: lib/music_library_web/live/scrobble_live/show.html.heex
#, elixir-autogen, elixir-format
msgid "Back to Search"
msgstr ""
#: lib/music_library_web/live/scrobble_live/show.html.heex
#, elixir-autogen, elixir-format
msgid "Barcode:"
msgstr ""
#: lib/music_library_web/live/scrobble_live/show.html.heex
#, elixir-autogen, elixir-format
msgid "Catalog Number:"
msgstr ""
#: lib/music_library_web/live/scrobble_live/show.html.heex
#, elixir-autogen, elixir-format
msgid "Country:"
msgstr ""
#: lib/music_library_web/live/scrobble_live/show.html.heex
#, elixir-autogen, elixir-format
msgid "Finished Date"
msgstr ""
#: lib/music_library_web/live/scrobble_live/show.html.heex
#, elixir-autogen, elixir-format
msgid "Finished Time"
msgstr ""
#: lib/music_library_web/live/scrobble_live/show.html.heex
#, elixir-autogen, elixir-format
msgid "Just finished listening"
msgstr ""
#: lib/music_library_web/live/scrobble_live/show.html.heex
#, elixir-autogen, elixir-format, fuzzy
msgid "Loading release details..."
msgstr ""
#: lib/music_library_web/live/scrobble_live/show.html.heex
#, elixir-autogen, elixir-format, fuzzy
msgid "Release Date:"
msgstr ""
#: lib/music_library_web/live/scrobble_live/show.html.heex
#, elixir-autogen, elixir-format
msgid "Release Information"
msgstr ""
#: lib/music_library_web/live/scrobble_live/show.html.heex
#, elixir-autogen, elixir-format, fuzzy
msgid "Scrobble Entire Release"
msgstr ""
#: lib/music_library_web/live/scrobble_live/show.html.heex
#, elixir-autogen, elixir-format, fuzzy
msgid "Scrobble Medium"
msgstr ""
#: lib/music_library_web/live/scrobble_live/show.html.heex
#, elixir-autogen, elixir-format, fuzzy
msgid "Scrobble Options"
msgstr ""
#: lib/music_library_web/live/scrobble_live/show.html.heex
#, elixir-autogen, elixir-format, fuzzy
msgid "Scrobble timing"
msgstr ""
#: lib/music_library_web/live/scrobble_live/show.html.heex
#, elixir-autogen, elixir-format
msgid "Started Date"
msgstr ""
#: lib/music_library_web/live/scrobble_live/show.html.heex
#, elixir-autogen, elixir-format
msgid "Started Time"
msgstr ""
#: lib/music_library_web/live/scrobble_live/show.html.heex
#, elixir-autogen, elixir-format
msgid "Started listening at"
msgstr ""
#: lib/music_library_web/live/scrobble_live/show.html.heex
#, elixir-autogen, elixir-format
msgid "This will scrobble all tracks from all media in sequence"
msgstr ""
#: lib/music_library_web/live/scrobble_live/show.html.heex
#, elixir-autogen, elixir-format
msgid "You need to connect your Last.fm account to scrobble. Please set up your Last.fm session key in the settings."
msgstr ""