Allow manual upload of artist image

lib/music_library/artists.ex

@@ -151,6 +151,16 @@ defmodule MusicLibrary.Artists do
     Repo.one(q)
   end
 
+  def change_artist_info(artist_info, attrs \\ %{}) do
+    ArtistInfo.changeset(artist_info, attrs)
+  end
+
+  def update_artist_info(artist_info, attrs) do
+    artist_info
+    |> ArtistInfo.changeset(attrs)
+    |> Repo.update()
+  end
+
   defp get_collected_artist_ids do
     q =
       from ar in ArtistRecord,

lib/music_library_web/live/artist_live/form_component.ex

@@ -0,0 +1,157 @@
+defmodule MusicLibraryWeb.ArtistLive.FormComponent do
+  use MusicLibraryWeb, :live_component
+
+  alias MusicLibrary.Artists
+  alias Vix.Vips.Image
+
+  @impl true
+  def mount(socket) do
+    {:ok,
+     socket
+     |> allow_upload(:image_data, accept: ~w(.jpg .jpeg .png .webp), max_entries: 1)}
+  end
+
+  @impl true
+  def render(assigns) do
+    ~H"""
+    <div class="w-82 md:w-2xl">
+      <header>
+        <h1 class="text-base font-medium leading-6 text-zinc-700">
+          {@artist.name}
+        </h1>
+      </header>
+
+      <.simple_form
+        for={@form}
+        id="artist-info-form"
+        phx-target={@myself}
+        phx-change="validate"
+        phx-auto-recover="recover_form"
+        phx-submit="save"
+      >
+        <div class="col-span-full">
+          <.label for={@uploads.image_data.ref}>
+            {gettext("Artist image")}
+          </.label>
+          <div
+            phx-drop-target={@uploads.image_data.ref}
+            class={[
+              "mt-2 flex justify-center rounded-lg",
+              "border border-dashed border-zinc-300",
+              "px-6 py-10"
+            ]}
+          >
+            <div class="text-center">
+              <img
+                :if={@uploads.image_data.entries == []}
+                class="rounded-lg mx-auto w-24"
+                alt={@artist.name}
+                src={~p"/artists/#{@artist_info.id}/image?vsn=#{@artist_info.image_data_hash || ""}"}
+              />
+              <.live_img_preview
+                :for={entry <- @uploads.image_data.entries}
+                class="mx-auto w-24"
+                entry={entry}
+              />
+              <div class="mt-4 text-sm/6 text-zinc-600 dark:text-zinc-400">
+                <%= for entry <- @uploads.image_data.entries do %>
+                  <span>{entry.progress}%</span>
+                <% end %>
+              </div>
+              <div class="mt-4 flex text-sm/6 text-zinc-600 dark:text-zinc-300">
+                <label
+                  for={@uploads.image_data.ref}
+                  class={[
+                    "relative cursor-pointer rounded-md font-semibold",
+                    "focus-within:outline-none focus-within:ring-2 focus-within:ring-indigo-600 focus-within:ring-offset-2",
+                    "hover:text-zinc-200"
+                  ]}
+                >
+                  <span>{gettext("Upload a file")}</span>
+                  <.live_file_input class="sr-only" upload={@uploads.image_data} />
+                </label>
+                <p class="pl-1">{gettext("or drag and drop")}</p>
+              </div>
+              <p class="text-xs/5 text-zinc-600 dark:text-zinc-400">
+                {gettext("PNG, JPG, WEBP up to 8MB")}
+              </p>
+            </div>
+          </div>
+        </div>
+        <:actions>
+          <div class="w-full md:flex md:justify-center">
+            <.button variant="solid" class="w-full md:w-auto" phx-disable-with={gettext("Saving...")}>
+              {gettext("Save")}
+            </.button>
+          </div>
+        </:actions>
+      </.simple_form>
+    </div>
+    """
+  end
+
+  @impl true
+  def update(%{artist_info: artist_info} = assigns, socket) do
+    {:ok,
+     socket
+     |> assign(assigns)
+     |> assign_new(:form, fn ->
+       to_form(Artists.change_artist_info(artist_info))
+     end)}
+  end
+
+  @impl true
+  def handle_event("validate", params, socket) do
+    artist_info_params = params["artist_info"] || %{}
+    changeset = Artists.change_artist_info(socket.assigns.artist_info, artist_info_params)
+    {:noreply, assign(socket, form: to_form(changeset, action: :validate))}
+  end
+
+  def handle_event("save", params, socket) do
+    artist_info_params = params["artist_info"] || %{}
+
+    uploaded_images =
+      consume_uploaded_entries(socket, :image_data, fn %{path: path}, _entry ->
+        {:ok, File.read!(path)}
+      end)
+
+    save_artist_info(socket, artist_info_params, uploaded_images)
+  end
+
+  def handle_event("recover_form", params, socket) do
+    handle_event("validate", params, socket)
+  end
+
+  defp save_artist_info(socket, artist_info_params, uploaded_images) do
+    params =
+      case uploaded_images do
+        [] ->
+          artist_info_params
+
+        [image_data] ->
+          {:ok, image} = Image.new_from_buffer(image_data)
+
+          image_width = Image.width(image)
+
+          Map.merge(artist_info_params, %{
+            "image_data" => image_data,
+            "image_data_width" => image_width
+          })
+      end
+
+    case Artists.update_artist_info(socket.assigns.artist_info, params) do
+      {:ok, artist_info} ->
+        notify_parent({:saved, artist_info})
+
+        {:noreply,
+         socket
+         |> put_flash(:info, gettext("Artist updated successfully"))
+         |> push_patch(to: socket.assigns.patch)}
+
+      {:error, %Ecto.Changeset{} = changeset} ->
+        {:noreply, assign(socket, form: to_form(changeset))}
+    end
+  end
+
+  defp notify_parent(msg), do: send(self(), {__MODULE__, msg})
+end

