Extract reusable components in release components

lib/music_library_web/components/release.ex

@@ -2,6 +2,7 @@ defmodule MusicLibraryWeb.Components.Release do
   use MusicLibraryWeb, :live_component
   use Gettext, backend: MusicLibraryWeb.Gettext
 
+  alias MusicBrainz.Release
   alias MusicLibrary.ScrobbleActivity
   alias MusicLibraryWeb.Duration
 
@@ -75,29 +76,71 @@ defmodule MusicLibraryWeb.Components.Release do
                 {gettext("Error loading tracks")}
               </div>
             </:failed>
-            <div :for={medium <- release_with_tracks.media} class="space-y-4">
+            <.medium
+              :for={medium <- release_with_tracks.media}
+              can_scrobble?={@can_scrobble?}
+              already_scrobbled={@already_scrobbled}
+              medium={medium}
+              release_artists={release_with_tracks.artists}
+              media_count={MusicBrainz.Release.media_count(release_with_tracks)}
+              myself={@myself}
+            />
+          </.async_result>
+        </div>
+      </.sheet>
+    </div>
+    """
+  end
+
+  attr :medium, Release.Medium, required: true
+  attr :release_artists, :list, required: true
+  attr :media_count, :integer, required: true
+  attr :can_scrobble?, :boolean, required: true
+  attr :already_scrobbled, :boolean, required: true
+  attr :myself, :any, required: true
+
+  def medium(assigns) do
+    ~H"""
     <div
-                :if={MusicBrainz.Release.media_count(release_with_tracks) > 1}
+      :if={@media_count > 1}
-                class="flex justify-between items-center gap-4"
+      class="flex justify-between items-center gap-4 space-y-4"
     >
       <h4 class="text-sm md:text-md font-semibold text-zinc-700 dark:text-zinc-300">
-                  {medium_title(medium)}
+        {medium_title(@medium)}
       </h4>
       <.button
         :if={@can_scrobble?}
         size="sm"
         disabled={@already_scrobbled}
         phx-click="scrobble_medium"
-                  phx-value-number={medium.number}
+        phx-value-number={@medium.number}
         phx-target={@myself}
         phx-disable-with={gettext("Scrobbling...")}
       >
         {gettext("Scrobble disc")}
       </.button>
     </div>
-              <ul id={"disc-#{medium.number}"} class="w-full table table-auto">
+    <.track_list
+      medium_number={@medium.number}
+      tracks={@medium.tracks}
+      release_artists={@release_artists}
+    />
+    <.separator />
+    <p class="text-xs md:text-sm text-right text-zinc-700 dark:text-zinc-300">
+      {medium_duration(@medium)}
+    </p>
+    """
+  end
+
+  attr :medium_number, :integer, required: true
+  attr :tracks, :list, required: true
+  attr :release_artists, :list, required: true
+
+  def track_list(assigns) do
+    ~H"""
+    <ul id={"disc-#{@medium_number}"} class="w-full table table-auto">
       <li
-                  :for={track <- medium.tracks}
+        :for={track <- @tracks}
         class="contents leading-5 text-zinc-700 dark:text-zinc-300 list-none"
       >
         <div class="table-row">
@@ -112,7 +155,7 @@ defmodule MusicLibraryWeb.Components.Release do
           </span>
         </div>
         <div
-                    :if={release_with_tracks.artists !== track.artists}
+          :if={@release_artists !== track.artists}
           class="table-row text-xs md:text-sm"
         >
           <span class="table-cell" />
@@ -122,15 +165,6 @@ defmodule MusicLibraryWeb.Components.Release do
         </div>
       </li>
     </ul>
-              <.separator />
-              <p class="text-xs md:text-sm text-right text-zinc-700 dark:text-zinc-300">
-                {medium_duration(medium)}
-              </p>
-            </div>
-          </.async_result>
-        </div>
-      </.sheet>
-    </div>
     """
   end