Extract release with tracks component

lib/music_library_web/components/release_component.ex

@@ -0,0 +1,156 @@
+defmodule MusicLibraryWeb.ReleaseComponent do
+  use MusicLibraryWeb, :live_component
+  use Gettext, backend: MusicLibraryWeb.Gettext
+
+  import MusicLibraryWeb.RecordComponents,
+    only: [
+      format_duration: 1
+    ]
+
+  alias MusicLibrary.ScrobbleActivity
+
+  @impl true
+  def mount(socket) do
+    {:ok,
+     socket
+     |> assign(:can_scrobble?, ScrobbleActivity.can_scrobble?())
+     |> assign(:release_with_tracks, nil)}
+  end
+
+  @impl true
+  def render(assigns) do
+    ~H"""
+    <div>
+      <Fluxon.Components.Sheet.sheet
+        :if={@record.selected_release_id}
+        id={@sheet_id}
+        placement="right"
+        on_open={JS.push("load_release_with_tracks", target: @myself)}
+      >
+        <div class="mt-6 flex justify-between items-center gap-4">
+          <h3 class="text-lg font-semibold text-zinc-700 dark:text-zinc-300">{gettext("Tracks")}</h3>
+          <Fluxon.Components.Button.button
+            :if={@can_scrobble?}
+            size="xs"
+            phx-click="scrobble_release"
+            phx-target={@myself}
+            phx-disable-with={gettext("Scrobbling...")}
+          >
+            {gettext("Scrobble to Last.fm")}
+          </Fluxon.Components.Button.button>
+          <Fluxon.Components.Button.button
+            :if={!@can_scrobble?}
+            as="link"
+            size="xs"
+            href={LastFm.auth_url()}
+          >
+            {gettext("Connect your Last.fm account")}
+          </Fluxon.Components.Button.button>
+        </div>
+
+        <div :if={@release_with_tracks} class="space-y-4 mt-4">
+          <.async_result :let={release_with_tracks} assign={@release_with_tracks}>
+            <:loading>
+              <span class="sr-only">{gettext("Loading release with tracks")}</span>
+              <Fluxon.Components.Loading.loading />
+            </:loading>
+            <:failed :let={_failure}>
+              <div class="mt-4 text-sm leading-5 text-zinc-500 dark:text-zinc-400">
+                <.icon
+                  name="hero-exclamation-triangle"
+                  class="-mt-1 mr-1 h-5 w-5"
+                  aria-hidden="true"
+                  data-slot="icon"
+                />
+                {gettext("Error loading tracks")}
+              </div>
+            </:failed>
+            <div :for={medium <- release_with_tracks.media} class="space-y-4">
+              <h4
+                :if={MusicBrainz.Release.media_count(release_with_tracks) > 1}
+                class="text-sm font-semibold text-zinc-700 dark:text-zinc-300"
+              >
+                {medium_title(medium)}
+              </h4>
+              <ul id={"disc-#{medium.number}"} class="w-full table table-auto">
+                <li
+                  :for={track <- medium.tracks}
+                  class="contents leading-5 text-zinc-700 dark:text-zinc-300 list-none"
+                >
+                  <div class="table-row">
+                    <span class="table-cell text-xs text-right pr-1">{track.position}</span>
+                    <span class="table-cell text-xs font-medium leading-8">{track.title}</span>
+                    <span class="table-cell text-xs text-right pl-2">
+                      {track.length && format_duration(track.length)}
+                    </span>
+                  </div>
+                  <div :if={release_with_tracks.artists !== track.artists} class="table-row text-xs">
+                    <span class="table-cell" />
+                    <span class="table-cell">
+                      {Enum.map_join(track.artists, ", ", fn artist -> artist.name end)}
+                    </span>
+                  </div>
+                </li>
+              </ul>
+              <Fluxon.Components.Separator.separator />
+              <p class="text-xs text-right text-zinc-700 dark:text-zinc-300">
+                {medium_duration(medium)}
+              </p>
+            </div>
+          </.async_result>
+        </div>
+      </Fluxon.Components.Sheet.sheet>
+    </div>
+    """
+  end
+
+  @impl true
+  def handle_event("load_release_with_tracks", _params, socket) do
+    selected_release_id = socket.assigns.record.selected_release_id
+
+    {:noreply,
+     socket
+     |> assign_async(:release_with_tracks, fn ->
+       with {:ok, release} <- MusicBrainz.get_release(selected_release_id) do
+         {:ok, %{release_with_tracks: MusicBrainz.Release.from_api_response(release)}}
+       end
+     end)}
+  end
+
+  def handle_event("scrobble_release", _params, socket) do
+    release_with_tracks_async_result =
+      socket.assigns.release_with_tracks
+
+    if release_with_tracks =
+         release_with_tracks_async_result && release_with_tracks_async_result.result do
+      case ScrobbleActivity.scrobble(release_with_tracks, finished_at: DateTime.utc_now()) do
+        {:ok, _} ->
+          {:noreply,
+           socket
+           |> put_flash(:info, gettext("Release scrobbled successfully"))}
+
+        {:error, reason} ->
+          {:noreply,
+           socket
+           |> put_flash(
+             :error,
+             gettext("Error scrobbling release") <> "," <> inspect(reason)
+           )}
+      end
+    end
+  end
+
+  defp medium_duration(medium) do
+    medium
+    |> MusicBrainz.Release.medium_duration()
+    |> format_duration()
+  end
+
+  defp medium_title(medium) do
+    if medium.title !== "" do
+      medium.title
+    else
+      gettext("Disc %{no}", %{no: medium.number})
+    end
+  end
+end

