Extract record_cover/1 component

lib/music_library_web/components/form_component.ex

@@ -2,7 +2,7 @@ defmodule MusicLibraryWeb.FormComponent do
   use MusicLibraryWeb, :live_component
 
   import MusicLibraryWeb.RecordComponents,
-    only: [format_label: 1, type_label: 1, release_label: 1, release_summary: 1]
+    only: [format_label: 1, type_label: 1, release_label: 1, release_summary: 1, record_cover: 1]
 
   alias MusicLibrary.Records
   alias MusicLibrary.Records.{Cover, Record}
@@ -96,11 +96,9 @@ defmodule MusicLibraryWeb.FormComponent do
             ]}
           >
             <div class="text-center">
-              <img
+              <.record_cover
                 :if={@uploads.cover_data.entries == []}
-                class="rounded-lg mx-auto w-full"
-                alt={@record.title}
-                src={~p"/covers/#{@record.id}?vsn=#{@record.cover_hash}"}
+                record={@record}
               />
               <.live_img_preview
                 :for={entry <- @uploads.cover_data.entries}

lib/music_library_web/components/record_components.ex

@@ -5,6 +5,19 @@ defmodule MusicLibraryWeb.RecordComponents do
   alias MusicLibrary.Records
   alias Phoenix.LiveView.JS
 
+  attr :record, :map, required: true
+  attr :class, :string, required: false, default: "rounded-lg"
+
+  def record_cover(assigns) do
+    ~H"""
+    <img
+      class={@class}
+      alt={@record.title}
+      src={~p"/covers/#{@record.id}?vsn=#{@record.cover_hash}"}
+    />
+    """
+  end
+
   attr :artists, :list, required: true
   attr :joinphrase_class, :string, default: nil
 
@@ -45,11 +58,7 @@ defmodule MusicLibraryWeb.RecordComponents do
       >
         <div class="flex min-w-0 gap-x-4 items-center">
           <div class="relative w-20 flex-none">
-            <img
-              class="rounded-lg"
-              alt={record.title}
-              src={~p"/covers/#{record.id}?vsn=#{record.cover_hash}"}
-            />
+            <.record_cover record={record} />
             <span
               :if={Records.Record.included_release_groups_count(record) > 0}
               class={[
@@ -218,9 +227,8 @@ defmodule MusicLibraryWeb.RecordComponents do
         <li :for={{id, record} <- @records} id={id} 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
-                alt={record.title}
-                src={~p"/covers/#{record.id}?vsn=#{record.cover_hash}"}
+              <.record_cover
+                record={record}
                 class="pointer-events-none aspect-square object-cover group-hover:opacity-75"
               />
               <span

lib/music_library_web/components/search_components.ex

@@ -5,7 +5,7 @@ defmodule MusicLibraryWeb.SearchComponents do
 
   use MusicLibraryWeb, :html
 
-  import MusicLibraryWeb.RecordComponents, only: [format_label: 1, type_label: 1]
+  import MusicLibraryWeb.RecordComponents, only: [format_label: 1, type_label: 1, record_cover: 1]
 
   alias MusicLibrary.Records.Record
 
@@ -31,10 +31,9 @@ defmodule MusicLibraryWeb.SearchComponents do
     >
       <div class="flex items-center space-x-3">
         <div class="flex-shrink-0">
-          <img
+          <.record_cover
+            record={@record}
             class="w-12 h-12 rounded-md aspect-square object-cover"
-            alt={@record.title}
-            src={~p"/covers/#{@record.id}?vsn=#{@record.cover_hash}"}
           />
         </div>
         <div class="min-w-0 flex-1">

lib/music_library_web/components/stats_components.ex

@@ -1,7 +1,8 @@
 defmodule MusicLibraryWeb.StatsComponents do
   use MusicLibraryWeb, :live_component
 
-  import MusicLibraryWeb.RecordComponents, only: [format_label: 1, type_label: 1, artist_links: 1]
+  import MusicLibraryWeb.RecordComponents,
+    only: [format_label: 1, type_label: 1, artist_links: 1, record_cover: 1]
 
   alias MusicLibrary.Records
 
@@ -19,10 +20,9 @@ defmodule MusicLibraryWeb.StatsComponents do
       phx-click={JS.navigate(~p"/collection/#{@record}")}
     >
       <dt>
-        <img
+        <.record_cover
+          record={@record}
           class="absolute w-20 rounded-md shadow-sm"
-          src={~p"/covers/#{@record.id}?vsn=#{@record.cover_hash}"}
-          alt={@record.title}
         />
         <p class="ml-24 truncate text-xs sm:text-sm font-medium text-zinc-500 dark:text-zinc-400">
           {@title}
@@ -131,11 +131,7 @@ defmodule MusicLibraryWeb.StatsComponents do
       >
         <div class="flex min-w-0 gap-x-4 items-center">
           <div class="relative w-12 flex-none">
-            <img
-              class="rounded-lg"
-              alt={record.title}
-              src={~p"/covers/#{record.id}?vsn=#{record.cover_hash}"}
-            />
+            <.record_cover record={record} />
             <span
               :if={Records.Record.included_release_groups_count(record) > 0}
               class={[

lib/music_library_web/live/collection_live/show.ex

@@ -9,7 +9,8 @@ defmodule MusicLibraryWeb.CollectionLive.Show do
       type_label: 1,
       release_summary: 1,
       artist_links: 1,
-      record_colors: 1
+      record_colors: 1,
+      record_cover: 1
     ]
 
   alias MusicLibrary.{Records, ScrobbleActivity}

lib/music_library_web/live/collection_live/show.html.heex

@@ -1,9 +1,8 @@
 <div class="md:flex mt-4 px-4 md:gap-x-4">
   <div class="drop-shadow-sm md:max-w-[38rem]">
-    <img
+    <.record_cover
+      record={@record}
       class="w-full rounded-lg drop-shadow-sm"
-      src={~p"/covers/#{@record.id}?vsn=#{@record.cover_hash}"}
-      alt={@record.title}
     />
   </div>
 

lib/music_library_web/live/wishlist_live/show.ex

@@ -7,7 +7,8 @@ defmodule MusicLibraryWeb.WishlistLive.Show do
       type_label: 1,
       release_summary: 1,
       artist_links: 1,
-      record_colors: 1
+      record_colors: 1,
+      record_cover: 1
     ]
 
   alias MusicLibrary.OnlineStoreTemplates

lib/music_library_web/live/wishlist_live/show.html.heex

@@ -1,9 +1,8 @@
 <div class="md:flex mt-4 px-4 md:gap-x-4">
   <div class="drop-shadow-sm md:max-w-[38rem]">
-    <img
+    <.record_cover
+      record={@record}
       class="w-full rounded-lg drop-shadow-sm"
-      src={~p"/covers/#{@record.id}?vsn=#{@record.cover_hash}"}
-      alt={@record.title}
     />
   </div>