From ec900a1703b0fcdc0ae211a85fab0ec3db404ec5 Mon Sep 17 00:00:00 2001
From: Chris McCord <chris@chrismccord.com>
Date: Wed, 10 Nov 2021 14:49:38 -0500
Subject: [PATCH] Add next/prev

---
 lib/live_beats/media_library.ex        | 31 ++++++++++++++++++
 lib/live_beats_web/live/player_live.ex | 44 ++++++++++++++------------
 2 files changed, 55 insertions(+), 20 deletions(-)

diff --git a/lib/live_beats/media_library.ex b/lib/live_beats/media_library.ex
index 01980a7..6d1f543 100644
--- a/lib/live_beats/media_library.ex
+++ b/lib/live_beats/media_library.ex
@@ -92,6 +92,20 @@ defmodule LiveBeats.MediaLibrary do
     end
   end
 
+  def play_prev_song(user_id) do
+    song = get_current_active_song(user_id) || get_first_song(user_id)
+    if prev_song = get_prev_song(song) do
+      play_song(prev_song)
+    end
+  end
+
+  def play_next_song(user_id) do
+    song = get_current_active_song(user_id) || get_first_song(user_id)
+    if next_song = get_next_song(song) do
+      play_song(next_song)
+    end
+  end
+
   defp topic(user_id), do: "room:#{user_id}"
 
   def store_mp3(%Song{} = song, tmp_path) do
@@ -187,6 +201,14 @@ defmodule LiveBeats.MediaLibrary do
     )
   end
 
+  def get_last_song(user_id) do
+    Repo.one(
+      from s in Song,
+        where: s.user_id == ^user_id,
+        order_by: [desc: s.inserted_at, desc: s.id],
+        limit: 1
+    )
+  end
   def get_next_song(%Song{} = song) do
     Repo.one(
       from s in Song,
@@ -196,6 +218,15 @@ defmodule LiveBeats.MediaLibrary do
     ) || get_first_song(song.user_id)
   end
 
+  def get_prev_song(%Song{} = song) do
+    Repo.one(
+      from s in Song,
+        where: s.user_id == ^song.user_id and s.id < ^song.id,
+        order_by: [desc: s.inserted_at, desc: s.id],
+        limit: 1
+    ) || get_last_song(song.user_id)
+  end
+
   def create_song(attrs \\ %{}) do
     %Song{}
     |> Song.changeset(attrs)
diff --git a/lib/live_beats_web/live/player_live.ex b/lib/live_beats_web/live/player_live.ex
index c0bfe96..5bf92cd 100644
--- a/lib/live_beats_web/live/player_live.ex
+++ b/lib/live_beats_web/live/player_live.ex
@@ -35,24 +35,21 @@ defmodule LiveBeatsWeb.PlayerLive do
           </div>
         </div>
       </div>
-      <div class="bg-gray-50 text-black dark:bg-gray-900 dark:text-white px-1 sm:px-3 lg:px-1 xl:px-3 grid grid-cols-5 sm:grid-cols-7 lg:grid-cols-5 xl:grid-cols-7 items-center">
+      <div class="bg-gray-50 text-black dark:bg-gray-900 dark:text-white px-1 sm:px-3 lg:px-1 xl:px-3 grid grid-cols-5 items-center">
         <button type="button" class="mx-auto scale-75">
           <svg width="24" height="24" fill="none">
             <path d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
           </svg>
         </button>
-        <button type="button" class="hidden sm:block lg:hidden xl:block mx-auto scale-75">
+
+        <!-- prev -->
+        <button type="button" class="sm:block xl:block mx-auto scale-75" phx-click="prev-song">
           <svg width="17" height="18">
             <path d="M0 0h2v18H0V0zM4 9l13-9v18L4 9z" fill="currentColor" />
           </svg>
         </button>
-        <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" />
-            <path d="M1 22c0 8.837 7.163 16 16 16s16-7.163 16-16S25.837 6 17 6" stroke="currentColor" stroke-width="1.5" />
-            <path d="M17 0L9 6l8 6V0z" fill="currentColor" />
-          </svg>
-        </button>
+        <!-- /prev -->
+
         <!-- pause -->
         <button type="button" class="mx-auto scale-75" phx-click={JS.push("play_pause") |> js_play_pause()}>
           <%= if @playing do %>
@@ -68,22 +65,15 @@ defmodule LiveBeatsWeb.PlayerLive do
           <% 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" />
-            <path d="M33 22c0 8.837-7.163 16-16 16S1 30.837 1 22 8.163 6 17 6" stroke="currentColor" stroke-width="1.5" />
-            <path d="M17 0l8 6-8 6V0z" fill="currentColor" />
-          </svg>
-        </button>
-        <button type="button" class="hidden sm:block lg:hidden xl:block mx-auto scale-75">
+
+        <!-- next -->
+        <button type="button" class="mx-auto scale-75" phx-click="next-song">
           <svg width="17" height="18" viewBox="0 0 17 18" fill="none">
             <path d="M17 0H15V18H17V0Z" fill="currentColor" />
             <path d="M13 9L0 0V18L13 9Z" fill="currentColor" />
           </svg>
         </button>
-        <button type="button" class="mx-auto border border-gray-300 rounded-md text-sm font-medium py-0.5 px-2 text-gray-500 dark:border-gray-600 dark:text-gray-400">
-          1.0x
-        </button>
+        <!-- next -->
       </div>
 
       <.modal
@@ -135,6 +125,20 @@ defmodule LiveBeatsWeb.PlayerLive do
     end
   end
 
+  def handle_event("next-song", _, socket) do
+    if socket.assigns.song do
+      MediaLibrary.play_next_song(socket.assigns.song.user_id)
+    end
+    {:noreply, socket}
+  end
+
+  def handle_event("prev-song", _, socket) do
+    if socket.assigns.song do
+      MediaLibrary.play_prev_song(socket.assigns.song.user_id)
+    end
+    {:noreply, socket}
+  end
+
   def handle_event("next-song-auto", _, socket) do
     if socket.assigns.song do
       MediaLibrary.play_next_song_auto(socket.assigns.song.user_id)