Styling tweaks and optimize initial file drop

lib/live_beats_web/live/player_live.ex

@@ -21,7 +21,7 @@ defmodule LiveBeatsWeb.PlayerLive do
                 <%= if @song, do: @song.title, else: raw("&nbsp;") %>
               </h2>
               <p class="text-gray-500 dark:text-gray-400 text-sm sm:text-sm lg:text-sm xl:text-sm font-medium">
-                <%= if @song, do: @song.title, else: raw("&nbsp;") %>
+                <%= if @song, do: @song.artist, else: raw("&nbsp;") %>
               </p>
             </div>
           </div>

lib/live_beats_web/live/profile_live/song_entry_component.ex

@@ -45,7 +45,7 @@ defmodule LiveBeatsWeb.ProfileLive.SongEntryComponent do
       <div class="col-span-full sm:grid sm:grid-cols-2 sm:gap-2 sm:items-start">
         <.error input_name={"songs[#{@ref}][attribution]"} field={:attribution} errors={@errors} class="-mt-1"/>
       </div>
-      <div style={"width: #{@progress}%;"} class="col-span-full bg-purple-500 dark:bg-purple-400 h-1.5 w-0 p-0">
+      <div style={"transition: width 0.5s ease-in-out; width: #{@progress}%; min-width: 1px;"} class="col-span-full bg-purple-500 dark:bg-purple-400 h-1.5 w-0 p-0">
       </div>
     </div>
     """

lib/live_beats_web/live/profile_live/song_row_component.ex

@@ -14,27 +14,27 @@ defmodule LiveBeatsWeb.ProfileLive.SongRowComponent do
           phx-click={JS.push("play_or_pause", value: %{id: @song.id})}
          >
           <div class="flex items-center space-x-3 lg:pl-2">
-              <%= if i == 0 do %>
-                <%= if @status == :playing do %>
-                  <span class="flex pt-1 relative mr-2 w-4">
-                    <span class="w-3 h-3 animate-ping bg-purple-400 rounded-full absolute"></span>
-                    <.icon name={:volume_up} class="h-5 w-5 -mt-1 -ml-1" aria-label="Playing" role="button"/>
-                  </span>
-                <% end %>
-                <%= if @status == :paused do %>
-                  <span class="flex pt-1 relative mr-2 w-4">
-                    <.icon name={:volume_up} class="h-5 w-5 -mt-1 -ml-1 text-gray-400" aria-label="Paused" role="button"/>
-                  </span>
-                <% end %>
-                <%= if @status == :stopped do %>
-                  <span class="flex relative w-6 -translate-x-1">
-                  <%= if @owns_profile? do %>
-                    <.icon name={:play} class="h-5 w-5 text-gray-400" aria-label="Play" role="button"/>
-                  <% end %>
-                  </span>
-                <% end %>
+            <%= if i == 0 do %>
+              <%= if @status == :playing do %>
+                <span class="flex pt-1 relative mr-2 w-4">
+                  <span class="w-3 h-3 animate-ping bg-purple-400 rounded-full absolute"></span>
+                  <.icon name={:volume_up} class="h-5 w-5 -mt-1 -ml-1" aria-label="Playing" role="button"/>
+                </span>
               <% end %>
-              <%= render_slot(col, assigns) %>
+              <%= if @status == :paused do %>
+                <span class="flex pt-1 relative mr-2 w-4">
+                  <.icon name={:volume_up} class="h-5 w-5 -mt-1 -ml-1 text-gray-400" aria-label="Paused" role="button"/>
+                </span>
+              <% end %>
+              <%= if @status == :stopped do %>
+                <span class="flex relative w-6 -translate-x-1">
+                <%= if @owns_profile? do %>
+                  <.icon name={:play} class="h-5 w-5 text-gray-400" aria-label="Play" role="button"/>
+                <% end %>
+                </span>
+              <% end %>
+            <% end %>
+            <%= render_slot(col, assigns) %>
           </div>
         </td>
       <% end %>

lib/live_beats_web/live/profile_live/upload_form_component.ex

@@ -28,13 +28,19 @@ defmodule LiveBeatsWeb.ProfileLive.UploadFormComponent do
        progress: &handle_progress/3,
        accept: ~w(.mp3),
        max_entries: @max_songs,
-       max_file_size: 20_000_000
+       max_file_size: 20_000_000,
+       chunk_size: 64_000 * 3
      )}
   end
 
   @impl true
-  def handle_event("validate", %{"_target" => ["mp3"]}, socket) do
-    {:noreply, drop_invalid_uploads(socket)}
+  def handle_event("validate", %{"_target" => ["mp3"]} = params, socket) do
+    {_done, in_progress} = uploaded_entries(socket, :mp3)
+
+    new_socket =
+      Enum.reduce(in_progress, socket, fn entry, acc -> put_new_changeset(acc, entry) end)
+
+    {:noreply, drop_invalid_uploads(new_socket)}
   end
 
   def handle_event("validate", %{"songs" => params, "_target" => ["songs", _, _]}, socket) do

mix.lock

@@ -22,7 +22,7 @@
   "mint": {:hex, :mint, "1.3.0", "396b3301102f7b775e103da5a20494b25753aed818d6d6f0ad222a3a018c3600", [:mix], [{:castore, "~> 0.1.0", [hex: :castore, repo: "hexpm", optional: true]}], "hexpm", "a9aac960562e43ca69a77e5176576abfa78b8398cec5543dd4fb4ab0131d5c1e"},
   "phoenix": {:git, "https://github.com/phoenixframework/phoenix.git", "8d2b33ac9691bd624ede602088d213f89600d233", []},
   "phoenix_ecto": {:hex, :phoenix_ecto, "4.4.0", "0672ed4e4808b3fbed494dded89958e22fb882de47a97634c0b13e7b0b5f7720", [:mix], [{:ecto, "~> 3.3", [hex: :ecto, repo: "hexpm", optional: false]}, {:phoenix_html, "~> 2.14.2 or ~> 3.0", [hex: :phoenix_html, repo: "hexpm", optional: true]}, {:plug, "~> 1.9", [hex: :plug, repo: "hexpm", optional: false]}], "hexpm", "09864e558ed31ee00bd48fcc1d4fc58ae9678c9e81649075431e69dbabb43cc1"},
-  "phoenix_html": {:hex, :phoenix_html, "3.1.0", "0b499df05aad27160d697a9362f0e89fa0e24d3c7a9065c2bd9d38b4d1416c09", [:mix], [{:plug, "~> 1.5", [hex: :plug, repo: "hexpm", optional: true]}], "hexpm", "0c0a98a2cefa63433657983a2a594c7dee5927e4391e0f1bfd3a151d1def33fc"},
+  "phoenix_html": {:hex, :phoenix_html, "3.2.0", "1c1219d4b6cb22ac72f12f73dc5fad6c7563104d083f711c3fcd8551a1f4ae11", [:mix], [{:plug, "~> 1.5", [hex: :plug, repo: "hexpm", optional: true]}], "hexpm", "36ec97ba56d25c0136ef1992c37957e4246b649d620958a1f9fa86165f8bc54f"},
   "phoenix_live_dashboard": {:hex, :phoenix_live_dashboard, "0.6.2", "0769470265eb13af01b5001b29cb935f4710d6adaa1ffc18417a570a337a2f0f", [:mix], [{:ecto, "~> 3.6.2 or ~> 3.7", [hex: :ecto, repo: "hexpm", optional: true]}, {:ecto_mysql_extras, "~> 0.3", [hex: :ecto_mysql_extras, repo: "hexpm", optional: true]}, {:ecto_psql_extras, "~> 0.7", [hex: :ecto_psql_extras, repo: "hexpm", optional: true]}, {:mime, "~> 1.6 or ~> 2.0", [hex: :mime, repo: "hexpm", optional: false]}, {:phoenix_live_view, "~> 0.17.1", [hex: :phoenix_live_view, repo: "hexpm", optional: false]}, {:telemetry_metrics, "~> 0.6.0", [hex: :telemetry_metrics, repo: "hexpm", optional: false]}], "hexpm", "5bc6c6b38a2ca8b5020b442322fcee6afd5e641637a0b1fb059d4bd89bc58e7b"},
   "phoenix_live_reload": {:hex, :phoenix_live_reload, "1.3.3", "3a53772a6118d5679bf50fc1670505a290e32a1d195df9e069d8c53ab040c054", [:mix], [{:file_system, "~> 0.2.1 or ~> 0.3", [hex: :file_system, repo: "hexpm", optional: false]}, {:phoenix, "~> 1.4", [hex: :phoenix, repo: "hexpm", optional: false]}], "hexpm", "766796676e5f558dbae5d1bdb066849673e956005e3730dfd5affd7a6da4abac"},
   "phoenix_live_view": {:hex, :phoenix_live_view, "0.17.6", "3665f3ec426ac8d681cd7753ad4c85d2d247094dc4dc6add80dd6e3026045389", [:mix], [{:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: true]}, {:phoenix, "~> 1.5.9 or ~> 1.6.0", [hex: :phoenix, repo: "hexpm", optional: false]}, {:phoenix_html, "~> 3.1", [hex: :phoenix_html, repo: "hexpm", optional: false]}, {:telemetry, "~> 0.4.2 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "62f06d4bbfc4dc5595070bc338119ab08e8e67a011e2923f9366419622149b9c"},