Extract artist_image component

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

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

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