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

Extract artist_image component

Browse Source
This commit is contained in:
Claudio Ortolina
2025-09-19 13:52:59 +03:00
parent 8807fce15b
commit 932289ed3b
7 changed files with 58 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/music_library/scrobble_activity.ex
+4 -4
View File
@@ -289,8 +289,8 @@ defmodule MusicLibrary.ScrobbleActivity do
fragment("json_extract(artist, '$.musicbrainz_id')")
],
select: %{
artist_name: fragment("json_extract(artist, '$.name')"),
artist_musicbrainz_id: fragment("json_extract(artist, '$.musicbrainz_id')"),
name: fragment("json_extract(artist, '$.name')"),
musicbrainz_id: fragment("json_extract(artist, '$.musicbrainz_id')"),
image_hash: ai.image_data_hash,
play_count: count(t.scrobbled_at_uts)
},
@@ -326,8 +326,8 @@ defmodule MusicLibrary.ScrobbleActivity do
fragment("json_extract(artist, '$.musicbrainz_id')")
],
select: %{
artist_name: fragment("json_extract(artist, '$.name')"),
artist_musicbrainz_id: fragment("json_extract(artist, '$.musicbrainz_id')"),
name: fragment("json_extract(artist, '$.name')"),
musicbrainz_id: fragment("json_extract(artist, '$.musicbrainz_id')"),
image_hash: ai.image_data_hash,
play_count: count(t.scrobbled_at_uts)
},
lib/music_library_web/components/artist_components.ex
+27
View File
@@ -0,0 +1,27 @@
defmodule MusicLibraryWeb.ArtistComponents do
use MusicLibraryWeb, :html
alias MusicLibrary.Assets.Transform
attr :artist, :map, required: true
attr :image_hash, :string, required: true
attr :class, :string, required: false
attr :width, :integer, default: nil
def artist_image(assigns) do
payload =
%Transform{hash: assigns.image_hash, width: assigns.width}
|> Transform.encode!()
assigns = assign(assigns, :payload, payload)
~H"""
<img
class={@class}
src={~p"/assets/#{@payload}"}
alt={@artist.name}
onerror={"this.src = '" <> ~p"/images/cover-not-found.png" <> "';"}
/>
"""
end
end
lib/music_library_web/components/search_components.ex
+2 -15
View File
@@ -6,8 +6,8 @@ defmodule MusicLibraryWeb.SearchComponents do
use MusicLibraryWeb, :html
import MusicLibraryWeb.RecordComponents, only: [format_label: 1, type_label: 1, record_cover: 1]
import MusicLibraryWeb.ArtistComponents, only: [artist_image: 1]
alias MusicLibrary.Assets.Transform
alias MusicLibrary.Records.Record
@doc """
@@ -78,12 +78,7 @@ defmodule MusicLibraryWeb.SearchComponents do
>
<div class="flex items-center space-x-3">
<div class="flex-shrink-0">
<img
class="w-12 h-12 rounded-md aspect-square object-cover"
src={artist_image_path(@image_data_hash)}
alt={@artist.name}
onerror={"this.src = '" <> ~p"/images/cover-not-found.png" <> "';"}
/>
<.artist_image artist={@artist} width={96} image_hash={@image_data_hash} />
</div>
<div class="min-w-0 flex-1">
<p class="text-sm font-medium text-zinc-900 dark:text-zinc-100 truncate">
@@ -98,14 +93,6 @@ defmodule MusicLibraryWeb.SearchComponents do
"""
end
defp artist_image_path(image_data_hash) do
payload =
%Transform{hash: image_data_hash, width: 96}
|> Transform.encode!()
~p"/assets/#{payload}"
end
@doc """
Renders a search result group with a title and items.
lib/music_library_web/live/artist_live/form_component.ex
+5 -12
View File
@@ -1,9 +1,10 @@
defmodule MusicLibraryWeb.ArtistLive.FormComponent do
use MusicLibraryWeb, :live_component
import MusicLibraryWeb.ArtistComponents, only: [artist_image: 1]
alias MusicLibrary.Artists
alias MusicLibrary.Assets
alias MusicLibrary.Assets.Transform
@impl true
def mount(socket) do
@@ -43,11 +44,11 @@ defmodule MusicLibraryWeb.ArtistLive.FormComponent do
]}
>
<div class="text-center">
<img
<.artist_image
:if={@uploads.image_data.entries == []}
class="rounded-lg mx-auto w-full"
alt={@artist.name}
src={artist_image_path(@artist_info)}
artist={@artist}
image_hash={@artist_info.image_data_hash}
/>
<.live_img_preview
:for={entry <- @uploads.image_data.entries}
@@ -150,12 +151,4 @@ defmodule MusicLibraryWeb.ArtistLive.FormComponent do
end
defp notify_parent(msg), do: send(self(), {__MODULE__, msg})
defp artist_image_path(artist_info) do
payload =
%Transform{hash: artist_info.image_data_hash}
|> Transform.encode!()
~p"/assets/#{payload}"
end
end
lib/music_library_web/live/artist_live/show.ex
+5 -21
View File
@@ -4,9 +4,10 @@ defmodule MusicLibraryWeb.ArtistLive.Show do
import MusicLibraryWeb.RecordComponents,
only: [record_grid: 1, country_label: 1]
import MusicLibraryWeb.ArtistComponents, only: [artist_image: 1]
alias MusicLibrary.Artists.ArtistInfo
alias MusicLibrary.{Artists, Records}
alias(MusicLibrary.Assets.Transform)
attr :country, :map, required: true
@@ -63,11 +64,10 @@ defmodule MusicLibraryWeb.ArtistLive.Show do
<li :for={artist <- @artists} 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">
<div class="relative">
<img
src={artist_thumb_path(artist)}
alt={artist.name}
<.artist_image
class="pointer-events-none aspect-square object-cover group-hover:opacity-75"
onerror={"this.src = '" <> ~p"/images/cover-not-found.png" <> "';"}
artist={artist}
image_hash={artist.image_data_hash}
/>
</div>
<button
@@ -362,20 +362,4 @@ defmodule MusicLibraryWeb.ArtistLive.Show do
attributes: [class: "mt-2 text-sm/7"]
)
end
defp artist_image_path(artist_info) do
payload =
%Transform{hash: artist_info.image_data_hash}
|> Transform.encode!()
~p"/assets/#{payload}"
end
defp artist_thumb_path(artist_info) do
payload =
%Transform{hash: artist_info.image_data_hash, width: 300}
|> Transform.encode!()
~p"/assets/#{payload}"
end
end
lib/music_library_web/live/artist_live/show.html.heex
+3 -4
View File
@@ -104,11 +104,10 @@
<h2 class="font-semibold text-base sm:text-lg leading-5 text-zinc-700 dark:text-zinc-300">
{gettext("Meta")}
</h2>
<img
<.artist_image
class="w-full rounded-md shadow-sm mt-4"
src={artist_image_path(@artist_info)}
alt={@artist.name}
onerror={"this.src = '" <> ~p"/images/cover-not-found.png" <> "';"}
artist={@artist}
image_hash={@artist_info.image_data_hash}
/>
<dl>
<dt class="mt-4 text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400">
lib/music_library_web/live/stats_live/top_artists.ex
+12 -19
View File
@@ -1,7 +1,8 @@
defmodule MusicLibraryWeb.StatsLive.TopArtists do
use MusicLibraryWeb, :live_component
alias MusicLibrary.Assets.Transform
import MusicLibraryWeb.ArtistComponents, only: [artist_image: 1]
alias MusicLibrary.ScrobbleActivity
def live(assigns) do
@@ -99,31 +100,31 @@ defmodule MusicLibraryWeb.StatsLive.TopArtists do
<div
:for={artist <- @artists}
phx-click={
artist.artist_musicbrainz_id != "" &&
JS.navigate(~p"/artists/#{artist.artist_musicbrainz_id}")
artist.musicbrainz_id != "" &&
JS.navigate(~p"/artists/#{artist.musicbrainz_id}")
}
class={[
"flex items-center space-x-3 p-2",
artist.artist_musicbrainz_id != "" &&
artist.musicbrainz_id != "" &&
"cursor-pointer hover:bg-zinc-50 dark:hover:bg-zinc-800"
]}
>
<img
:if={artist.artist_musicbrainz_id != ""}
<.artist_image
:if={artist.musicbrainz_id != ""}
class="w-12 h-12 rounded-md object-cover"
src={artist_image_path(artist)}
alt={artist.artist_name}
onerror={"this.src = '" <> ~p"/images/cover-not-found.png" <> "';"}
artist={artist}
width={96}
image_hash={artist.image_hash}
/>
<div
:if={artist.artist_musicbrainz_id == ""}
:if={artist.musicbrainz_id == ""}
class="w-12 h-12 rounded-md bg-zinc-200 dark:bg-zinc-700 flex items-center justify-center"
>
<.icon name="hero-user" class="w-6 h-6 text-zinc-400" />
</div>
<div class="flex-1 min-w-0">
<p class="text-sm font-medium text-zinc-900 dark:text-zinc-300 hover:text-zinc-700 dark:hover:text-zinc-400 truncate">
{artist.artist_name}
{artist.name}
</p>
</div>
<.badge>
@@ -135,14 +136,6 @@ defmodule MusicLibraryWeb.StatsLive.TopArtists do
"""
end
defp artist_image_path(artist) do
payload =
%Transform{hash: artist.image_hash, width: 96}
|> Transform.encode!()
~p"/assets/#{payload}"
end
defp assign_top_artists(socket) do
%{timezone: timezone, period: period} = socket.assigns
current_time = DateTime.utc_now()