lib/music_library_web/live/collection_live/show.ex

@@ -7,8 +7,7 @@ defmodule MusicLibraryWeb.CollectionLive.Show do
       close_actions_menu: 1,
       format_label: 1,
       type_label: 1,
-      selected_release_label: 1,
+      selected_release_label: 1
-      format_duration: 1
     ]
 
   alias MusicLibrary.{Records, ScrobbleActivity}
@@ -119,41 +118,6 @@ defmodule MusicLibraryWeb.CollectionLive.Show do
     end
   end
 
-  def handle_event("load_release_with_tracks", _params, socket) do
-    selected_release_id = socket.assigns.record.selected_release_id
-
-    {:noreply,
-     socket
-     |> assign_async(:release_with_tracks, fn ->
-       with {:ok, release} <- MusicBrainz.get_release(selected_release_id) do
-         {:ok, %{release_with_tracks: MusicBrainz.Release.from_api_response(release)}}
-       end
-     end)}
-  end
-
-  def handle_event("scrobble_release", _params, socket) do
-    release_with_tracks_async_result =
-      socket.assigns.release_with_tracks
-
-    if release_with_tracks =
-         release_with_tracks_async_result && release_with_tracks_async_result.result do
-      case ScrobbleActivity.scrobble(release_with_tracks, finished_at: DateTime.utc_now()) do
-        {:ok, _} ->
-          {:noreply,
-           socket
-           |> put_flash(:info, gettext("Release scrobbled successfully"))}
-
-        {:error, reason} ->
-          {:noreply,
-           socket
-           |> put_flash(
-             :error,
-             gettext("Error scrobbling release") <> "," <> inspect(reason)
-           )}
-      end
-    end
-  end
-
   @impl true
   def handle_info({MusicLibraryWeb.FormComponent, {:saved, record}}, socket) do
     {:noreply, assign(socket, :record, record)}
@@ -199,18 +163,4 @@ defmodule MusicLibraryWeb.CollectionLive.Show do
 
   defp title_segment(:show), do: gettext("Show")
   defp title_segment(:edit), do: gettext("Edit")
-
-  defp medium_duration(medium) do
-    medium
-    |> MusicBrainz.Release.medium_duration()
-    |> format_duration()
-  end
-
-  defp medium_title(medium) do
-    if medium.title !== "" do
-      medium.title
-    else
-      gettext("Disc %{no}", %{no: medium.number})
-    end
-  end
 end

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

@@ -221,7 +221,7 @@
 
             <button
               :if={@record.selected_release_id}
-              phx-click={Fluxon.open_dialog("tracks-sheet")}
+              phx-click={Fluxon.open_dialog("release-with-tracks-sheet")}
             >
               <span class="sr-only">{gettext("Show Tracks")}</span>
               <.icon
@@ -274,84 +274,12 @@
   <pre><code class="text-xs sm:text-sm"><%= Jason.encode!(@record.musicbrainz_data, pretty: true) %></code></pre>
 </details>
 
