Show similar artists in artist page

Styling to be defined - only links for now.

lib/last_fm/api_impl.ex

@@ -100,7 +100,7 @@ defmodule LastFm.APIImpl do
       method: "artist.getSimilar",
       api_key: config.api_key,
       format: "json",
-      limit: 50
+      limit: 100
     ]
 
     options = Keyword.merge(base_options, options)

lib/music_library/artists.ex

@@ -14,6 +14,21 @@ defmodule MusicLibrary.Artists do
     Repo.one!(q)
   end
 
+  def get_similar_artists(artist) do
+    case LastFm.get_similar_artists(artist.musicbrainz_id, artist.name) do
+      {:ok, artists} ->
+        all_artist_ids = get_all_artist_ids()
+
+        {:ok,
+         Enum.filter(artists, fn a ->
+           MapSet.member?(all_artist_ids, a.musicbrainz_id)
+         end)}
+
+      error ->
+        error
+    end
+  end
+
   def get_all_artist_ids do
     q = from ar in ArtistRecord, distinct: true, select: ar.musicbrainz_id
 

lib/music_library_web/live/artist_live/show.ex

@@ -31,6 +31,11 @@ defmodule MusicLibraryWeb.ArtistLive.Show do
          {:ok, %{artist_info: artist_info}}
        end
      end)
+     |> assign_async(:similar_artists, fn ->
+       with {:ok, similar_artists} <- Artists.get_similar_artists(artist) do
+         {:ok, %{similar_artists: similar_artists}}
+       end
+     end)
      |> assign(:page_title, page_title(socket.assigns.live_action, artist))}
   end
 

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

@@ -36,31 +36,65 @@
     </.async_result>
   </header>
 
-  <.async_result :let={artist_info} assign={@artist_info}>
+  <div class="columns-2 mt-4">
-    <:loading>
+    <.async_result :let={artist_info} assign={@artist_info}>
-      <div class="mt-4 text-sm leading-5 text-zinc-500 dark:text-zinc-400">
+      <:loading>
-        {gettext("Loading biography")}
+        <div class="mt-4 text-sm leading-5 text-zinc-500 dark:text-zinc-400">
-      </div>
+          {gettext("Loading biography")}
-    </:loading>
+        </div>
-    <:failed :let={_failure}>
+      </:loading>
-      <div class="mt-4 text-sm leading-5 text-zinc-500 dark:text-zinc-400">
+      <:failed :let={_failure}>
-        <.icon
+        <div class="mt-4 text-sm leading-5 text-zinc-500 dark:text-zinc-400">
-          name="hero-exclamation-triangle"
+          <.icon
-          class="-mt-1 mr-1 h-5 w-5"
+            name="hero-exclamation-triangle"
-          aria-hidden="true"
+            class="-mt-1 mr-1 h-5 w-5"
-          data-slot="icon"
+            aria-hidden="true"
-        />
+            data-slot="icon"
-        {gettext("Error loading biography")}
+          />
-      </div>
+          {gettext("Error loading biography")}
-    </:failed>
+        </div>
-    <details
+      </:failed>
-      :if={artist_info.bio !== ""}
+      <details
-      class="mt-4 text-sm leading-5 text-zinc-500 dark:text-zinc-400"
+        :if={artist_info.bio !== ""}
-    >
+        class="text-sm leading-5 text-zinc-500 dark:text-zinc-400"
-      <summary class="text-sm mb-4">{gettext("Biography")}</summary>
+      >
-      {render_bio(@artist_info.result.bio)}
+        <summary class="text-sm mb-4">{gettext("Biography")}</summary>
-    </details>
+        {render_bio(@artist_info.result.bio)}
-  </.async_result>
+      </details>
+    </.async_result>
+
+    <.async_result :let={similar_artists} assign={@similar_artists}>
+      <:loading>
+        <div class="mt-4 text-sm leading-5 text-zinc-500 dark:text-zinc-400">
+          {gettext("Loading similar artists")}
+        </div>
+      </: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 similar artists")}
+        </div>
+      </:failed>
+      <details
+        :if={similar_artists !== []}
+        class="text-sm leading-5 text-zinc-500 dark:text-zinc-400"
+      >
+        <summary class="text-sm mb-4">{gettext("Similar artists")}</summary>
+        <.link
+          :for={artist <- similar_artists}
+          class="text-zinc-700 hover:text-zinc-500 dark:text-zinc-400 dark:hover:text-zinc-300"
+          patch={~p"/artists/#{artist.musicbrainz_id}"}
+        >
+          {artist.name}
+        </.link>
+      </details>
+    </.async_result>
+  </div>
 
   <.record_grid
     :if={@collection_records_count > 0}

