From 60382feddc7c57e69a841c51a5e7904c13eb5cc8 Mon Sep 17 00:00:00 2001
From: Chris McCord <chris@chrismccord.com>
Date: Thu, 4 Nov 2021 20:49:19 -0400
Subject: [PATCH] Initial synced playback

---
 assets/js/app.js                              |  54 +++++++
 lib/live_beats/application.ex                 |   1 +
 lib/live_beats/id3.ex                         |  35 ++---
 lib/live_beats/media_library.ex               |  46 ++++--
 lib/live_beats/media_library/song.ex          |  11 +-
 lib/live_beats/mp3_stat.ex                    |  46 ++++++
 lib/live_beats_web/endpoint.ex                |   2 +-
 lib/live_beats_web/live/layout_component.ex   |  44 ++++++
 lib/live_beats_web/live/live_helpers.ex       | 107 +++++++++-----
 lib/live_beats_web/live/modal_component.ex    |  28 ----
 lib/live_beats_web/live/player_live.ex        | 108 +++++++++++---
 .../live/song_live/delete_dialog_component.ex |  47 ------
 .../live/song_live/form_component.ex          | 102 -------------
 .../live/song_live/form_component.html.heex   | 131 -----------------
 lib/live_beats_web/live/song_live/index.ex    | 138 ++++++++++++------
 lib/live_beats_web/live/song_live/show.ex     |  21 ---
 .../live/song_live/show.html.heex             |  47 ------
 .../live/song_live/song_entry_component.ex    |  11 +-
 lib/live_beats_web/live/song_live/song_row.ex |  60 ++++++++
 .../live/song_live/upload_form_component.ex   |  46 +++++-
 .../song_live/upload_form_component.html.heex |  12 --
 lib/live_beats_web/router.ex                  |   3 -
 .../templates/layout/live.html.heex           |   2 +
 mix.lock                                      |   1 +
 priv/repo/seeds.exs                           |   2 +-
 25 files changed, 563 insertions(+), 542 deletions(-)
 create mode 100644 lib/live_beats/mp3_stat.ex
 create mode 100644 lib/live_beats_web/live/layout_component.ex
 delete mode 100644 lib/live_beats_web/live/modal_component.ex
 delete mode 100644 lib/live_beats_web/live/song_live/delete_dialog_component.ex
 delete mode 100644 lib/live_beats_web/live/song_live/form_component.ex
 delete mode 100644 lib/live_beats_web/live/song_live/form_component.html.heex
 delete mode 100644 lib/live_beats_web/live/song_live/show.ex
 delete mode 100644 lib/live_beats_web/live/song_live/show.html.heex
 create mode 100644 lib/live_beats_web/live/song_live/song_row.ex

diff --git a/assets/js/app.js b/assets/js/app.js
index d44e804..6cefdf1 100644
--- a/assets/js/app.js
+++ b/assets/js/app.js
@@ -27,6 +27,58 @@ Hooks.Progress = {
 	}
 }
 