-<Fluxon.Components.Sheet.sheet
+<.live_component
-  :if={@record.selected_release_id}
+  id="release-with-tracks"
-  id="tracks-sheet"
+  sheet_id="release-with-tracks-sheet"
-  placement="right"
+  module={MusicLibraryWeb.ReleaseComponent}
-  on_open={JS.push("load_release_with_tracks")}
+  record={@record}
->
+/>
-  <div class="mt-6 flex justify-between items-center gap-4">
-    <h3 class="text-lg font-semibold text-zinc-700 dark:text-zinc-300">{gettext("Tracks")}</h3>
-    <Fluxon.Components.Button.button
-      :if={@can_scrobble?}
-      size="xs"
-      phx-click="scrobble_release"
-      phx-disable-with={gettext("Scrobbling...")}
-    >
-      {gettext("Scrobble to Last.fm")}
-    </Fluxon.Components.Button.button>
-    <Fluxon.Components.Button.button
-      :if={!@can_scrobble?}
-      as="link"
-      size="xs"
-      href={LastFm.auth_url()}
-    >
-      {gettext("Connect your Last.fm account")}
-    </Fluxon.Components.Button.button>
-  </div>
-
-  <div :if={@release_with_tracks} class="space-y-4 mt-4">
-    <.async_result :let={release_with_tracks} assign={@release_with_tracks}>
-      <:loading>
-        <span class="sr-only">{gettext("Loading release with tracks")}</span>
-        <Fluxon.Components.Loading.loading />
-      </:loading>
-      <:failed :let={_failure}>
-        <div class="mt-4 text-sm leading-5 text-zinc-500 dark:text-zinc-400">
-          <.icon
-            name="hero-exclamation-triangle"
-            class="-mt-1 mr-1 h-5 w-5"
-            aria-hidden="true"
-            data-slot="icon"
-          />
-          {gettext("Error loading tracks")}
-        </div>
-      </:failed>
-      <div :for={medium <- release_with_tracks.media} class="space-y-4">
-        <h4
-          :if={MusicBrainz.Release.media_count(release_with_tracks) > 1}
-          class="text-sm font-semibold text-zinc-700 dark:text-zinc-300"
-        >
-          {medium_title(medium)}
-        </h4>
-        <ul id={"disc-#{medium.number}"} class="w-full table table-auto">
-          <li
-            :for={track <- medium.tracks}
-            class="contents leading-5 text-zinc-700 dark:text-zinc-300 list-none"
-          >
-            <div class="table-row">
-              <span class="table-cell text-xs text-right pr-1">{track.position}</span>
-              <span class="table-cell text-xs font-medium leading-8">{track.title}</span>
-              <span class="table-cell text-xs text-right pl-2">
-                {track.length && format_duration(track.length)}
-              </span>
-            </div>
-            <div :if={release_with_tracks.artists !== track.artists} class="table-row text-xs">
-              <span class="table-cell" />
-              <span class="table-cell">
-                {Enum.map_join(track.artists, ", ", fn artist -> artist.name end)}
-              </span>
-            </div>
-          </li>
-        </ul>
-        <Fluxon.Components.Separator.separator />
-        <p class="text-xs text-right text-zinc-700 dark:text-zinc-300">
-          {medium_duration(medium)}
-        </p>
-      </div>
-    </.async_result>
-  </div>
-</Fluxon.Components.Sheet.sheet>
 
 <.modal
   :if={@live_action == :edit}

priv/gettext/default.pot

@@ -673,7 +673,7 @@ msgstr ""
 msgid "Albums"
 msgstr ""
 
-#: lib/music_library_web/live/collection_live/show.html.heex
+#: lib/music_library_web/components/release_component.ex
 #: lib/music_library_web/live/stats_live/index.html.heex
 #, elixir-autogen, elixir-format
 msgid "Tracks"
@@ -760,12 +760,12 @@ msgstr ""
 msgid "Digital download"
 msgstr ""
 
-#: lib/music_library_web/live/collection_live/show.html.heex
+#: lib/music_library_web/components/release_component.ex
 #, elixir-autogen, elixir-format
 msgid "Error loading tracks"
 msgstr ""
 
