Extract artist_image component

lib/music_library/scrobble_activity.ex

@@ -289,8 +289,8 @@ defmodule MusicLibrary.ScrobbleActivity do
           fragment("json_extract(artist, '$.musicbrainz_id')")
         ],
         select: %{
-          artist_name: fragment("json_extract(artist, '$.name')"),
+          name: fragment("json_extract(artist, '$.name')"),
-          artist_musicbrainz_id: fragment("json_extract(artist, '$.musicbrainz_id')"),
+          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')"),
+          name: fragment("json_extract(artist, '$.name')"),
-          artist_musicbrainz_id: fragment("json_extract(artist, '$.musicbrainz_id')"),
+          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

@@ -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

@@ -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
+          <.artist_image artist={@artist} width={96} image_hash={@image_data_hash} />
-            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" <> "';"}
-          />
         </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

@@ -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}
+                artist={@artist}
-                src={artist_image_path(@artist_info)}
+                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

@@ -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
+              <.artist_image
-                src={artist_thumb_path(artist)}
-                alt={artist.name}
                 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

@@ -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)}
+        artist={@artist}
-        alt={@artist.name}
+        image_hash={@artist_info.image_data_hash}
-        onerror={"this.src = '" <> ~p"/images/cover-not-found.png" <> "';"}
       />
       <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

@@ -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 != "" &&
+            artist.musicbrainz_id != "" &&
-              JS.navigate(~p"/artists/#{artist.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
+          <.artist_image
-            :if={artist.artist_musicbrainz_id != ""}
+            :if={artist.musicbrainz_id != ""}
             class="w-12 h-12 rounded-md object-cover"
-            src={artist_image_path(artist)}
+            artist={artist}
-            alt={artist.artist_name}
+            width={96}
-            onerror={"this.src = '" <> ~p"/images/cover-not-found.png" <> "';"}
+            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()