Support getting artist bios from Wikipedia (experimental)

lib/music_library_web/live/artist_live/show.ex

@@ -101,6 +101,7 @@ defmodule MusicLibraryWeb.ArtistLive.Show do
         {:noreply,
          socket
          |> assign(:artist_info, artist_info)
+         |> assign(:biography, build_biography(artist_info))
          |> put_toast(:info, gettext("Artist info refreshed successfully"))}
 
       {:error, reason} ->
@@ -113,6 +114,25 @@ defmodule MusicLibraryWeb.ArtistLive.Show do
     end
   end
 
+  def handle_event("refresh_wikipedia_data", %{"id" => id}, socket) do
+    case Artists.refresh_wikipedia_data(id) do
+      {:ok, artist_info} ->
+        {:noreply,
+         socket
+         |> assign(:artist_info, artist_info)
+         |> assign(:biography, build_biography(artist_info))
+         |> put_toast(:info, gettext("Wikipedia data refreshed successfully"))}
+
+      {:error, reason} ->
+        {:noreply,
+         socket
+         |> put_toast(
+           :error,
+           gettext("Error refreshing Wikipedia data") <> "," <> inspect(reason)
+         )}
+    end
+  end
+
   def handle_event("refresh_artist_image", %{"id" => id}, socket) do
     case Artists.fetch_image(id) do
       {:ok, artist_info} ->
@@ -171,6 +191,7 @@ defmodule MusicLibraryWeb.ArtistLive.Show do
     |> assign(:current_section, :artists)
     |> assign(:artist, artist)
     |> assign(:artist_info, artist_info)
+    |> assign(:biography, build_biography(artist_info))
     |> assign(:external_links, ArtistInfo.external_links(artist_info))
     |> assign(:country, ArtistInfo.country(artist_info))
     |> assign_async(:lastfm_artist_info, fn ->
@@ -250,6 +271,20 @@ defmodule MusicLibraryWeb.ArtistLive.Show do
     }
   end
 
+  defp build_biography(artist_info) do
+    bio_html = ArtistInfo.wikipedia_bio(artist_info)
+
+    if bio_html do
+      %{
+        source: "Wikipedia",
+        summary_html: ArtistInfo.wikipedia_summary(artist_info),
+        bio_html: bio_html,
+        url: ArtistInfo.wikipedia_url(artist_info),
+        description: ArtistInfo.wikipedia_description(artist_info)
+      }
+    end
+  end
+
   # Bios start with text, then a link to read more on Last.fm, followed by a license text.
   # We split the bio at the read more link in order to render the license separately.
   defp render_bio(bio) do

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

@@ -73,6 +73,20 @@
                   />
                   {gettext("Refresh info")}
                 </.dropdown_link>
+                <.dropdown_link
+                  id={"actions-#{@artist.musicbrainz_id}-refresh-wikipedia"}
+                  phx-click={
+                    JS.push("refresh_wikipedia_data", value: %{id: @artist.musicbrainz_id})
+                  }
+                >
+                  <.icon
+                    name="hero-arrow-path"
+                    class="h-4 w-4 mr-1 phx-click-loading:animate-spin"
+                    aria-hidden="true"
+                    data-slot="icon"
+                  />
+                  {gettext("Refresh Wikipedia")}
+                </.dropdown_link>
               </.focus_wrap>
             </.dropdown>
           </.button_group>
@@ -141,34 +155,19 @@
             />
           </dd>
         </dl>
-        <.async_result :let={lastfm_artist_info} assign={@lastfm_artist_info}>
-          <:loading>
-            <div class="mt-4 text-sm leading-5 text-zinc-500 dark:text-zinc-400">
-              {gettext("Loading biography")}
-            </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 biography")}
-            </div>
-          </:failed>
-          <dt
-            :if={lastfm_artist_info.bio not in [nil, ""]}
-            class="mt-4 text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400"
-          >
+        <%= if @biography do %>
+          <dt class="mt-4 text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400">
             {gettext("Biography")}