lib/music_library_web/live/artist_live/show.ex

@@ -230,7 +230,19 @@ defmodule MusicLibraryWeb.ArtistLive.Show do
     socket
     |> assign(:page_title, gettext("Add more · Artist"))
     |> assign(:initial_query, "arid:#{socket.assigns.artist.musicbrainz_id}")
-    |> assign(:record, nil)
+  end
+
+  defp apply_action(socket, :edit, params) do
+    socket =
+      if get_in(socket.assigns, [:streams, :collection_records]) == nil do
+        socket
+        |> apply_action(:show, params)
+      else
+        socket
+      end
+
+    socket
+    |> assign(:page_title, gettext("Add more · Artist"))
   end
 
   defp assign_records(socket, artist_musicbrainz_id) do
@@ -257,6 +269,17 @@ defmodule MusicLibraryWeb.ArtistLive.Show do
     )
   end
 
+  defp page_title(:edit, artist) do
+    Enum.join(
+      [
+        artist.name,
+        "·",
+        gettext("Edit")
+      ],
+      " "
+    )
+  end
+
   defp page_title(:import, artist) do
     Enum.join(
       [

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

@@ -17,6 +17,18 @@
           />
         </:toggle>
         <.focus_wrap id={"actions-#{@artist.musicbrainz_id}-focus-wrap"}>
+          <.dropdown_link
+            id={"actions-#{@artist.musicbrainz_id}-edit"}
+            patch={~p"/artists/#{@artist.musicbrainz_id}/edit"}
+          >
+            <.icon
+              name="hero-pencil-square"
+              class="h-4 w-4 mr-1 phx-click-loading:animate-bounce"
+              aria-hidden="true"
+              data-slot="icon"
+            />
+            {gettext("Edit")}
+          </.dropdown_link>
           <.dropdown_link
             id={"actions-#{@artist.musicbrainz_id}-refresh-image"}
             phx-click={JS.push("refresh_artist_image", value: %{id: @artist.musicbrainz_id})}
@@ -223,3 +235,19 @@
     icon_name="hero-plus"
   />
 </.modal>
+
+<.modal
+  :if={@live_action == :edit}
+  id="artist-info-modal"
+  open
+  on_close={JS.patch(~p"/artists/#{@artist.musicbrainz_id}")}
+>
+  <.live_component
+    module={MusicLibraryWeb.ArtistLive.FormComponent}
+    id={@artist_info.id}
+    action={@live_action}
+    artist_info={@artist_info}
+    artist={@artist}
+    patch={~p"/artists/#{@artist.musicbrainz_id}"}
+  />
+</.modal>

lib/music_library_web/router.ex

@@ -60,6 +60,7 @@ defmodule MusicLibraryWeb.Router do
 
         live "/artists/:musicbrainz_id", ArtistLive.Show, :show
         live "/artists/:musicbrainz_id/import", ArtistLive.Show, :import
+        live "/artists/:musicbrainz_id/edit", ArtistLive.Show, :edit
 
         live "/scrobble-rules", ScrobbleRulesLive.Index, :index
         live "/scrobble-rules/new", ScrobbleRulesLive.Index, :new

priv/gettext/default.pot

@@ -41,6 +41,8 @@ msgid "Delete"
 msgstr ""
 
 #: lib/music_library_web/components/record_components.ex
+#: lib/music_library_web/live/artist_live/show.ex
+#: lib/music_library_web/live/artist_live/show.html.heex
 #: lib/music_library_web/live/collection_live/show.ex
 #: lib/music_library_web/live/collection_live/show.html.heex
 #: lib/music_library_web/live/scrobble_rules_live/index.html.heex
@@ -154,11 +156,13 @@ msgid "Record updated successfully"
 msgstr ""
 
 #: lib/music_library_web/components/form_component.ex
+#: lib/music_library_web/live/artist_live/form_component.ex
 #, elixir-autogen, elixir-format
 msgid "Save"
 msgstr ""
 
 #: lib/music_library_web/components/form_component.ex
+#: lib/music_library_web/live/artist_live/form_component.ex
 #: lib/music_library_web/live/scrobble_rules_live/form_component.ex
 #, elixir-autogen, elixir-format
 msgid "Saving..."
@@ -565,16 +569,19 @@ msgid "Similar artists"
 msgstr ""
 
 #: lib/music_library_web/components/form_component.ex
+#: lib/music_library_web/live/artist_live/form_component.ex
 #, elixir-autogen, elixir-format
 msgid "PNG, JPG, WEBP up to 8MB"
 msgstr ""
 
 #: lib/music_library_web/components/form_component.ex
+#: lib/music_library_web/live/artist_live/form_component.ex
 #, elixir-autogen, elixir-format
 msgid "Upload a file"
 msgstr ""
 
 #: lib/music_library_web/components/form_component.ex
+#: lib/music_library_web/live/artist_live/form_component.ex
 #, elixir-autogen, elixir-format
 msgid "or drag and drop"
 msgstr ""
@@ -1159,3 +1166,13 @@ msgstr ""
 #, elixir-autogen, elixir-format
 msgid "Search records and artists..."
 msgstr ""
+
+#: lib/music_library_web/live/artist_live/form_component.ex
+#, elixir-autogen, elixir-format
+msgid "Artist image"
+msgstr ""
+
+#: lib/music_library_web/live/artist_live/form_component.ex
+#, elixir-autogen, elixir-format
+msgid "Artist updated successfully"
+msgstr ""

priv/gettext/en/LC_MESSAGES/default.po

@@ -41,6 +41,8 @@ msgid "Delete"
 msgstr ""
 
 #: lib/music_library_web/components/record_components.ex
+#: lib/music_library_web/live/artist_live/show.ex
+#: lib/music_library_web/live/artist_live/show.html.heex
 #: lib/music_library_web/live/collection_live/show.ex
 #: lib/music_library_web/live/collection_live/show.html.heex
 #: lib/music_library_web/live/scrobble_rules_live/index.html.heex
@@ -154,11 +156,13 @@ msgid "Record updated successfully"
 msgstr ""
 
 #: lib/music_library_web/components/form_component.ex
+#: lib/music_library_web/live/artist_live/form_component.ex
 #, elixir-autogen, elixir-format
 msgid "Save"
 msgstr ""
 
 #: lib/music_library_web/components/form_component.ex
+#: lib/music_library_web/live/artist_live/form_component.ex
 #: lib/music_library_web/live/scrobble_rules_live/form_component.ex
 #, elixir-autogen, elixir-format
 msgid "Saving..."
@@ -565,16 +569,19 @@ msgid "Similar artists"
 msgstr ""
 
 #: lib/music_library_web/components/form_component.ex
+#: lib/music_library_web/live/artist_live/form_component.ex
 #, elixir-autogen, elixir-format
 msgid "PNG, JPG, WEBP up to 8MB"
 msgstr ""
 
 #: lib/music_library_web/components/form_component.ex
+#: lib/music_library_web/live/artist_live/form_component.ex
 #, elixir-autogen, elixir-format
 msgid "Upload a file"
 msgstr ""
 
 #: lib/music_library_web/components/form_component.ex
+#: lib/music_library_web/live/artist_live/form_component.ex
 #, elixir-autogen, elixir-format
 msgid "or drag and drop"
 msgstr ""
@@ -1159,3 +1166,13 @@ msgstr ""
 #, elixir-autogen, elixir-format
 msgid "Search records and artists..."
 msgstr ""
+
+#: lib/music_library_web/live/artist_live/form_component.ex
+#, elixir-autogen, elixir-format, fuzzy
+msgid "Artist image"
+msgstr ""
+
+#: lib/music_library_web/live/artist_live/form_component.ex
+#, elixir-autogen, elixir-format, fuzzy
+msgid "Artist updated successfully"
+msgstr ""