+Hooks.AudioPlayer = {
+  mounted(){
+    this.playbackBeganAt = null
+    this.player = this.el.querySelector("audio")
+    this.currentTime = this.el.querySelector("#player-time")
+    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()
+    }
+    document.addEventListener("click", enableAudio)
+    this.el.addEventListener("js:play_pause", () => {
+      this.play()
+    })
+    this.handleEvent("play", ({url, began_at}) => {
+      this.playbackBeganAt = began_at
+      this.player.src = url
+      this.play()
+    })
+    this.handleEvent("pause", () => {
+      console.log("Server Pause!")
+      this.pause()
+    })
+  },
+
+  play(){
+    this.player.play().then(() => {
+      this.player.currentTime = (Date.now() - this.playbackBeganAt) / 1000
+      this.progressTimer = setInterval(() => this.updateProgress(), 100)
+      this.pushEvent("audio-accepted", {})
+    }, error => {
+      this.pushEvent("audio-rejected", {})
+    })
+  },
+
+  pause(){
+    this.player.pause()
+    clearInterval(this.progressTimer)
+  },
+
+  updateProgress(){
+    if(isNaN(this.player.duration)){ return false }
+		this.progress.style.width = `${(this.player.currentTime / (this.player.duration) * 100)}%`
+    this.duration.innerText = this.formatTime(this.player.duration)
+    this.currentTime.innerText = this.formatTime(this.player.currentTime)
+  },
+
+  formatTime(seconds){ return new Date(1000 * seconds).toISOString().substr(14, 5) }
+}
+
 let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
 let liveSocket = new LiveSocket("/live", Socket, {
 	hooks: Hooks,
@@ -51,6 +103,8 @@ topbar.config({barColors: {0: "#29d"}, shadowColor: "rgba(0, 0, 0, .3)"})
 window.addEventListener("phx:page-loading-start", info => topbar.show())
 window.addEventListener("phx:page-loading-stop", info => topbar.hide())
 
+window.addEventListener("js:exec", e => e.target[e.detail.call](...e.detail.args))
+
 // connect if there are any LiveViews on the page
 liveSocket.connect()
 
diff --git a/lib/live_beats/application.ex b/lib/live_beats/application.ex
index 2ced1b6..cf7dd3e 100644
--- a/lib/live_beats/application.ex
+++ b/lib/live_beats/application.ex
@@ -8,6 +8,7 @@ defmodule LiveBeats.Application do
   @impl true
   def start(_type, _args) do
     children = [
+      {Task.Supervisor, name: LiveBeats.TaskSupervisor},
       # Start the Ecto repository
       LiveBeats.Repo,
       # Start the Telemetry supervisor
diff --git a/lib/live_beats/id3.ex b/lib/live_beats/id3.ex
index d78f99b..9c2b1a6 100644
--- a/lib/live_beats/id3.ex
+++ b/lib/live_beats/id3.ex
@@ -7,30 +7,17 @@ defmodule LiveBeats.ID3 do
             year: nil
 
   def parse(path) do
-    binary = File.read!(path)
-    size = byte_size(binary) - 128
-    <<_::binary-size(size), id3_tag::binary>> = binary
-
-    case id3_tag do
-      <<
-        "TAG",
-        title::binary-size(30),
-        artist::binary-size(30),
-        album::binary-size(30),
-        year::binary-size(4),
-        _comment::binary-size(30),
-        _rest::binary
-      >> ->
-        {:ok,
-         %ID3{
-           title: strip(title),
-           artist: strip(artist),
-           album: strip(album),
-           year: year
-         }}
-
-      _invalid ->
-        {:error, :invalid}
+    with {:ok, parsed} <- :id3_tag_reader.read_tag(path) do
+      {:ok, parsed}
+        # %ID3{
+        #   title: strip(title),
+        #   artist: strip(artist),
+        #   album: strip(album),
+        #   year: 2028
+        # }}
+    else
+      other ->
+        {:error, other}
     end
   end
 
diff --git a/lib/live_beats/media_library.ex b/lib/live_beats/media_library.ex
index 5aaad0d..20ef0be 100644
--- a/lib/live_beats/media_library.ex
+++ b/lib/live_beats/media_library.ex
@@ -4,21 +4,45 @@ defmodule LiveBeats.MediaLibrary do
   """
 
   import Ecto.Query, warn: false
-  alias LiveBeats.Repo
-
+  alias LiveBeats.{Repo, MP3Stat, Accounts}
   alias LiveBeats.MediaLibrary.{Song, Genre}
 
-  def store_mp3(%Song{} = song, tmp_path) do
-    File.mkdir_p!("priv/static/uploads/songs")
-    File.cp!(tmp_path, song.mp3_path)
+  @pubsub LiveBeats.PubSub
+
+  def subscribe(%Accounts.User{} = user) do
+    Phoenix.PubSub.subscribe(@pubsub, topic(user.id))
   end
 
-  def import_songs(changesets, consome_file)
-      when is_map(changesets) and is_function(consome_file, 2) do
+  def play_song(%Song{id: id}), do: play_song(id)
+
+  def play_song(id) do
+    song = get_song!(id)
+    Phoenix.PubSub.broadcast!(@pubsub, topic(song.user_id), {:play, song, %{began_at: now_ms()}})
+  end
+
+  def pause_song(%Song{} = song) do
+    Phoenix.PubSub.broadcast!(@pubsub, topic(song.user_id), {:pause, song})
+  end
+
+  defp topic(user_id), do: "room:#{user_id}"
+
+  def store_mp3(%Song{} = song, tmp_path) do
+    dir = "priv/static/uploads/songs"
+    File.mkdir_p!(dir)
+    File.cp!(tmp_path, Path.join(dir, song.mp3_filename))
+  end
+
+  def put_stats(%Ecto.Changeset{} = changeset, %MP3Stat{} = stat) do
+    Ecto.Changeset.put_change(changeset, :duration, stat.duration)
+  end
+
+  def import_songs(%Accounts.User{} = user, changesets, consume_file)
+      when is_map(changesets) and is_function(consume_file, 2) do
     changesets
     |> Enum.reduce(Ecto.Multi.new(), fn {ref, chset}, acc ->
       chset =
         chset
+        |> Song.put_user(user)
         |> Song.put_mp3_path()
         |> Map.put(:action, nil)
 
@@ -31,7 +55,7 @@ defmodule LiveBeats.MediaLibrary do
          results
          |> Enum.filter(&match?({{:song, _ref}, _}, &1))
          |> Enum.map(fn {{:song, ref}, song} ->
-           consome_file.(ref, fn tmp_path -> store_mp3(song, tmp_path) end)
+           consume_file.(ref, fn tmp_path -> store_mp3(song, tmp_path) end)
            {ref, song}
          end)
          |> Enum.into(%{})}
@@ -58,8 +82,8 @@ defmodule LiveBeats.MediaLibrary do
     Repo.all(Genre, order_by: [asc: :title])
   end
 
-  def list_songs do
-    Repo.all(Song)
+  def list_songs(limit \\ 100) do
+    Repo.all(from s in Song, limit: ^limit, order_by: [asc: s.inserted_at])
   end
 
   def get_song!(id), do: Repo.get!(Song, id)
@@ -83,4 +107,6 @@ defmodule LiveBeats.MediaLibrary do
   def change_song(%Song{} = song, attrs \\ %{}) do
     Song.changeset(song, attrs)
   end
+
+  defp now_ms, do: System.system_time() |> System.convert_time_unit(:native, :millisecond)
 end
diff --git a/lib/live_beats/media_library/song.ex b/lib/live_beats/media_library/song.ex
index 636c1ec..1cf59c3 100644
--- a/lib/live_beats/media_library/song.ex
+++ b/lib/live_beats/media_library/song.ex
@@ -2,6 +2,8 @@ defmodule LiveBeats.MediaLibrary.Song do
   use Ecto.Schema
   import Ecto.Changeset
 
+  alias LiveBeats.Accounts
+
   schema "songs" do
     field :album_artist, :string
     field :artist, :string
@@ -11,7 +13,7 @@ defmodule LiveBeats.MediaLibrary.Song do
     field :title, :string
     field :mp3_path, :string
     field :mp3_filename, :string
-    belongs_to :user, LiveBeats.Accounts.User
+    belongs_to :user, Accounts.User
     belongs_to :genre, LiveBeats.MediaLibrary.Genre
 
     timestamps()
@@ -22,6 +24,11 @@ defmodule LiveBeats.MediaLibrary.Song do
     song
     |> cast(attrs, [:album_artist, :artist, :title, :date_recorded, :date_released])
     |> validate_required([:artist, :title])
+    |> validate_number(:duration, greater_than: 0, less_than: 1200)
+  end
+
+  def put_user(%Ecto.Changeset{} = changeset, %Accounts.User{} = user) do
+    put_assoc(changeset, :user, user)
   end
 
   def put_mp3_path(%Ecto.Changeset{} = changeset) do
@@ -30,7 +37,7 @@ defmodule LiveBeats.MediaLibrary.Song do
 
       changeset
       |> Ecto.Changeset.put_change(:mp3_filename, filename)
-      |> Ecto.Changeset.put_change(:mp3_path, "priv/static/uploads/songs/#{filename}")
+      |> Ecto.Changeset.put_change(:mp3_path, "uploads/songs/#{filename}")
     else
       changeset
     end
diff --git a/lib/live_beats/mp3_stat.ex b/lib/live_beats/mp3_stat.ex
new file mode 100644
index 0000000..984d946
--- /dev/null
+++ b/lib/live_beats/mp3_stat.ex
@@ -0,0 +1,46 @@
+defmodule LiveBeats.MP3Stat do
+  alias LiveBeats.MP3Stat
+
+  defstruct duration: 0, path: nil
+
+  def to_mmss(duration) when is_integer(duration) do
+    hours = div(duration, 60 * 60)
+    minutes = div(duration - (hours * 60 * 60), 60)
+    seconds = rem(duration - (hours * 60 * 60) - (minutes * 60), 60)
+
+    [minutes, seconds]
+    |> Enum.map(fn count -> String.pad_leading("#{count}", 2, ["0"]) end)
+    |> Enum.join(":")
+  end
+
+  def parse(path) do
+    args = ["-v", "quiet", "-stats", "-i", path, "-f", "null", "-"]
+
+    # "size=N/A time=00:03:00.00 bitrate=N/A speed= 674x"
+    case System.cmd("ffmpeg", args, stderr_to_stdout: true) do
+      {output, 0} -> parse_output(output, path)
+      {_, 1} -> {:error, :bad_file}
+      other -> {:error, other}
+    end
+  end
+
+  defp parse_output(output, path) do
+    with %{"time" => time} <- Regex.named_captures(~r/.*time=(?<time>[^\s]+).*/, output),
+         [hours, minutes, seconds, _milliseconds] <- ints(String.split(time, [":", "."])) do
+      duration = hours * 60 * 60 + minutes * 60 + seconds
+      {:ok, %MP3Stat{duration: duration, path: path}}
+    else
+      _ -> {:error, :bad_duration}
+    end
+  end
+
+  defp ints(strings) when is_list(strings) do
+    Enum.flat_map(strings, fn str ->
+      case Integer.parse(str) do
+        {int, ""} -> [int]
+        {_, _} -> []
+        :error -> []
+      end
+    end)
+  end
+end
diff --git a/lib/live_beats_web/endpoint.ex b/lib/live_beats_web/endpoint.ex
index 41d9ed1..42e7968 100644
--- a/lib/live_beats_web/endpoint.ex
+++ b/lib/live_beats_web/endpoint.ex
@@ -20,7 +20,7 @@ defmodule LiveBeatsWeb.Endpoint do
     at: "/",
     from: :live_beats,
     gzip: false,
-    only: ~w(assets fonts images favicon.ico robots.txt)
+    only: ~w(assets fonts images favicon.ico robots.txt uploads)
 
   # Code reloading can be explicitly enabled under the
   # :code_reloader configuration of your endpoint.
diff --git a/lib/live_beats_web/live/layout_component.ex b/lib/live_beats_web/live/layout_component.ex
new file mode 100644
index 0000000..530c3de
--- /dev/null
+++ b/lib/live_beats_web/live/layout_component.ex
@@ -0,0 +1,44 @@
+defmodule LiveBeatsWeb.LayoutComponent do
+  @moduledoc """
+  Component for rendering content inside layout without full DOM patch.
+  """
+  use LiveBeatsWeb, :live_component
+
+  def show_modal(module, attrs) do
+    send_update(__MODULE__, id: "layout", show: Enum.into(attrs, %{module: module}))
+  end
+
+  def hide_modal do
+    send_update(__MODULE__, id: "layout", show: nil)
+  end
+
+  def update(%{id: id} = assigns, socket) do
+    show =
+      case assigns[:show] do
+        %{module: _module, confirm: {text, attrs}} = show ->
+          show
+          |> Map.put_new(:patch_to, nil)
+          |> Map.put_new(:redirect_to, nil)
+          |> Map.merge(%{confirm_text: text, confirm_attrs: attrs})
+
+        nil ->
+          nil
+      end
+
+    {:ok, assign(socket, id: id, show: show)}
+  end
+
+  def render(assigns) do
+    ~H"""
+    <div class={unless @show, do: "hidden"}>
+      <%= if @show do %>
+        <.modal show id={@id} redirect_to={@show.redirect_to} patch_to={@show.patch_to}>
+          <.live_component module={@show.module} {@show} />
+          <:cancel>Cancel</:cancel>
+          <:confirm {@show.confirm_attrs}><%= @show.confirm_text %></:confirm>
+        </.modal>
+      <% end %>
+    </div>
+    """
+  end
+end
diff --git a/lib/live_beats_web/live/live_helpers.ex b/lib/live_beats_web/live/live_helpers.ex
index 5574458..48566db 100644
--- a/lib/live_beats_web/live/live_helpers.ex
+++ b/lib/live_beats_web/live/live_helpers.ex
@@ -82,27 +82,7 @@ defmodule LiveBeatsWeb.LiveHelpers do
     )
   end
 
-  def show_modal(%JS{} = js, id, opts) when is_binary(id) and is_list(opts) do
-    on_confirm = Keyword.get(opts, :on_confirm, %JS{}) |> hide_modal(id)
-    title = Keyword.get(opts, :title, "")
-    content = Keyword.get(opts, :content, "")
-
-    js
-    |> JS.inner_text(title, to: "##{id}-title")
-    |> JS.inner_text(content, to: "##{id}-content")
-    |> JS.set_attribute("phx-click", to: "##{id}-confirm", value: on_confirm)
-    |> show_modal(id)
-  end
-
-  def show_modal(id) when is_binary(id) do
-    show_modal(%JS{}, id, [])
-  end
-
-  def show_modal(id, opts) when is_binary(id) and is_list(opts) do
-    show_modal(%JS{}, id, opts)
-  end
-
-  def show_modal(%JS{} = js, id) when is_binary(id) do
+  def show_modal(js \\ %JS{}, id) when is_binary(id) do
     js
     |> JS.show(
       to: "##{id}",
@@ -116,6 +96,7 @@ defmodule LiveBeatsWeb.LiveHelpers do
         {"ease-out duration-300", "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95",
          "opacity-100 translate-y-0 sm:scale-100"}
     )
+    |> js_exec("##{id}-confirm", "focus", [])
   end
 
   def hide_modal(js \\ %JS{}, id) do
@@ -138,8 +119,8 @@ defmodule LiveBeatsWeb.LiveHelpers do
     assigns =
       assigns
       |> assign_new(:show, fn -> false end)
-      |> assign_new(:loading, fn -> false end)
-      |> assign_new(:return_to, fn -> nil end)
+      |> assign_new(:patch_to, fn -> nil end)
+      |> assign_new(:redirect_to, fn -> nil end)
       |> assign_new(:on_cancel, fn -> %JS{} end)
       |> assign_new(:on_confirm, fn -> %JS{} end)
       # slots
@@ -158,13 +139,16 @@ defmodule LiveBeatsWeb.LiveHelpers do
           phx-window-keydown={hide_modal(@on_cancel, @id)} phx-key="escape"
           phx-click-away={hide_modal(@on_cancel, @id)}
         >
-          <%= if @return_to do %>
-            <%= live_redirect "close", to: @return_to, data: [modal_return: true], class: "hidden" %>
+          <%= if @patch_to do %>
+            <.link patch_to={@patch_to} data-modal-return class="hidden"></.link>
+          <% end %>
+          <%= if @redirect_to do %>
+            <.link redirect_to={@redirect_to} data-modal-return class="hidden"></.link>
           <% end %>
           <div class="sm:flex sm:items-start">
             <div class={"mx-auto flex-shrink-0 flex items-center justify-center h-8 w-8 rounded-full bg-purple-100 sm:mx-0"}>
               <!-- Heroicon name: outline/plus -->
-              <svg xmlns="http://www.w3.org/2000/svg" class={"#{if @loading, do: "animate-ping"} h-6 w-6 text-purple-600"} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-purple-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
               </svg>
             </div>
@@ -173,31 +157,31 @@ defmodule LiveBeatsWeb.LiveHelpers do
                 <%= render_slot(@title) %>
               </h3>
               <div class="mt-2">
-                <p id={"#{@id}-content"} class={"text-sm text-gray-500 #{if @loading, do: "invisible"}"}>
+                <p id={"#{@id}-content"} class={"text-sm text-gray-500"}>
                   <%= render_slot(@inner_block) %>
                 </p>
               </div>
             </div>
           </div>
-          <div class={"mt-5 sm:mt-4 sm:flex sm:flex-row-reverse #{if @loading, do: "invisible"}"}>
+          <div class="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
             <%= for confirm <- @confirm do %>
               <button
                 id={"#{@id}-confirm"}
-                type="button"
                 class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm"
-                phx-click={@on_confirm |> hide_modal(@id)}
+                phx-click={@on_confirm}
+                phx-disable-with
                 tabindex="1"
-                autofocus
+                {assigns_to_attributes(confirm)}
               >
                 <%= render_slot(confirm) %>
               </button>
             <% end %>
             <%= for cancel <- @cancel do %>
               <button
-                type="button"
                 class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:w-auto sm:text-sm"
                 phx-click={hide_modal(@on_cancel, @id)}
                 tabindex="2"
+                {assigns_to_attributes(cancel)}
               >
                 <%= render_slot(cancel) %>
               </button>
@@ -218,9 +202,9 @@ defmodule LiveBeatsWeb.LiveHelpers do
 
     ~H"""
     <div class="bg-gray-200 flex-auto dark:bg-black rounded-full overflow-hidden" phx-update="ignore">
-      <div id="progress"
+      <div
+        id={@id}
         class="bg-lime-500 dark:bg-lime-400 h-1.5 w-0"
-        phx-hook="Progress"
         data-min={@min}
         data-max={@max}
         data-val={@value}>
@@ -300,14 +284,11 @@ defmodule LiveBeatsWeb.LiveHelpers do
             </tr>
           </thead>
           <tbody class="bg-white divide-y divide-gray-100">
-            <%= for row <- @rows do %>
+            <%= for {row, i} <- Enum.with_index(@rows) do %>
               <tr id={@row_id && @row_id.(row)} class="hover:bg-gray-50">
-                <%= for {col, i} <- Enum.with_index(@col) do %>
+                <%= for col <- @col do %>
                   <td class={"px-6 py-3 whitespace-nowrap text-sm font-medium text-gray-900 #{if i == 0, do: "max-w-0 w-full"}"}>
                     <div class="flex items-center space-x-3 lg:pl-2">
-                      <%= if i == 0 do %>
-                        <div class="flex-shrink-0 w-2.5 h-2.5 rounded-full bg-pink-600 mr-2" aria-hidden="true"></div>
-                      <% end %>
                       <%= render_slot(col, row) %>
                     </div>
                   </td>
@@ -320,4 +301,52 @@ defmodule LiveBeatsWeb.LiveHelpers do
     </div>
     """
   end
+
+  def live_table(assigns) do
+    assigns =
+      assigns
+      |> assign_new(:row_id, fn -> false end)
+      |> assign_new(:active_id, fn -> nil end)
+
+    ~H"""
+    <div class="hidden mt-8 sm:block">
+      <div class="align-middle inline-block min-w-full border-b border-gray-200">
+        <table class="min-w-full">
+          <thead>
+            <tr class="border-t border-gray-200">
+              <%= for col <- @col do %>
+                <th
+                  class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  <span class="lg:pl-2"><%= col.label %></span>
+                </th>
+              <% end %>
+            </tr>
+          </thead>
+          <tbody class="bg-white divide-y divide-gray-100">
+            <%= for {row, i} <- Enum.with_index(@rows) do %>
+              <.live_component
+                module={@module}
+                id={@row_id.(row)}
+                row={row} col={@col}
+                index={i}
+                active_id={@active_id}
+                class="hover:bg-gray-50"
+              />
+            <% end %>
+          </tbody>
+        </table>
+      </div>
+    </div>
+    """
+  end
+
+
+  @doc """
+  Calls a wired up event listener to call a function with arguments.
+
+      window.addEventListener("js:exec", e => e.target[e.detail.call](...e.detail.args))
+  """
+  def js_exec(js \\ %JS{}, to, call, args) do
+    JS.dispatch(js, "js:exec", to: to, detail: %{call: call, args: args})
+  end
 end
diff --git a/lib/live_beats_web/live/modal_component.ex b/lib/live_beats_web/live/modal_component.ex
deleted file mode 100644
index b490617..0000000
--- a/lib/live_beats_web/live/modal_component.ex
+++ /dev/null
@@ -1,28 +0,0 @@
-defmodule LiveBeatsWeb.ModalComponent do
-  use LiveBeatsWeb, :live_component
-
-  @impl true
-  def render(assigns) do
-    ~H"""
-    <div
-      id={@id}
-      class="phx-modal"
-      phx-capture-click="close"
-      phx-window-keydown="close"
-      phx-key="escape"
-      phx-target={@myself}
-      phx-page-loading>
-
-      <div class="phx-modal-content">
-        <%= live_patch raw("&times;"), to: @return_to, class: "phx-modal-close" %>
-        <%= live_component @component, @opts %>
-      </div>
-    </div>
-    """
-  end
-
-  @impl true
-  def handle_event("close", _, socket) do
-    {:noreply, push_patch(socket, to: socket.assigns.return_to)}
-  end
-end
diff --git a/lib/live_beats_web/live/player_live.ex b/lib/live_beats_web/live/player_live.ex
index bd07f77..87fd56e 100644
--- a/lib/live_beats_web/live/player_live.ex
+++ b/lib/live_beats_web/live/player_live.ex
@@ -1,30 +1,37 @@
 defmodule LiveBeatsWeb.PlayerLive do
   use LiveBeatsWeb, :live_view
 
+  alias LiveBeats.MediaLibrary
+  alias LiveBeats.MediaLibrary.Song
+
   on_mount {LiveBeatsWeb.UserAuth, :current_user}
 
   def render(assigns) do
     ~H"""
     <!-- player -->
-    <div class="w-full">
+    <div id="audio-player" phx-hook="AudioPlayer" class="w-full" >
+      <div phx-update="ignore">
+        <audio></audio>
+      </div>
       <div class="bg-white dark:bg-gray-800 p-4">
         <div class="flex items-center space-x-3.5 sm:space-x-5 lg:space-x-3.5 xl:space-x-5">
           <div class="pr-5">
             <div class="min-w-0 flex-col space-y-0.5">
-              <h2 class="text-black dark:text-white text-sm sm:text-sm lg:text-sm xl:text-sm font-semibold truncate">
-                Black Sands
-              </h2>
-              <p class="text-gray-500 dark:text-gray-400 text-sm sm:text-sm lg:text-sm xl:text-sm font-medium">
-                Bonobo
-              </p>
+                <h2 class="text-black dark:text-white text-sm sm:text-sm lg:text-sm xl:text-sm font-semibold truncate">
+                  <%= 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.artist, else: raw("&nbsp;") %>
+                </p>
             </div>
           </div>
 
-          <.progress_bar />
+          <.progress_bar id="player-progress" />
 
-          <div class="text-gray-500 dark:text-gray-400 flex-row justify-between text-sm font-medium tabular-nums">
-            <div><%= @time %></div>
-            <div><%= @count %></div>
+          <div class="text-gray-500 dark:text-gray-400 flex-row justify-between text-sm font-medium tabular-nums"
+            phx-update="ignore">
+            <div id="player-time"></div>
+            <div id="player-duration"></div>
           </div>
         </div>
       </div>
@@ -46,12 +53,21 @@ defmodule LiveBeatsWeb.PlayerLive do
             <path d="M17 0L9 6l8 6V0z" fill="currentColor" />
           </svg>
         </button>
-        <button type="button" class="mx-auto scale-75">
-          <svg width="50" height="50" fill="none">
-            <circle class="text-gray-300 dark:text-gray-500" cx="25" cy="25" r="24" stroke="currentColor" stroke-width="1.5" />
-            <path d="M18 16h4v18h-4V16zM28 16h4v18h-4z" fill="currentColor" />
-          </svg>
+        <!-- pause -->
+        <button type="button" class="mx-auto scale-75" phx-click={JS.push("play_pause") |> js_play_pause()}>
+          <%= if @playing do %>
+            <svg id="player-pause" width="50" height="50" fill="none">
+              <circle class="text-gray-300 dark:text-gray-500" cx="25" cy="25" r="24" stroke="currentColor" stroke-width="1.5" />
+              <path d="M18 16h4v18h-4V16zM28 16h4v18h-4z" fill="currentColor" />
+            </svg>
+          <% else %>
+            <svg id="player-play" width="50" height="50" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <circle id="svg_1" stroke-width="0.8" stroke="currentColor" r="11.4" cy="12" cx="12" class="text-gray-300 dark:text-gray-500"/>
+              <path stroke="null" fill="currentColor" transform="rotate(90 12.8947 12.3097)" id="svg_6" d="m9.40275,15.10014l3.49194,-5.58088l3.49197,5.58088l-6.98391,0z" stroke-width="1.5" fill="none"/>
+            </svg>
+          <% end %>
         </button>
+        <!-- /pause -->
         <button type="button" class="mx-auto scale-75">
           <svg width="34" height="39" fill="none">
             <path d="M12.878 26.12c1.781 0 3.09-1.066 3.085-2.515.004-1.104-.665-1.896-1.824-2.075v-.068c.912-.235 1.505-.95 1.5-1.93.005-1.283-1.048-2.379-2.727-2.379-1.602 0-2.89.968-2.932 2.387h1.274c.03-.801.784-1.287 1.64-1.287.892 0 1.475.541 1.471 1.346.004.844-.673 1.398-1.64 1.398h-.738v1.074h.737c1.21 0 1.91.614 1.91 1.491 0 .848-.738 1.424-1.765 1.424-.946 0-1.683-.486-1.734-1.262H9.797c.055 1.424 1.317 2.395 3.08 2.395zm7.734.025c2.016 0 3.196-1.645 3.196-4.504 0-2.838-1.197-4.488-3.196-4.488-2.003 0-3.196 1.645-3.2 4.488 0 2.855 1.18 4.5 3.2 4.504zm0-1.138c-1.18 0-1.892-1.185-1.892-3.366.004-2.174.716-3.371 1.892-3.371 1.172 0 1.888 1.197 1.888 3.37 0 2.182-.712 3.367-1.888 3.367z" fill="currentColor" />
@@ -70,18 +86,68 @@ defmodule LiveBeatsWeb.PlayerLive do
         </button>
       </div>
 
+      <%= if @error do %>
+        <.modal show id="enable-audio" on_confirm={js_play_pause() |> hide_modal("enable-audio")}>
+          <:title>Start Listening now</:title>
+          Your browser needs a click event to enable playback
+          <:confirm>Listen Now</:confirm>
+        </.modal>
+      <% end %>
     </div>
     <!-- /player -->
     """
   end
 
   def mount(_parmas, _session, socket) do
-    # if connected?(socket), do: Process.send_after(self(), :tick, 1000)
-    {:ok, assign(socket, time: inspect(System.system_time()), count: 0), layout: false}
+    if connected?(socket) and socket.assigns.current_user do
+      MediaLibrary.subscribe(socket.assigns.current_user)
+    end
+
+    {:ok, assign(socket, song: nil, playing: false, error: false), layout: false}
   end
 
-  def handle_info(:tick, socket) do
-    Process.send_after(self(), :tick, 1000)
-    {:noreply, update(socket, :count, &(&1 + 1))}
+  def handle_event("play_pause", _, socket) do
+    %{song: song, playing: playing} = socket.assigns
+
+    IO.inspect({:play_pause, playing})
+
+    cond do
+      song && playing ->
+        MediaLibrary.pause_song(song)
+        {:noreply, assign(socket, playing: false)}
+
+      song ->
+        MediaLibrary.play_song(song)
+        {:noreply, assign(socket, playing: true)}
+
+      true ->
+        {:noreply, assign(socket, playing: false)}
+    end
+  end
+
+  def handle_event("audio-rejected", _, socket) do
+    {:noreply, assign(socket, error: true)}
+  end
+
+  def handle_event("audio-accepted", _, socket) do
+    {:noreply, assign(socket, error: false)}
+  end
+
+  def handle_info({:pause, _}, socket) do
+    {:noreply,
+     socket
+     |> push_event("pause", %{})
+     |> assign(playing: false)}
+  end
+
+  def handle_info({:play, %Song{} = song, %{began_at: at}}, socket) do
+    {:noreply,
+     socket
+     |> push_event("play", %{began_at: at, url: Path.join(LiveBeatsWeb.Endpoint.url(), song.mp3_path)})
+     |> assign(song: song, playing: true)}
+  end
+
+  defp js_play_pause(js \\ %JS{}) do
+    JS.dispatch(js, "js:play_pause", to: "#audio-player")
   end
 end
diff --git a/lib/live_beats_web/live/song_live/delete_dialog_component.ex b/lib/live_beats_web/live/song_live/delete_dialog_component.ex
deleted file mode 100644
index a94b89e..0000000
--- a/lib/live_beats_web/live/song_live/delete_dialog_component.ex
+++ /dev/null
@@ -1,47 +0,0 @@
-defmodule LiveBeatsWeb.SongLive.DeleteDialogComponent do
-  use LiveBeatsWeb, :live_component
-
-  alias LiveBeats.MediaLibrary
-
-  def send_show(%MediaLibrary.Song{} = song) do
-    send_update(__MODULE__, id: "delete-modal", show: song)
-  end
-
-  @impl true
-  def render(assigns) do
-    ~H"""
-    <div>
-      <.modal
-        id="delete-modal"
-        loading={is_nil(@song.id)}
-        on_confirm={JS.push("confirm-delete", value: %{id: @song.id}) |> hide("#song-#{@song.id}")}
-        on_cancel={JS.push("cancel", target: @myself)}>
-
-        Are you sure you want to delete "<%= @song.title %>"?
-
-        <:cancel>Cancel</:cancel>
-        <:confirm>Delete</:confirm>
-      </.modal>
-    </div>
-    """
-  end
-
-  @impl true
-  def update(%{show: %MediaLibrary.Song{} = song}, socket) do
-    {:ok, assign(socket, song: song)}
-  end
-
-  def update(%{} = _assigns, socket) do
-    {:ok, assign_defaults(socket)}
-  end
-
-  @impl true
-  def handle_event("cancel", _, socket) do
-    IO.inspect({:cancel})
-    {:noreply, assign_defaults(socket)}
-  end
-
-  defp assign_defaults(socket) do
-    assign(socket, song: %MediaLibrary.Song{})
-  end
-end
diff --git a/lib/live_beats_web/live/song_live/form_component.ex b/lib/live_beats_web/live/song_live/form_component.ex
deleted file mode 100644
index debfc66..0000000
--- a/lib/live_beats_web/live/song_live/form_component.ex
+++ /dev/null
@@ -1,102 +0,0 @@
-defmodule LiveBeatsWeb.SongLive.FormComponent do
-  use LiveBeatsWeb, :live_component
-
-  alias LiveBeats.{MediaLibrary, ID3}
-
-  @impl true
-  def update(%{song: song} = assigns, socket) do
-    changeset = MediaLibrary.change_song(song)
-
-    {:ok,
-     socket
-     |> assign(assigns)
-     |> assign(changeset: changeset, tmp_path: nil)
-     |> allow_upload(:mp3,
-       auto_upload: true,
-       progress: &handle_progress/3,
-       accept: ~w(.mp3),
-       max_entries: 1,
-       max_file_size: 20_000_000
-     )}
-  end
-
-  @impl true
-  def handle_event("validate", %{"song" => song_params}, socket) do
-    changeset =
-      socket.assigns.song
-      |> MediaLibrary.change_song(song_params)
-      |> Map.put(:action, :validate)
-
-    {:noreply, assign(socket, :changeset, changeset)}
-  end
-
-  def handle_event("save", %{"song" => song_params}, socket) do
-    IO.inspect({:save, song_params})
-    save_song(socket, socket.assigns.action, song_params)
-  end
-
-  defp save_song(socket, :edit, song_params) do
-    case MediaLibrary.update_song(socket.assigns.song, song_params) do
-      {:ok, _song} ->
-        {:noreply,
-         socket
-         |> put_flash(:info, "Song updated successfully")
-         |> push_redirect(to: socket.assigns.return_to)}
-
-      {:error, %Ecto.Changeset{} = changeset} ->
-        {:noreply, assign(socket, :changeset, changeset)}
-    end
-  end
-
-  defp save_song(socket, :new, song_params) do
-    case MediaLibrary.create_song(song_params) do
-      {:ok, _song} ->
-        {:noreply,
-         socket
-         |> put_flash(:info, "Song created successfully")
-         |> push_redirect(to: socket.assigns.return_to)}
-
-      {:error, %Ecto.Changeset{} = changeset} ->
-        {:noreply, assign(socket, changeset: changeset)}
-    end
-  end
-
-  defp handle_progress(:mp3, entry, socket) do
-    changeset = socket.assigns.changeset
-
-    if entry.done? do
-      new_socket =
-        consume_uploaded_entry(socket, entry, fn %{} = meta ->
-          case ID3.parse(meta.path) do
-            {:ok, %ID3{} = id3} ->
-              new_changeset =
-                changeset
-                |> Ecto.Changeset.put_change(:title, id3.title)
-                |> Ecto.Changeset.put_change(:artist, id3.artist)
-
-              socket
-              |> assign(changeset: new_changeset)
-              |> put_tmp_mp3(meta.path)
-
-            {:error, _} ->
-              put_tmp_mp3(socket, meta.path)
-          end
-        end)
-
-      {:noreply, new_socket}
-    else
-      {:noreply, socket}
-    end
-  end
-
-  defp put_tmp_mp3(socket, path) do
-    if socket.assigns.tmp_path, do: File.rm!(socket.assigns.tmp_path)
-    {:ok, tmp_path} = Plug.Upload.random_file("temp_mp3")
-    File.cp!(path, tmp_path)
-    assign(socket, tmp_path: tmp_path)
-  end
-
-
-  defp file_error(%{kind: :too_large} = assigns), do: ~H|larger than 10MB|
-  defp file_error(%{kind: :not_accepted} = assigns), do: ~H|not a valid MP3 file|
-end
diff --git a/lib/live_beats_web/live/song_live/form_component.html.heex b/lib/live_beats_web/live/song_live/form_component.html.heex
deleted file mode 100644
index 772a089..0000000
--- a/lib/live_beats_web/live/song_live/form_component.html.heex
+++ /dev/null
@@ -1,131 +0,0 @@
-<div>
-  <h2><%= @title %></h2>
-
-  <.form
-    let={f}
-    for={@changeset}
-    id="song-form"
-    class="space-y-8 divide-y divide-gray-200"
-    phx-target={@myself}
-    phx-change="validate"
-    phx-submit="save">
-
-    <div class="space-y-8 divide-y divide-gray-200 sm:space-y-5">
-      <div class="pt-8 space-y-6 sm:pt-10 sm:space-y-5">
-        <div class="space-y-6 sm:space-y-5">
-          <div class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5">
-            <label for="song-form_title" class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2">
-              Title
-            </label>
-            <div class="mt-1 sm:mt-0 sm:col-span-2">
-              <%= text_input f, :title, class: "max-w-lg block w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:max-w-xs sm:text-sm border-gray-300 rounded-md" %>
-            </div>
-          </div>
-          <%= error_tag f, :title %>
-
-          <div class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5">
-            <label for="song-form_artist" class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2">
-              Artist
-            </label>
-            <div class="mt-1 sm:mt-0 sm:col-span-2">
-              <%= text_input f, :artist, class: "max-w-lg block w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:max-w-xs sm:text-sm border-gray-300 rounded-md" %>
-            </div>
-          </div>
-          <%= error_tag f, :artist %>
-
-          <div class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5">
-            <label for="country" class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2">
-              Genre
-            </label>
-            <div class="mt-1 sm:mt-0 sm:col-span-2">
-              <select id="song-form_genre_id" name="genre_id" class="max-w-lg block focus:ring-indigo-500 focus:border-indigo-500 w-full shadow-sm sm:max-w-xs sm:text-sm border-gray-300 rounded-md">
-                <%= for genre <- @genres do %>
-                  <option value={genre.id}><%= genre.title %></option>
-                <% end %>
-              </select>
-            </div>
-          </div>
-
-          <!-- upload -->
-          <div class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5">
-            <label for="cover-photo" class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2">
-              MP3
-            </label>
-            <div class="mt-1 sm:mt-0 sm:col-span-2" phx-drop-target={@uploads.mp3.ref}>
-
-              <%= if Enum.any?(@uploads.mp3.errors) do %>
-                <div class="rounded-md bg-red-50 p-4 mb-2">
-                  <div class="flex">
-                    <div class="flex-shrink-0">
-                      <svg class="h-5 w-5 text-red-400" x-description="Heroicon name: solid/x-circle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"></path>
-                      </svg>
-                    </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 {_ref, error} <- @uploads.mp3.errors do %>
-                            <li><.file_error kind={error} /></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 a file</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">
-                    MP3 up to 20MB
-                  </p>
-                  <%= if Enum.any?(@uploads.mp3.entries) do %>
-                    <br/>
-                    <%= for entry <- @uploads.mp3.entries do %>
-                      <div class="ring-4 ring-purple-100 rounded-full">
-                        <%= entry.client_name %>
-                      </div>
-                      <br/>
-                      <div class="bg-gray-200 flex-auto rounded-full overflow-hidden">
-                        <div id="progress"
-                          class="bg-purple-500 dark:bg-purple-400 h-1.5 w-0"
-                          style={"width: #{entry.progress}%;"}>
-                        </div>
-                      </div>
-                    <% end %>
-                  <% end %>
-                </div>
-              </div>
-            </div>
-          </div>
-          <!-- /upload -->
-
-        </div>
-      </div>
-    </div>
-
-    <div class="pt-5">
-      <div class="flex justify-end">
-        <button type="button" class="bg-white py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
-          Cancel
-        </button>
-        <button type="submit" class="ml-3 inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
-          Save
-        </button>
-      </div>
-    </div>
-  </.form>
-</div>
diff --git a/lib/live_beats_web/live/song_live/index.ex b/lib/live_beats_web/live/song_live/index.ex
index 387cdac..454d36b 100644
--- a/lib/live_beats_web/live/song_live/index.ex
+++ b/lib/live_beats_web/live/song_live/index.ex
@@ -1,9 +1,9 @@
 defmodule LiveBeatsWeb.SongLive.Index do
   use LiveBeatsWeb, :live_view
 
-  alias LiveBeats.MediaLibrary
+  alias LiveBeats.{MediaLibrary, MP3Stat}
   alias LiveBeats.MediaLibrary.Song
-  alias LiveBeatsWeb.SongLive.DeleteDialogComponent
+  alias LiveBeatsWeb.LayoutComponent
 
   def render(assigns) do
     ~H"""
@@ -15,51 +15,107 @@ defmodule LiveBeatsWeb.SongLive.Index do
       </:actions>
     </.title_bar>
 
-    <%= if @live_action in [:new, :edit] do %>
-      <.modal show id="add-songs" return_to={Routes.song_index_path(@socket, :index)}>
-        <.live_component
-          module={LiveBeatsWeb.SongLive.UploadFormComponent}
-          title={@page_title}
-          id={@song.id || :new}
-          action={@live_action}
-          return_to={Routes.song_index_path(@socket, :index)}
-          song={@song}
-          genres={@genres}
-        />
+    <%= for song <- @songs, id = "delete-modal-#{song.id}" do %>
+      <.modal
+        id={id}
+        on_confirm={JS.push("delete", value: %{id: song.id}) |> hide_modal(id) |> hide("#song-#{song.id}")}
+      >
+        Are you sure you want to delete "<%= song.title %>"?
+        <:cancel>Cancel</:cancel>
+        <:confirm>Delete</:confirm>
       </.modal>
     <% end %>
 
-
-    <.modal id="delete-modal">
-      <:cancel>Cancel</:cancel>
-      <:confirm>Delete</:confirm>
-    </.modal>
-
-    <.table rows={@songs} row_id={fn song -> "song-#{song.id}" end}>
-      <:col let={song} label="Title"><%= song.title %></:col>
-      <:col let={song} label="Artist"><%= song.artist %></:col>
-      <:col let={song} label="Duration"><%= song.duration %></:col>
-      <:col let={song} label="">
-        <.link redirect_to={Routes.song_show_path(@socket, :show, song)}>Show</.link>
-        <.link patch_to={Routes.song_index_path(@socket, :edit, song)}>Edit</.link>
-        <.link phx-click={
-          show_modal(
-            "delete-modal",
-            content: "Are you sure you want to delete \"#{song.title}\"?",
-            on_confirm: JS.push("delete", value: %{id: song.id}) |> hide("#song-#{song.id}")
-          )
-        }>Delete</.link>
+    <.live_table
+      module={LiveBeatsWeb.SongLive.SongRow}
+      rows={@songs}
+      row_id={fn song -> "song-#{song.id}" end}
+    >
+      <:col let={%{song: song}} label="Title"><%= song.title %></:col>
+      <:col let={%{song: song}} label="Artist"><%= song.artist %></:col>
+      <:col let={%{song: song}} label="Duration"><%= MP3Stat.to_mmss(song.duration) %></:col>
+      <:col let={%{song: song}} label="">
+        <.link phx-click={show_modal("delete-modal-#{song.id}")} class="inline-flex items-center px-3 py-2 text-sm leading-4 font-medium">
+          <svg xmlns="http://www.w3.org/2000/svg" class="-ml-0.5 mr-2 h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
+            <path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd" />
+          </svg>
+          Delete
+        </.link>
       </:col>
-    </.table>
+    </.live_table>
     """
   end
 
   def mount(_params, _session, socket) do
-    {:ok, assign(socket, :songs, list_songs())}
+    if connected?(socket) do
+      MediaLibrary.subscribe(socket.assigns.current_user)
+    end
+    {:ok, assign(socket, songs: list_songs(), active_id: nil)}
   end
 
   def handle_params(params, _url, socket) do
-    {:noreply, apply_action(socket, socket.assigns.live_action, params)}
+    {:noreply, socket |> apply_action(socket.assigns.live_action, params) |> maybe_show_modal()}
+  end
+
+  def handle_event("play-song", %{"id" => id}, socket) do
+    MediaLibrary.play_song(id)
+    {:noreply, socket}
+  end
+
+  def handle_event("delete", %{"id" => id}, socket) do
+    song = MediaLibrary.get_song!(id)
+    {:ok, _} = MediaLibrary.delete_song(song)
+    {:noreply, socket}
+  end
+
+  def handle_info({_ref, {:duration, entry_ref, result}}, socket) do
+    IO.inspect({:async_duration, entry_ref, result})
+    {:noreply, socket}
+  end
+
+  def handle_info({:play, %Song{} = song, _meta}, socket) do
+    {:noreply, play_song(socket, song)}
+  end
+
+  def handle_info({:pause, %Song{} = song}, socket) do
+    {:noreply, pause_song(socket, song.id)}
+  end
+
+  defp pause_song(socket, song_id) do
+    if old = Enum.find(socket.assigns.songs, fn song -> song.id == song_id end) do
+      send_update(LiveBeatsWeb.SongLive.SongRow, id: "song-#{old.id}", action: :deactivate)
+    end
+    socket
+  end
+
+  defp play_song(socket, %Song{} = song) do
+    socket = pause_song(socket, socket.assigns.active_id)
+    next = Enum.find(socket.assigns.songs, &(&1.id == song.id))
+
+    if next do
+      send_update(LiveBeatsWeb.SongLive.SongRow, id: "song-#{next.id}", action: :activate)
+    end
+
+    assign(socket, active_id: next.id)
+  end
+
+  defp maybe_show_modal(socket) do
+    if socket.assigns.live_action in [:new, :edit] do
+      LayoutComponent.show_modal(LiveBeatsWeb.SongLive.UploadFormComponent, %{
+        confirm: {"Save", type: "submit", form: "song-form"},
+        patch_to: Routes.song_index_path(socket, :index),
+        id: socket.assigns.song.id || :new,
+        title: socket.assigns.page_title,
+        action: socket.assigns.live_action,
+        song: socket.assigns.song,
+        current_user: socket.assigns.current_user,
+        genres: socket.assigns.genres
+      })
+    else
+      LayoutComponent.hide_modal()
+    end
+
+    socket
   end
 
   defp apply_action(socket, :edit, %{"id" => id}) do
@@ -70,7 +126,7 @@ defmodule LiveBeatsWeb.SongLive.Index do
 
   defp apply_action(socket, :new, _params) do
     socket
-    |> assign(:page_title, "New Song")
+    |> assign(:page_title, "Add Songs")
     |> assign(:song, %Song{})
   end
 
@@ -80,13 +136,7 @@ defmodule LiveBeatsWeb.SongLive.Index do
     |> assign(:song, nil)
   end
 
-  def handle_event("delete", %{"id" => id}, socket) do
-    song = MediaLibrary.get_song!(id)
-    {:ok, _} = MediaLibrary.delete_song(song)
-    {:noreply, assign(socket, :songs, list_songs())}
-  end
-
   defp list_songs do
-    MediaLibrary.list_songs()
+    MediaLibrary.list_songs(50)
   end
 end
diff --git a/lib/live_beats_web/live/song_live/show.ex b/lib/live_beats_web/live/song_live/show.ex
deleted file mode 100644
index 7e3de92..0000000
--- a/lib/live_beats_web/live/song_live/show.ex
+++ /dev/null
@@ -1,21 +0,0 @@
-defmodule LiveBeatsWeb.SongLive.Show do
-  use LiveBeatsWeb, :live_view
-
-  alias LiveBeats.MediaLibrary
-
-  @impl true
-  def mount(_params, _session, socket) do
-    {:ok, socket}
-  end
-
-  @impl true
-  def handle_params(%{"id" => id}, _, socket) do
-    {:noreply,
-     socket
-     |> assign(:page_title, page_title(socket.assigns.live_action))
-     |> assign(:song, MediaLibrary.get_song!(id))}
-  end
-
-  defp page_title(:show), do: "Show Song"
-  defp page_title(:edit), do: "Edit Song"
-end
diff --git a/lib/live_beats_web/live/song_live/show.html.heex b/lib/live_beats_web/live/song_live/show.html.heex
deleted file mode 100644
index e1a29ed..0000000
--- a/lib/live_beats_web/live/song_live/show.html.heex
+++ /dev/null
@@ -1,47 +0,0 @@
-<h1>Show Song</h1>
-
-<%= if @live_action in [:edit] do %>
-  <%#= live_modal LiveBeatsWeb.SongLive.FormComponent,
-    id: @song.id,
-    title: @page_title,
-    action: @live_action,
-    song: @song,
-    return_to: Routes.song_show_path(@socket, :show, @song) %>
-<% end %>
-
-<ul>
-
-  <li>
-    <strong>Album artist:</strong>
-    <%= @song.album_artist %>
-  </li>
-
-  <li>
-    <strong>Artist:</strong>
-    <%= @song.artist %>
-  </li>
-
-  <li>
-    <strong>Duration:</strong>
-    <%= @song.duration %>
-  </li>
-
-  <li>
-    <strong>Title:</strong>
-    <%= @song.title %>
-  </li>
-
-  <li>
-    <strong>Date recorded:</strong>
-    <%= @song.date_recorded %>
-  </li>
-
-  <li>
-    <strong>Date released:</strong>
-    <%= @song.date_released %>
-  </li>
-
-</ul>
-
-<span><%= live_patch "Edit", to: Routes.song_show_path(@socket, :edit, @song), class: "button" %></span> |
-<span><%= live_redirect "Back", to: Routes.song_index_path(@socket, :index) %></span>
diff --git a/lib/live_beats_web/live/song_live/song_entry_component.ex b/lib/live_beats_web/live/song_live/song_entry_component.ex
index 430aa83..4aba2fd 100644
--- a/lib/live_beats_web/live/song_live/song_entry_component.ex
+++ b/lib/live_beats_web/live/song_live/song_entry_component.ex
@@ -1,11 +1,19 @@
 defmodule LiveBeatsWeb.SongLive.SongEntryComponent do
   use LiveBeatsWeb, :live_component
 
+  alias LiveBeats.MP3Stat
+
   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">
       <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">Title</label>
+        <label for="name" class="block text-xs font-medium text-gray-900">
+          <%= if @duration do %>
+            Title <span class="text-gray-400">(<%= MP3Stat.to_mmss(@duration) %>)</span>
+          <% else %>
+            Title <span class="text-gray-400">(calculating duration...)</span>
+          <% end %>
+        </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]") %>
@@ -33,6 +41,7 @@ defmodule LiveBeatsWeb.SongLive.SongEntryComponent do
      |> assign(:errors, changeset.errors)
      |> assign(title: Ecto.Changeset.get_field(changeset, :title))
      |> assign(artist: Ecto.Changeset.get_field(changeset, :artist))
+     |> assign(duration: IO.inspect(Ecto.Changeset.get_field(changeset, :duration)))
      |> assign_new(:progress, fn -> 0 end)}
   end
 end
diff --git a/lib/live_beats_web/live/song_live/song_row.ex b/lib/live_beats_web/live/song_live/song_row.ex
new file mode 100644
index 0000000..70a429d
--- /dev/null
+++ b/lib/live_beats_web/live/song_live/song_row.ex
@@ -0,0 +1,60 @@
+defmodule LiveBeatsWeb.SongLive.SongRow do
+  use LiveBeatsWeb, :live_component
+
+  def render(assigns) do
+    ~H"""
+    <tr id={@id} class={@class}}>
+      <%= for {col, i} <- Enum.with_index(@col) do %>
+        <td
+          class={"px-6 py-3 whitespace-nowrap text-sm font-medium text-gray-900 #{if i == 0, do: "max-w-0 w-full cursor-pointer"}"}
+          phx-click={JS.push("play-song", value: %{id: @song.id})}
+         >
+          <div class="flex items-center space-x-3 lg:pl-2">
+              <%= if i == 0 do %>
+                <%= if @active 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>
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 -mt-1 -ml-1" viewBox="0 0 20 20" fill="currentColor">
+                      <path fill-rule="evenodd" d="M9.383 3.076A1 1 0 0110 4v12a1 1 0 01-1.707.707L4.586 13H2a1 1 0 01-1-1V8a1 1 0 011-1h2.586l3.707-3.707a1 1 0 011.09-.217zM14.657 2.929a1 1 0 011.414 0A9.972 9.972 0 0119 10a9.972 9.972 0 01-2.929 7.071 1 1 0 01-1.414-1.414A7.971 7.971 0 0017 10c0-2.21-.894-4.208-2.343-5.657a1 1 0 010-1.414zm-2.829 2.828a1 1 0 011.415 0A5.983 5.983 0 0115 10a5.984 5.984 0 01-1.757 4.243 1 1 0 01-1.415-1.415A3.984 3.984 0 0013 10a3.983 3.983 0 00-1.172-2.828 1 1 0 010-1.415z" clip-rule="evenodd" />
+                    </svg>
+                  </span>
+                <% else %>
+                  <span class="flex relative w-6 -translate-x-1">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor">
+                      <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd" />
+                    </svg>
+                  </span>
+                <% end %>
+              <% end %>
+              <%= render_slot(col, assigns) %>
+          </div>
+        </td>
+      <% end %>
+    </tr>
+    """
+  end
+
+  def update(%{action: :activate}, socket) do
+    {:ok, assign(socket, active: true)}
+  end
+
+  def update(%{action: :deactivate}, socket) do
+    {:ok, assign(socket, active: false)}
+  end
+
+  def update(%{action: action}, _socket) do
+    raise ArgumentError, "unkown action #{inspect(action)}"
+  end
+
+  def update(assigns, socket) do
+    {:ok,
+     assign(socket,
+       id: assigns.id,
+       song: assigns.row,
+       col: assigns.col,
+       class: assigns.class,
+       index: assigns.index,
+       active: false
+     )}
+  end
+end
diff --git a/lib/live_beats_web/live/song_live/upload_form_component.ex b/lib/live_beats_web/live/song_live/upload_form_component.ex
index 39af6cd..d221392 100644
--- a/lib/live_beats_web/live/song_live/upload_form_component.ex
+++ b/lib/live_beats_web/live/song_live/upload_form_component.ex
@@ -1,12 +1,22 @@
 defmodule LiveBeatsWeb.SongLive.UploadFormComponent do
   use LiveBeatsWeb, :live_component
 
-  alias LiveBeats.{MediaLibrary, ID3}
+  alias LiveBeats.{MediaLibrary, MP3Stat}
   alias LiveBeatsWeb.SongLive.SongEntryComponent
 
   @max_songs 10
 
   @impl true
+  def update(%{action: {:duration, entry_ref, result}}, socket) do
+    case result do
+      {:ok, %MP3Stat{} = stat} ->
+        {:ok, put_stats(socket, entry_ref, stat)}
+
+      _ ->
+        {:ok, cancel_upload(socket, :mp3, entry_ref)}
+    end
+  end
+
   def update(%{song: song} = assigns, socket) do
     {:ok,
      socket
@@ -50,9 +60,10 @@ defmodule LiveBeatsWeb.SongLive.UploadFormComponent do
   end
 
   def handle_event("save", %{"songs" => song_params}, socket) do
+    %{current_user: current_user} = socket.assigns
     changesets = socket.assigns.changesets
 
-    case MediaLibrary.import_songs(changesets, &consume_entry(socket, &1, &2)) do
+    case MediaLibrary.import_songs(current_user, changesets, &consume_entry(socket, &1, &2)) do
       {:ok, songs} ->
         {:noreply,
          socket
@@ -92,16 +103,35 @@ defmodule LiveBeatsWeb.SongLive.UploadFormComponent do
 
   defp handle_progress(:mp3, entry, socket) do
     send_update(SongEntryComponent, id: entry.ref, progress: entry.progress)
-    {:noreply, put_new_changeset(socket, entry)}
-  end
+    lv = self()
 
-  defp put_tmp_mp3(changeset, path) do
-    {:ok, tmp_path} = Plug.Upload.random_file("tmp_mp3")
-    File.cp!(path, tmp_path)
-    Ecto.Changeset.put_change(changeset, :tmp_mp3_path, tmp_path)
+    if entry.done? do
+      consume_uploaded_entry(socket, entry, fn %{path: path} ->
+        Task.Supervisor.start_child(LiveBeats.TaskSupervisor, fn ->
+          result = LiveBeats.MP3Stat.parse(path)
+
+          send_update(lv, __MODULE__,
+            id: socket.assigns.id,
+            action: {:duration, entry.ref, result}
+          )
+        end)
+
+        {:postpone, :ok}
+      end)
+    end
+
+    {:noreply, put_new_changeset(socket, entry)}
   end
 
   defp file_error(%{kind: :too_large} = assigns), do: ~H|larger than 10MB|
   defp file_error(%{kind: :not_accepted} = assigns), do: ~H|not a valid MP3 file|
   defp file_error(%{kind: :too_many_files} = assigns), do: ~H|too many files|
+
+  defp put_stats(socket, entry_ref, %MP3Stat{} = stat) do
+    if changeset = get_changeset(socket, entry_ref) do
+      update_changeset(socket, MediaLibrary.put_stats(changeset, stat), entry_ref)
+    else
+      socket
+    end
+  end
 end
diff --git a/lib/live_beats_web/live/song_live/upload_form_component.html.heex b/lib/live_beats_web/live/song_live/upload_form_component.html.heex
index 0325925..7f68963 100644
--- a/lib/live_beats_web/live/song_live/upload_form_component.html.heex
+++ b/lib/live_beats_web/live/song_live/upload_form_component.html.heex
@@ -63,19 +63,7 @@
 					</div>
 				</div>
 				<!-- /upload -->
-
 			</div>
     </div>
-
-    <div class="pt-5">
-      <div class="flex justify-end">
-        <button type="button" class="bg-white py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
-          Cancel
-        </button>
-        <button type="submit" class="ml-3 inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
-          Save
-        </button>
-      </div>
-    </div>
   </.form>
 </div>
diff --git a/lib/live_beats_web/router.ex b/lib/live_beats_web/router.ex
index eb3df64..1c440b2 100644
--- a/lib/live_beats_web/router.ex
+++ b/lib/live_beats_web/router.ex
@@ -29,9 +29,6 @@ defmodule LiveBeatsWeb.Router do
       live "/", HomeLive, :index
       live "/songs", SongLive.Index, :index
       live "/songs/new", SongLive.Index, :new
-      live "/songs/:id/edit", SongLive.Index, :edit
-      live "/songs/:id", SongLive.Show, :show
-      live "/songs/:id/show/edit", SongLive.Show, :edit
     end
   end
 
diff --git a/lib/live_beats_web/templates/layout/live.html.heex b/lib/live_beats_web/templates/layout/live.html.heex
index 56cdb02..0a5cdae 100644
--- a/lib/live_beats_web/templates/layout/live.html.heex
+++ b/lib/live_beats_web/templates/layout/live.html.heex
@@ -7,5 +7,7 @@
     phx-click="lv:clear-flash"
     phx-value-key="error"><%= live_flash(@flash, :error) %></p>
 
+  <.live_component module={LiveBeatsWeb.LayoutComponent} id="layout" />
+
   <%= @inner_content %>
 </main>
diff --git a/mix.lock b/mix.lock
index 3245bdc..82d3019 100644
--- a/mix.lock
+++ b/mix.lock
@@ -30,6 +30,7 @@
   "plug": {:hex, :plug, "1.12.1", "645678c800601d8d9f27ad1aebba1fdb9ce5b2623ddb961a074da0b96c35187d", [:mix], [{:mime, "~> 1.0 or ~> 2.0", [hex: :mime, repo: "hexpm", optional: false]}, {:plug_crypto, "~> 1.1.1 or ~> 1.2", [hex: :plug_crypto, repo: "hexpm", optional: false]}, {:telemetry, "~> 0.4.3 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "d57e799a777bc20494b784966dc5fbda91eb4a09f571f76545b72a634ce0d30b"},
   "plug_cowboy": {:hex, :plug_cowboy, "2.5.2", "62894ccd601cf9597e2c23911ff12798a8a18d237e9739f58a6b04e4988899fe", [:mix], [{:cowboy, "~> 2.7", [hex: :cowboy, repo: "hexpm", optional: false]}, {:cowboy_telemetry, "~> 0.3", [hex: :cowboy_telemetry, repo: "hexpm", optional: false]}, {:plug, "~> 1.7", [hex: :plug, repo: "hexpm", optional: false]}], "hexpm", "ea6e87f774c8608d60c8d34022a7d073bd7680a0a013f049fc62bf35efea1044"},
   "plug_crypto": {:hex, :plug_crypto, "1.2.2", "05654514ac717ff3a1843204b424477d9e60c143406aa94daf2274fdd280794d", [:mix], [], "hexpm", "87631c7ad914a5a445f0a3809f99b079113ae4ed4b867348dd9eec288cecb6db"},
+  "porcelain": {:hex, :porcelain, "2.0.3", "2d77b17d1f21fed875b8c5ecba72a01533db2013bd2e5e62c6d286c029150fdc", [:mix], [], "hexpm", "dc996ab8fadbc09912c787c7ab8673065e50ea1a6245177b0c24569013d23620"},
   "postgrex": {:hex, :postgrex, "0.15.10", "2809dee1b1d76f7cbabe570b2a9285c2e7b41be60cf792f5f2804a54b838a067", [:mix], [{:connection, "~> 1.0", [hex: :connection, repo: "hexpm", optional: false]}, {:db_connection, "~> 2.1", [hex: :db_connection, repo: "hexpm", optional: false]}, {:decimal, "~> 1.5 or ~> 2.0", [hex: :decimal, repo: "hexpm", optional: false]}, {:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: true]}], "hexpm", "1560ca427542f6b213f8e281633ae1a3b31cdbcd84ebd7f50628765b8f6132be"},
   "ranch": {:hex, :ranch, "1.8.0", "8c7a100a139fd57f17327b6413e4167ac559fbc04ca7448e9be9057311597a1d", [:make, :rebar3], [], "hexpm", "49fbcfd3682fab1f5d109351b61257676da1a2fdbe295904176d5e521a2ddfe5"},
   "rustler": {:hex, :rustler, "0.22.2", "f92d6dba71bef6fe5f0d955649cb071127adc92f32a78890e8fa9939e59a1b41", [:mix], [{:jason, "~> 1.2", [hex: :jason, repo: "hexpm", optional: false]}, {:toml, "~> 0.5.2", [hex: :toml, repo: "hexpm", optional: false]}], "hexpm", "56b129141e86d60a2d670af9a2b55a9071e10933ef593034565af77e84655118"},
diff --git a/priv/repo/seeds.exs b/priv/repo/seeds.exs
index aaec480..904ddbe 100644
--- a/priv/repo/seeds.exs
+++ b/priv/repo/seeds.exs
@@ -14,7 +14,7 @@
 #   {:ok, _} = LiveBeats.MediaLibrary.create_genre(%{title: title})
 # end
 
-for i <- 1..20 do
+for i <- 1..200 do
   {:ok, _} =
     LiveBeats.MediaLibrary.create_song(%{
       artist: "Bonobo",