Fix changeset handling by recycling

assets/css/app.css

@@ -11,9 +11,7 @@
 .fade-out-scale {
   animation: 0.2s ease-out 0s normal forwards 1 fade-out-scale-keys;
 }
-.slide-in-right {
+
-  animation: slide-in-right-keys 0.2s forwards;
-}
 .fade-in {
   animation: 0.2s ease-out 0s normal forwards 1 fade-in-keys;
 }
@@ -75,9 +73,7 @@
   display: none;
 }
 .invalid-feedback {
-  color: #a94442;
+  display: inline-block;
-  display: block;
-  margin: -1rem 0 2rem;
 }
 
 /* LiveView specific classes for your customization */

assets/js/app.js

@@ -27,10 +27,12 @@ Hooks.AudioPlayer = {
     this.duration = this.el.querySelector("#player-duration")
     this.progress = this.el.querySelector("#player-progress")
     let enableAudio = () => {
+      if(this.player.src){
         document.removeEventListener("click", enableAudio)
         this.player.play().catch(error => null)
         this.player.pause()
       }
+    }
     document.addEventListener("click", enableAudio)
     this.el.addEventListener("js:listen_now", () => this.play({sync: true}))
     this.el.addEventListener("js:play_pause", () => {

lib/live_beats/media_library.ex

@@ -187,7 +187,15 @@ defmodule LiveBeats.MediaLibrary do
     Repo.delete(song)
   end
 
-  def change_song(%Song{} = song, attrs \\ %{}) do
+  def change_song(song_or_changeset, attrs \\ %{}) do
-    Song.changeset(song, attrs)
+    song_or_changeset
+    |> recycle_changeset()
+    |> Song.changeset(attrs)
   end
+
+  defp recycle_changeset(%Ecto.Changeset{} = changeset) do
+    Map.merge(changeset, %{action: nil, errors: [], valid?: true})
+  end
+
+  defp recycle_changeset(%{} = other), do: other
 end

lib/live_beats_web/live/song_live/song_entry_component.ex

@@ -1,8 +1,12 @@
-defmodule LiveBeatsWeb.SongLive.SongEntry do
+defmodule LiveBeatsWeb.SongLive.SongEntryComponent do
   use LiveBeatsWeb, :live_component
 
   alias LiveBeats.MP3Stat
 
+  def send_progress(%Phoenix.LiveView.UploadEntry{} = entry) do
+    send_update(__MODULE__, id: entry.ref, progress: entry.progress)
+  end
+
   def render(assigns) do
     ~H"""
     <div class="sm:grid sm:grid-cols-2 sm:gap-2 sm:items-start sm:border-t sm:border-gray-200 sm:pt-2">
@@ -19,13 +23,15 @@ defmodule LiveBeatsWeb.SongLive.SongEntry do
         </label>
         <input type="text" name={"songs[#{@ref}][title]"} value={@title}
           class="block w-full border-0 p-0 text-gray-900 placeholder-gray-500 focus:ring-0 sm:text-sm"/>
-        <%= error_tag(@errors, :title, "songs[#{@ref}][title]") %>
       </div>
       <div class="border border-gray-300 rounded-md px-3 py-2 mt-2 shadow-sm focus-within:ring-1 focus-within:ring-indigo-600 focus-within:border-indigo-600">
         <label for="name" class="block text-xs font-medium text-gray-900">Artist</label>
         <input type="text" name={"songs[#{@ref}][artist]"} value={@artist}
           class="block w-full border-0 p-0 text-gray-900 placeholder-gray-500 focus:ring-0 sm:text-sm"/>
-        <%= error_tag(@errors, :artist, "songs[#{@ref}][artist]") %>
+      </div>
+      <div class="col-span-full sm:grid sm:grid-cols-2 sm:gap-2 sm:items-start">
+        <.error input_name={"songs[#{@ref}][title]"} field={:title} errors={@errors}/>
+        <.error input_name={"songs[#{@ref}][artist]"} field={:artist} errors={@errors}/>
       </div>
       <div style={"width: #{@progress}%;"} class="col-span-full bg-purple-500 dark:bg-purple-400 h-1.5 w-0 p-0">
       </div>

lib/live_beats_web/live/song_live/upload_form_component.ex

@@ -2,7 +2,7 @@ defmodule LiveBeatsWeb.SongLive.UploadFormComponent do
   use LiveBeatsWeb, :live_component
 
   alias LiveBeats.{MediaLibrary, MP3Stat}
-  alias LiveBeatsWeb.SongLive.SongEntry
+  alias LiveBeatsWeb.SongLive.SongEntryComponent
 
   @max_songs 10
 
@@ -12,8 +12,8 @@ defmodule LiveBeatsWeb.SongLive.UploadFormComponent do
       {:ok, %MP3Stat{} = stat} ->
         {:ok, put_stats(socket, entry_ref, stat)}
 
-      _ ->
+      {:error, _} ->
-        {:ok, cancel_upload(socket, :mp3, entry_ref)}
+        {:ok, cancel_changeset_upload(socket, entry_ref, :not_accepted)}
     end
   end
 
@@ -54,7 +54,7 @@ defmodule LiveBeatsWeb.SongLive.UploadFormComponent do
          |> push_redirect(to: Routes.song_index_path(socket, :index))}
 
       {:error, _reason} ->
-        {:noreply, put_flash(socket, :error, "There were problems uploading your songs")}
+        {:noreply, socket}
     end
   end
 
@@ -69,7 +69,6 @@ defmodule LiveBeatsWeb.SongLive.UploadFormComponent do
       new_changeset =
         acc
         |> get_changeset(ref)
-        |> Ecto.Changeset.apply_changes()
         |> MediaLibrary.change_song(song_params)
         |> Map.put(:action, action)
 
@@ -103,8 +102,12 @@ defmodule LiveBeatsWeb.SongLive.UploadFormComponent do
     update(socket, :changesets, &Map.put(&1, entry_ref, changeset))
   end
 
+  defp drop_changeset(socket, entry_ref) do
+    update(socket, :changesets, &Map.delete(&1, entry_ref))
+  end
+
   defp handle_progress(:mp3, entry, socket) do
-    send_update(SongEntry, id: entry.ref, progress: entry.progress)
+    SongEntryComponent.send_progress(entry)
 
     if entry.done? do
       async_calculate_duration(socket, entry)
@@ -144,21 +147,32 @@ defmodule LiveBeatsWeb.SongLive.UploadFormComponent do
   defp drop_invalid_uploads(socket) do
     %{uploads: uploads} = socket.assigns
 
-    {new_socket, error_messages, _index} =
+    Enum.reduce(Enum.with_index(uploads.mp3.entries), socket, fn {entry, i}, socket ->
-      Enum.reduce(uploads.mp3.entries, {socket, [], 0}, fn entry, {socket, msgs, i} ->
       if i >= @max_songs do
-          {cancel_upload(socket, :mp3, entry.ref), [{entry.client_name, :dropped} | msgs], i + 1}
+        cancel_changeset_upload(socket, entry.ref, :dropped)
       else
         case upload_errors(uploads.mp3, entry) do
           [first | _] ->
-              {cancel_upload(socket, :mp3, entry.ref), [{entry.client_name, first} | msgs], i + 1}
+            cancel_changeset_upload(socket, entry.ref, first)
 
           [] ->
-              {socket, msgs, i + 1}
+            socket
         end
       end
     end)
+  end
 
-    assign(new_socket, error_messages: error_messages)
+  defp cancel_changeset_upload(socket, entry_ref, reason) do
+    entry = get_entry!(socket, entry_ref)
+
+    socket
+    |> cancel_upload(:mp3, entry.ref)
+    |> drop_changeset(entry.ref)
+    |> update(:error_messages, &(&1 ++ [{entry.client_name, reason}]))
+  end
+
+  defp get_entry!(socket, entry_ref) do
+    Enum.find(socket.assigns.uploads.mp3.entries, fn entry -> entry.ref == entry_ref end) ||
+      raise "no entry found for ref #{inspect(entry_ref)}"
   end
 end

lib/live_beats_web/live/song_live/upload_form_component.html.heex

@@ -12,7 +12,7 @@
     <div class="space-y-8 divide-y divide-gray-200 sm:space-y-5">
       <div class="space-y-2 sm:space-y-2">
         <%= for {ref, changeset} <- @changesets do %>
-				  <.live_component id={ref} module={SongEntry} changeset={changeset} />
+          <.live_component id={ref} module={SongEntryComponent} changeset={changeset} />
         <% end %>
 
         <!-- upload -->
@@ -30,8 +30,8 @@
                     </h3>
                     <div class="mt-2 text-sm text-red-700">
                       <ul role="list" class="list-disc pl-5 space-y-1">
-												<%= for {client_name, error} <- @error_messages do %>
+                        <%= for {client_name, kind} <- @error_messages do %>
-													<li><%= client_name %>: <.file_error kind={error} /></li>
+                          <li><%= client_name %>: <.file_error kind={kind} /></li>
                         <% end %>
                       </ul>
                     </div>

lib/live_beats_web/views/error_helpers.ex

@@ -4,25 +4,38 @@ defmodule LiveBeatsWeb.ErrorHelpers do
   """
 
   use Phoenix.HTML
+  import Phoenix.LiveView
+  import Phoenix.LiveView.Helpers
 
   @doc """
   Generates tag for inlined form input errors.
   """
   def error_tag(form, field) do
-    error_tag(form.errors, field, input_name(form, field))
+    error(%{errors: form.errors, field: field, input_name: input_name(form, field)})
   end
 
-  def error_tag(errors, field, input_name) do
+  def error(%{errors: errors, field: field} = assigns) do
-    Enum.map(Keyword.get_values(errors, field), fn error ->
+    assigns =
-      content_tag(:div, translate_error(error),
+      assigns
-        class: "invalid-feedback mt-0 text-sm text-red-600 text-right",
+      |> assign(:error_values, Keyword.get_values(errors, field))
-        phx_feedback_for: input_name
+      |> assign_new(:class, fn -> "" end)
-      )
+
-    end)
+    ~H"""
+    <%= for error <- @error_values do %>
+      <div
+        phx-feedback-for={@input_name}
+        class={"invalid-feedback -mt-1 pl-2 text-sm text-white bg-red-600 rounded-md #{@class}"}
+      >
+        <%= translate_error(error) %>
+      </div>
+    <% end %>
+
+    <%= if Enum.empty?(@error_values) do %>
+      <div class={"invalid-feedback h-0 #{@class}"}></div>
+    <% end %>
+    """
   end
 
-
-
   @doc """
   Translates an error message using gettext.
   """