-#: lib/music_library_web/live/collection_live/show.html.heex
+#: lib/music_library_web/components/release_component.ex
 #, elixir-autogen, elixir-format
 msgid "Loading release with tracks"
 msgstr ""
@@ -775,7 +775,7 @@ msgstr ""
 msgid "Show Tracks"
 msgstr ""
 
-#: lib/music_library_web/live/collection_live/show.ex
+#: lib/music_library_web/components/release_component.ex
 #, elixir-autogen, elixir-format
 msgid "Disc %{no}"
 msgstr ""
@@ -785,27 +785,27 @@ msgstr ""
 msgid "Successfully connected your Last.fm account"
 msgstr ""
 
-#: lib/music_library_web/live/collection_live/show.ex
+#: lib/music_library_web/components/release_component.ex
 #, elixir-autogen, elixir-format
 msgid "Error scrobbling release"
 msgstr ""
 
-#: lib/music_library_web/live/collection_live/show.ex
+#: lib/music_library_web/components/release_component.ex
 #, elixir-autogen, elixir-format
 msgid "Release scrobbled successfully"
 msgstr ""
 
-#: lib/music_library_web/live/collection_live/show.html.heex
+#: lib/music_library_web/components/release_component.ex
 #, elixir-autogen, elixir-format
 msgid "Scrobble to Last.fm"
 msgstr ""
 
-#: lib/music_library_web/live/collection_live/show.html.heex
+#: lib/music_library_web/components/release_component.ex
 #, elixir-autogen, elixir-format
 msgid "Connect your Last.fm account"
 msgstr ""
 
-#: lib/music_library_web/live/collection_live/show.html.heex
+#: lib/music_library_web/components/release_component.ex
 #, elixir-autogen, elixir-format
 msgid "Scrobbling..."
 msgstr ""

priv/gettext/en/LC_MESSAGES/default.po

@@ -673,7 +673,7 @@ msgstr ""
 msgid "Albums"
 msgstr ""
 
-#: lib/music_library_web/live/collection_live/show.html.heex
+#: lib/music_library_web/components/release_component.ex
 #: lib/music_library_web/live/stats_live/index.html.heex
 #, elixir-autogen, elixir-format
 msgid "Tracks"
@@ -760,12 +760,12 @@ msgstr ""
 msgid "Digital download"
 msgstr ""
 
-#: lib/music_library_web/live/collection_live/show.html.heex
+#: lib/music_library_web/components/release_component.ex
 #, elixir-autogen, elixir-format, fuzzy
 msgid "Error loading tracks"
 msgstr ""
 
-#: lib/music_library_web/live/collection_live/show.html.heex
+#: lib/music_library_web/components/release_component.ex
 #, elixir-autogen, elixir-format
 msgid "Loading release with tracks"
 msgstr ""
@@ -775,7 +775,7 @@ msgstr ""
 msgid "Show Tracks"
 msgstr ""
 
-#: lib/music_library_web/live/collection_live/show.ex
+#: lib/music_library_web/components/release_component.ex
 #, elixir-autogen, elixir-format
 msgid "Disc %{no}"
 msgstr ""
@@ -785,27 +785,27 @@ msgstr ""
 msgid "Successfully connected your Last.fm account"
 msgstr ""
 
-#: lib/music_library_web/live/collection_live/show.ex
+#: lib/music_library_web/components/release_component.ex
 #, elixir-autogen, elixir-format
 msgid "Error scrobbling release"
 msgstr ""
 
-#: lib/music_library_web/live/collection_live/show.ex
+#: lib/music_library_web/components/release_component.ex
 #, elixir-autogen, elixir-format
 msgid "Release scrobbled successfully"
 msgstr ""
 
-#: lib/music_library_web/live/collection_live/show.html.heex
+#: lib/music_library_web/components/release_component.ex
 #, elixir-autogen, elixir-format
 msgid "Scrobble to Last.fm"
 msgstr ""
 
-#: lib/music_library_web/live/collection_live/show.html.heex
+#: lib/music_library_web/components/release_component.ex
 #, elixir-autogen, elixir-format
 msgid "Connect your Last.fm account"
 msgstr ""
 
-#: lib/music_library_web/live/collection_live/show.html.heex
+#: lib/music_library_web/components/release_component.ex
 #, elixir-autogen, elixir-format
 msgid "Scrobbling..."
 msgstr ""