priv/gettext/default.pot

@@ -30,7 +30,7 @@ msgid "Choose a value"
 msgstr ""
 
 #: lib/music_library_web/components/layouts/app.html.heex:14
-#: lib/music_library_web/live/artist_live/show.html.heex:67
+#: lib/music_library_web/live/artist_live/show.html.heex:101
 #: lib/music_library_web/live/collection_live/index.ex:157
 #: lib/music_library_web/live/collection_live/show.ex:117
 #: lib/music_library_web/live/collection_live/show.ex:134
@@ -302,7 +302,7 @@ msgid "Welcome to your Music Library"
 msgstr ""
 
 #: lib/music_library_web/components/layouts/app.html.heex:20
-#: lib/music_library_web/live/artist_live/show.html.heex:76
+#: lib/music_library_web/live/artist_live/show.html.heex:110
 #: lib/music_library_web/live/wishlist_live/index.ex:159
 #: lib/music_library_web/live/wishlist_live/show.ex:137
 #, elixir-autogen, elixir-format
@@ -405,7 +405,7 @@ msgstr ""
 msgid "No MB ID"
 msgstr ""
 
-#: lib/music_library_web/live/artist_live/show.ex:42
+#: lib/music_library_web/live/artist_live/show.ex:47
 #: lib/music_library_web/live/collection_live/show.ex:115
 #, elixir-autogen, elixir-format
 msgid "Details"
@@ -436,12 +436,12 @@ msgstr ""
 msgid "View details"
 msgstr ""
 
-#: lib/music_library_web/live/artist_live/show.html.heex:60
+#: lib/music_library_web/live/artist_live/show.html.heex:61
 #, elixir-autogen, elixir-format
 msgid "Biography"
 msgstr ""
 
-#: lib/music_library_web/live/artist_live/show.html.heex:42
+#: lib/music_library_web/live/artist_live/show.html.heex:43
 #, elixir-autogen, elixir-format
 msgid "Loading biography"
 msgstr ""
@@ -486,7 +486,7 @@ msgstr ""
 msgid "Records"
 msgstr ""
 
-#: lib/music_library_web/live/artist_live/show.html.heex:53
+#: lib/music_library_web/live/artist_live/show.html.heex:54
 #, elixir-autogen, elixir-format
 msgid "Error loading biography"
 msgstr ""
@@ -671,3 +671,18 @@ msgstr ""
 #, elixir-autogen, elixir-format
 msgid "New"
 msgstr ""
+
+#: lib/music_library_web/live/artist_live/show.html.heex:80
+#, elixir-autogen, elixir-format
+msgid "Error loading similar artists"
+msgstr ""
+
+#: lib/music_library_web/live/artist_live/show.html.heex:69
+#, elixir-autogen, elixir-format
+msgid "Loading similar artists"
+msgstr ""
+
+#: lib/music_library_web/live/artist_live/show.html.heex:87
+#, elixir-autogen, elixir-format
+msgid "Similar artists"
+msgstr ""

test/music_library_web/live/artist_live/show_test.exs

@@ -32,6 +32,11 @@ defmodule MusicLibraryWeb.ArtistLive.ShowTest do
         {:ok, get_info()}
       end)
 
+      expect(APIMock, :get_similar_artists, fn {:musicbrainz_id, ^artist_musicbrainz_id},
+                                               _config ->
+        {:ok, []}
+      end)
+
       conn
       |> visit(~p"/artists/#{artist_musicbrainz_id}")
       |> unwrap(&render_async/1)
@@ -48,6 +53,11 @@ defmodule MusicLibraryWeb.ArtistLive.ShowTest do
         {:error, :timeout}
       end)
 
+      expect(APIMock, :get_similar_artists, fn {:musicbrainz_id, ^artist_musicbrainz_id},
+                                               _config ->
+        {:ok, []}
+      end)
+
       conn
       |> visit(~p"/artists/#{artist_musicbrainz_id}")
       |> unwrap(&render_async/1)
@@ -76,6 +86,11 @@ defmodule MusicLibraryWeb.ArtistLive.ShowTest do
         {:error, :timeout}
       end)
 
+      expect(APIMock, :get_similar_artists, fn {:musicbrainz_id, ^artist_musicbrainz_id},
+                                               _config ->
+        {:ok, []}
+      end)
+
       conn
       |> visit(~p"/artists/#{artist_musicbrainz_id}")
       |> unwrap(&render_async/1)