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

Display records in artist page

Browse Source
This commit is contained in:
Claudio Ortolina
2024-12-02 21:37:04 +00:00
parent 797f30b9a4
commit b42b4744a0
3 changed files with 117 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/music_library_web/live/artist_live/show.ex
+20 -2
View File
@@ -11,13 +11,22 @@ defmodule MusicLibraryWeb.ArtistLive.Show do
@impl true
def handle_params(%{"musicbrainz_id" => musicbrainz_id}, _, socket) do
artist = Records.get_artist!(musicbrainz_id)
{:ok, artist_info} = Records.get_artist_info(musicbrainz_id)
grouped_artist_records =
musicbrainz_id
|> Records.get_artist_records()
|> group_and_sort()
{:noreply,
socket
|> assign(:nav_section, :artists)
|> assign(:artist, artist)
|> assign(:artist_info, artist_info)
|> assign(:artist_records, grouped_artist_records)
|> assign_async(:artist_info, fn ->
with {:ok, artist_info} <- Records.get_artist_info(musicbrainz_id) do
{:ok, %{artist_info: artist_info}}
end
end)
|> assign(:page_title, page_title(socket.assigns.live_action, artist))}
end
@@ -31,4 +40,13 @@ defmodule MusicLibraryWeb.ArtistLive.Show do
" "
)
end
defp group_and_sort(records) do
{collection, wishlist} = Enum.split_with(records, fn r -> r.purchased_at end)
%{
collection: Enum.sort_by(collection, fn r -> r.release end, :desc),
wishlist: Enum.sort_by(wishlist, fn r -> r.release end, :desc)
}
end
end
lib/music_library_web/live/artist_live/show.html.heex
+83 -4
View File
@@ -1,8 +1,87 @@
<div class="mt-4 px-4">
<h1 class="mt-1 flex font-semibold text-base sm:text-lg leading-5 text-zinc-700 dark:text-zinc-300 text-wrap">
<div class="mt-4 px-4 sm:px-6 lg:px-8">
<h1 class="mt-1 flex font-semibold text-base lg:text-2xl leading-5 text-zinc-700 dark:text-zinc-300 text-wrap">
<%= @artist.name %>
</h1>
<p class="bio mt-2 text-sm leading-5 text-zinc-500 dark:text-zinc-400">
<%= (@artist_info.bio || gettext("Biography not available")) |> raw() %>
<p
:if={artist_info = @artist_info.ok? && @artist_info.result}
class="bio mt-2 text-sm leading-5 text-zinc-500 dark:text-zinc-400"
>
<%= (artist_info.bio || gettext("Biography not available")) |> raw() %>
</p>
<div :if={@artist_records.collection !== []} class="mt-4">
<h2 class="font-semibold text-base sm:text-lg leading-5 text-zinc-700 dark:text-zinc-300">
<%= gettext("Collection") %>
</h2>
<ul
role="list"
class="mt-4 grid grid-cols-2 gap-x-4 gap-y-8 sm:grid-cols-3 sm:gap-x-6 lg:grid-cols-4 xl:gap-x-8"
>
<li :for={record <- @artist_records.collection} class="relative">
<div class="group overflow-hidden rounded-lg bg-zinc-100 focus-within:ring-2 focus-within:ring-zinc-500 focus-within:ring-offset-2 focus-within:ring-offset-zinc-100">
<img
alt={record.title}
src={~p"/covers/#{record.id}?vsn=#{record.cover_hash || ""}"}
class="pointer-events-none aspect-square object-cover group-hover:opacity-75"
/>
<button
type="button"
class="absolute inset-0 focus:outline-none"
phx-click={JS.navigate(~p"/collection/#{record}")}
>
<span class="sr-only"><%= gettext("View details") %></span>
</button>
</div>
<p class="pointer-events-none mt-2 block truncate text-sm font-medium text-zinc-900 dark:text-zinc-300">
<%= record.title %>
</p>
<p class="pointer-events-none block text-sm font-medium text-zinc-500">
<%= Records.Record.format_long_label(record.format) %> · <%= Records.Record.type_long_label(
record.type
) %>
</p>
<p class="pointer-events-none block text-sm font-medium text-zinc-500">
<%= Records.Record.format_release(record.release) %>
</p>
</li>
</ul>
</div>
<div :if={@artist_records.wishlist !== []} class="mt-4">
<h2 class="font-semibold text-base sm:text-lg leading-5 text-zinc-700 dark:text-zinc-300">
<%= gettext("Wishlist") %>
</h2>
<ul
role="list"
class="mt-4 grid grid-cols-2 gap-x-4 gap-y-8 sm:grid-cols-3 sm:gap-x-6 lg:grid-cols-4 xl:gap-x-8"
>
<li :for={record <- @artist_records.wishlist} class="relative">
<div class="group overflow-hidden rounded-lg bg-zinc-100 focus-within:ring-2 focus-within:ring-zing-500 focus-within:ring-offset-2 focus-within:ring-offset-zinc-100">
<img
alt={record.title}
src={~p"/covers/#{record.id}?vsn=#{record.cover_hash || ""}"}
class="pointer-events-none aspect-square object-cover group-hover:opacity-75"
/>
<button
type="button"
class="absolute inset-0 focus:outline-none"
phx-click={JS.navigate(~p"/wishlist/#{record}")}
>
<span class="sr-only"><%= gettext("View details") %></span>
</button>
</div>
<p class="pointer-events-none mt-2 block truncate text-sm font-medium text-zinc-900 dark:text-zinc-300">
<%= record.title %>
</p>
<p class="pointer-events-none block text-sm font-medium text-zinc-500">
<%= Records.Record.format_long_label(record.format) %> · <%= Records.Record.type_long_label(
record.type
) %>
</p>
<p class="pointer-events-none block text-sm font-medium text-zinc-500">
<%= Records.Record.format_release(record.release) %>
</p>
</li>
</ul>
</div>
</div>
priv/gettext/default.pot
+14
View File
@@ -51,6 +51,7 @@ msgid "Choose a value"
msgstr ""
#: lib/music_library_web/components/layouts/app.html.heex:13
#: lib/music_library_web/live/artist_live/show.html.heex:14
#: lib/music_library_web/live/collection_live/index.ex:77
#: lib/music_library_web/live/collection_live/show.ex:102
#: lib/music_library_web/live/collection_live/show.ex:119
@@ -327,6 +328,7 @@ msgid "Welcome to your Music Library"
msgstr ""
#: lib/music_library_web/components/layouts/app.html.heex:19
#: lib/music_library_web/live/artist_live/show.html.heex:52
#: lib/music_library_web/live/wishlist_live/index.ex:75
#: lib/music_library_web/live/wishlist_live/show.ex:102
#, elixir-autogen, elixir-format
@@ -449,6 +451,7 @@ msgstr ""
msgid "No MB ID"
msgstr ""
#: lib/music_library_web/live/artist_live/show.ex:38
#: lib/music_library_web/live/collection_live/show.ex:100
#, elixir-autogen, elixir-format
msgid "Details"
@@ -473,3 +476,14 @@ msgstr ""
#, elixir-autogen, elixir-format
msgid "Dev dashboard"
msgstr ""
#: lib/music_library_web/live/artist_live/show.html.heex:9
#, elixir-autogen, elixir-format
msgid "Biography not available"
msgstr ""
#: lib/music_library_web/live/artist_live/show.html.heex:32
#: lib/music_library_web/live/artist_live/show.html.heex:70
#, elixir-autogen, elixir-format
msgid "View details"
msgstr ""