Merge pull request #16 from chrismccord/feature/hide_player_buttons

Hide control buttons when listening to someone else's playlist

lib/live_beats_web/live/live_helpers.ex

@@ -534,6 +534,7 @@ defmodule LiveBeatsWeb.LiveHelpers do
       assigns
       |> assign_new(:row_id, fn -> false end)
       |> assign_new(:active_id, fn -> nil end)
+      |> assign_new(:owns_profile?, fn -> assigns.owns_profile? end)
       |> assign(:col, for(col <- assigns.col, col[:if] != false, do: col))
 
     ~H"""
@@ -558,7 +559,8 @@ defmodule LiveBeatsWeb.LiveHelpers do
                 row={row} col={@col}
                 index={i}
                 active_id={@active_id}
-                class="hover:bg-gray-50"
+                class="hover:bg-gray-50",
+                owns_profile?={@owns_profile?}
               />
             <% end %>
           </tbody>

lib/live_beats_web/live/nav.ex

@@ -15,7 +15,7 @@ defmodule LiveBeatsWeb.Nav do
     active_tab =
       case {socket.view, socket.assigns.live_action} do
         {ProfileLive, _} ->
-          if params["profile_username"] == current_user_profile_userame(socket) do
+          if params["profile_username"] == current_user_profile_username(socket) do
             :profile
           end
 
@@ -29,7 +29,7 @@ defmodule LiveBeatsWeb.Nav do
     {:cont, assign(socket, active_tab: active_tab)}
   end
 
-  defp current_user_profile_userame(socket) do
+  defp current_user_profile_username(socket) do
     if user = socket.assigns.current_user do
       user.username
     end

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

lib/live_beats_web/live/profile_live.ex

@@ -58,6 +58,7 @@ defmodule LiveBeatsWeb.ProfileLive do
       module={SongRowComponent}
       rows={@songs}
       row_id={fn song -> "song-#{song.id}" end}
+      owns_profile?={@owns_profile?}
     >
       <:col let={%{song: song}} label="Title"><%= song.title %></:col>
       <:col let={%{song: song}} label="Artist"><%= song.artist %></:col>

lib/live_beats_web/live/profile_live/song_row_component.ex

@@ -28,7 +28,9 @@ defmodule LiveBeatsWeb.ProfileLive.SongRowComponent do
                 <% 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"/>
+                  <% end %>
                   </span>
                 <% end %>
               <% end %>
@@ -52,7 +54,8 @@ defmodule LiveBeatsWeb.ProfileLive.SongRowComponent do
        col: assigns.col,
        class: assigns.class,
        index: assigns.index,
-       status: :stopped
+       status: :stopped,
+       owns_profile?: assigns.owns_profile?
      )}
   end
 end