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: block;
-  margin: -1rem 0 2rem;
+  display: inline-block;
 }
 
 /* LiveView specific classes for your customization */

assets/js/app.js

@@ -27,9 +27,11 @@ Hooks.AudioPlayer = {
     this.duration = this.el.querySelector("#player-duration")
     this.progress = this.el.querySelector("#player-progress")
     let enableAudio = () => {
-      document.removeEventListener("click", enableAudio)
-      this.player.play().catch(error => null)
-      this.player.pause()
+      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}))

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
-    Song.changeset(song, attrs)
+  def change_song(song_or_changeset, attrs \\ %{}) do
+    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)}
 
-      _ ->
-        {:ok, cancel_upload(socket, :mp3, entry_ref)}
+      {:error, _} ->
+        {: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(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}
-        else
-          case upload_errors(uploads.mp3, entry) do
-            [first | _] ->
-              {cancel_upload(socket, :mp3, entry.ref), [{entry.client_name, first} | msgs], i + 1}
+    Enum.reduce(Enum.with_index(uploads.mp3.entries), socket, fn {entry, i}, socket ->
+      if i >= @max_songs do
+        cancel_changeset_upload(socket, entry.ref, :dropped)
+      else
+        case upload_errors(uploads.mp3, entry) do
+          [first | _] ->
+            cancel_changeset_upload(socket, entry.ref, first)
 
-            [] ->
-              {socket, msgs, i + 1}
-          end
+          [] ->
+            socket
         end
-      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

@@ -10,57 +10,57 @@
     phx-submit="save">
 
     <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} />
-				<% end %>
+      <div class="space-y-2 sm:space-y-2">
+        <%= for {ref, changeset} <- @changesets do %>
+          <.live_component id={ref} module={SongEntryComponent} changeset={changeset} />
+        <% end %>
 
-				<!-- upload -->
-				<div class="sm:grid sm:border-t sm:border-gray-200 sm:pt-5">
-					<div class="mt-1 sm:mt-0" phx-drop-target={@uploads.mp3.ref}>
-						<%= if Enum.any?(@error_messages) do %>
-							<div class="rounded-md bg-red-50 p-4 mb-2">
-								<div class="flex">
-									<div class="flex-shrink-0">
+        <!-- upload -->
+        <div class="sm:grid sm:border-t sm:border-gray-200 sm:pt-5">
+          <div class="mt-1 sm:mt-0" phx-drop-target={@uploads.mp3.ref}>
+            <%= if Enum.any?(@error_messages) do %>
+              <div class="rounded-md bg-red-50 p-4 mb-2">
+                <div class="flex">
+                  <div class="flex-shrink-0">
                     <.icon name={:x_circle} class="h-5 w-5 text-red-400"/>
-									</div>
-									<div class="ml-3">
-										<h3 class="text-sm font-medium text-red-800">
-											Oops!
-										</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 %>
-													<li><%= client_name %>: <.file_error kind={error} /></li>
-												<% end %>
-											</ul>
-										</div>
-									</div>
-								</div>
-							</div>
-						<% end %>
+                  </div>
+                  <div class="ml-3">
+                    <h3 class="text-sm font-medium text-red-800">
+                      Oops!
+                    </h3>
+                    <div class="mt-2 text-sm text-red-700">
+                      <ul role="list" class="list-disc pl-5 space-y-1">
+                        <%= for {client_name, kind} <- @error_messages do %>
+                          <li><%= client_name %>: <.file_error kind={kind} /></li>
+                        <% end %>
+                      </ul>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            <% end %>
 
-						<div class="max-w-lg flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-md">
-							<div class="space-y-1 text-center">
-								<svg class="mx-auto h-12 w-12 text-gray-400" stroke="currentColor" fill="none" viewBox="0 0 48 48" aria-hidden="true">
-									<path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
-								</svg>
-								<div class="flex text-sm text-gray-600">
-									<label for="file-upload" class="relative cursor-pointer bg-white rounded-md font-medium text-indigo-600 hover:text-indigo-500 focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-indigo-500">
-										<span phx-click={JS.dispatch("click", to: "##{@uploads.mp3.ref}")}>Upload files</span>
-										<%= live_file_input @uploads.mp3, class: "sr-only" %>
-									</label>
-									<p class="pl-1">or drag and drop</p>
-								</div>
-								<p class="text-xs text-gray-500">
-									MP3s up to 20MB
-								</p>
-							</div>
-						</div>
-					</div>
-				</div>
-				<!-- /upload -->
-			</div>
+            <div class="max-w-lg flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-md">
+              <div class="space-y-1 text-center">
+                <svg class="mx-auto h-12 w-12 text-gray-400" stroke="currentColor" fill="none" viewBox="0 0 48 48" aria-hidden="true">
+                  <path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                </svg>
+                <div class="flex text-sm text-gray-600">
+                  <label for="file-upload" class="relative cursor-pointer bg-white rounded-md font-medium text-indigo-600 hover:text-indigo-500 focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-indigo-500">
+                    <span phx-click={JS.dispatch("click", to: "##{@uploads.mp3.ref}")}>Upload files</span>
+                    <%= live_file_input @uploads.mp3, class: "sr-only" %>
+                  </label>
+                  <p class="pl-1">or drag and drop</p>
+                </div>
+                <p class="text-xs text-gray-500">
+                  MP3s up to 20MB
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <!-- /upload -->
+      </div>
     </div>
   </.form>
 </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
-    Enum.map(Keyword.get_values(errors, field), fn error ->
-      content_tag(:div, translate_error(error),
-        class: "invalid-feedback mt-0 text-sm text-red-600 text-right",
-        phx_feedback_for: input_name
-      )
-    end)
+  def error(%{errors: errors, field: field} = assigns) do
+    assigns =
+      assigns
+      |> assign(:error_values, Keyword.get_values(errors, field))
+      |> assign_new(:class, fn -> "" 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.
   """