From e5c663ab38b1164fef1a4c1211f38984e8d4487b Mon Sep 17 00:00:00 2001
From: Berenice Medel <bemesa21@gmail.com>
Date: Tue, 23 Nov 2021 15:40:08 -0600
Subject: [PATCH] show stop button when listening someone else playlist

---
 lib/live_beats_web/live/player_live.ex | 69 +++++++++++++++-----------
 1 file changed, 39 insertions(+), 30 deletions(-)

diff --git a/lib/live_beats_web/live/player_live.ex b/lib/live_beats_web/live/player_live.ex
index b4eaaea..7870794 100644
--- a/lib/live_beats_web/live/player_live.ex
+++ b/lib/live_beats_web/live/player_live.ex
@@ -48,38 +48,47 @@ defmodule LiveBeatsWeb.PlayerLive do
           <div class="mx-auto flex"></div>
         <% end %>
 
-        <!-- prev -->
-        <button type="button" class="sm:block xl:block mx-auto scale-75" phx-click={js_prev(@own_profile?)} aria-label="Previous">
-          <svg width="17" height="18" aria-hidden="true">
-            <path d="M0 0h2v18H0V0zM4 9l13-9v18L4 9z" fill="currentColor" />
-          </svg>
-        </button>
-        <!-- /prev -->
-
-        <!-- play/pause -->
-        <button type="button" class="mx-auto scale-75" phx-click={js_play_pause(@own_profile?)} aria-label={if @playing do "Pause" else "Play" end}>
-          <%= if @playing do %>
-            <svg id="player-pause" width="50" height="50" fill="none" aria-hidden="true">
-              <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" />
+        <%= if is_nil(@profile) or @own_profile? do %>
+          <!-- prev -->
+          <button type="button" class="sm:block xl:block mx-auto scale-75" phx-click={js_prev(@own_profile?)} aria-label="Previous">
+            <svg width="17" height="18">
+              <path d="M0 0h2v18H0V0zM4 9l13-9v18L4 9z" 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" aria-hidden="true">
-              <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>
-        <!-- /play/pause -->
+          </button>
+          <!-- /prev -->
 
-        <!-- next -->
-        <button type="button" class="mx-auto scale-75" phx-click={js_next(@own_profile?)} aria-label="Next">
-          <svg width="17" height="18" viewBox="0 0 17 18" fill="none" aria-hidden="true">
-            <path d="M17 0H15V18H17V0Z" fill="currentColor" />
-            <path d="M13 9L0 0V18L13 9Z" fill="currentColor" />
-          </svg>
-        </button>
-        <!-- next -->
+          <!-- play/pause -->
+          <button type="button" class="mx-auto scale-75" phx-click={js_play_pause(@own_profile?)} aria-label={if @playing do "Pause" else "Play" end}>
+            <%= 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>
+          <!-- /play/pause -->
+
+          <!-- next -->
+          <button type="button" class="mx-auto scale-75" phx-click={js_next(@own_profile?)} aria-label="Next">
+            <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>
+          <!-- next -->
+        <% else %>
+          <button type="button" class="mx-auto scale-75"></button>
+          <!-- stop button -->
+          <button type="button" class="mx-auto scale-75" phx-click={JS.push("switch_profile", value: %{user_id: nil}, target: "#player", loading: "#player")}>
+            <.icon name={:stop} class="h-12 w-12"/>
+          </button>
+          <!-- stop button -->
+        <% end %>
       </div>
 
       <.modal