+            <.badge variant="soft" class="ml-1">{@biography.source}</.badge>
           </dt>
-          <dd
-            :if={lastfm_artist_info.bio not in [nil, ""]}
-            class="text-zinc-700 dark:text-zinc-300"
-          >
-            {remove_read_more_link(lastfm_artist_info.summary)}
+          <dd class="text-zinc-700 dark:text-zinc-300">
+            <p
+              :if={@biography.description}
+              class="mt-2 text-sm italic text-zinc-500 dark:text-zinc-400"
+            >
+              {@biography.description}
+            </p>
+            <p class="mt-2 text-sm/7">{@biography.summary_html}</p>
             <.link
               class="block mt-2 text-sm font-medium text-zinc-900 dark:text-zinc-400"
               phx-click={Fluxon.open_dialog("bio")}
@@ -183,14 +182,80 @@
             </.link>
           </dd>
           <.sheet
-            :if={lastfm_artist_info.bio not in [nil, ""]}
             id="bio"
             class="max-w-2xl text-zinc-700 dark:text-zinc-300"
             placement="left"
           >
-            {render_bio(lastfm_artist_info.bio)}
+            <div class="prose prose-sm dark:prose-invert">
+              {Phoenix.HTML.raw(@biography.bio_html)}
+            </div>
+            <a
+              :if={@biography.url}
+              href={@biography.url}
+              target="_blank"
+              class="mt-4 block text-sm font-medium text-zinc-900 dark:text-zinc-400 hover:text-zinc-500"
+            >
+              {gettext("Read full article on Wikipedia")}
+              <.icon
+                name="hero-arrow-top-right-on-square"
+                class="-mt-1 ml-1 h-4 w-4"
+                aria-hidden="true"
+                data-slot="icon"
+              />
+            </a>
           </.sheet>
-        </.async_result>
+        <% else %>
+          <.async_result :let={lastfm_artist_info} assign={@lastfm_artist_info}>
+            <:loading>
+              <div class="mt-4 text-sm leading-5 text-zinc-500 dark:text-zinc-400">
+                {gettext("Loading biography")}
+              </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 biography")}
+              </div>
+            </:failed>
+            <dt
+              :if={lastfm_artist_info.bio not in [nil, ""]}
+              class="mt-4 text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400"
+            >
+              {gettext("Biography")}
+            </dt>
+            <dd
+              :if={lastfm_artist_info.bio not in [nil, ""]}
+              class="text-zinc-700 dark:text-zinc-300"
+            >
+              {remove_read_more_link(lastfm_artist_info.summary)}
+              <.link
+                class="block mt-2 text-sm font-medium text-zinc-900 dark:text-zinc-400"
+                phx-click={Fluxon.open_dialog("lastfm-bio")}
+              >
+                <.icon
+                  name="hero-arrow-right-end-on-rectangle"
+                  class="-mt-1 mr-1 h-5 w-5"
+                  aria-hidden="true"
+                  data-slot="icon"
+                />
+                {gettext("Read more")}
+              </.link>
+            </dd>
+            <.sheet
+              :if={lastfm_artist_info.bio not in [nil, ""]}
+              id="lastfm-bio"
+              class="max-w-2xl text-zinc-700 dark:text-zinc-300"
+              placement="left"
+            >
+              {render_bio(lastfm_artist_info.bio)}
+            </.sheet>
+          </.async_result>
+        <% end %>
         <.external_links external_links={@external_links} />
       </div>
       <div class="md:col-span-7 md:order-1">
@@ -251,6 +316,12 @@
       title={gettext("Discogs data")}
       data={@artist_info.discogs_data}
     />
+
+    <.json_viewer
+      :if={@artist_info.wikipedia_data != %{}}
+      title={gettext("Wikipedia data")}
+      data={@artist_info.wikipedia_data}
+    />
   </div>
 
   <.live_component