mirrors/live_beats
1
0
Fork 0
mirror of https://github.com/fly-apps/live_beats.git synced 2024-11-21 15:41:00 +00:00
Code Issues Projects Releases Wiki Activity

Merge pull request #16 from chrismccord/feature/hide_player_buttons

Browse source 
Hide control buttons when listening to someone else's playlist
This commit is contained in:
Chris McCord 2021-12-01 13:11:28 -05:00 committed by GitHub
commit 316007b970
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 49 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
lib/live_beats_web/live/live_helpers.ex
View file

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

4
lib/live_beats_web/live/nav.ex
View file

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

69
lib/live_beats_web/live/player_live.ex
View file

@ -48,38 +48,47 @@ defmodule LiveBeatsWeb.PlayerLive do
<div class="mx-auto flex"></div> <div class="mx-auto flex"></div>
<% end %> <% end %>
<!-- prev --> <%= if is_nil(@profile) or @own_profile? do %>
<button type="button" class="sm:block xl:block mx-auto scale-75" phx-click={js_prev(@own_profile?)} aria-label="Previous"> <!-- prev -->
<svg width="17" height="18" aria-hidden="true"> <button type="button" class="sm:block xl:block mx-auto scale-75" phx-click={js_prev(@own_profile?)} aria-label="Previous">
<path d="M0 0h2v18H0V0zM4 9l13-9v18L4 9z" fill="currentColor" /> <svg width="17" height="18">
</svg> <path d="M0 0h2v18H0V0zM4 9l13-9v18L4 9z" fill="currentColor" />
</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" />
</svg> </svg>
<% else %> </button>
<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"> <!-- /prev -->
<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 --> <!-- play/pause -->
<button type="button" class="mx-auto scale-75" phx-click={js_next(@own_profile?)} aria-label="Next"> <button type="button" class="mx-auto scale-75" phx-click={js_play_pause(@own_profile?)} aria-label={if @playing do "Pause" else "Play" end}>
<svg width="17" height="18" viewBox="0 0 17 18" fill="none" aria-hidden="true"> <%= if @playing do %>
<path d="M17 0H15V18H17V0Z" fill="currentColor" /> <svg id="player-pause" width="50" height="50" fill="none">
<path d="M13 9L0 0V18L13 9Z" fill="currentColor" /> <circle class="text-gray-300 dark:text-gray-500" cx="25" cy="25" r="24" stroke="currentColor" stroke-width="1.5" />
</svg> <path d="M18 16h4v18h-4V16zM28 16h4v18h-4z" fill="currentColor" />
</button> </svg>
<!-- next --> <% 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> </div>
<.modal <.modal

1
lib/live_beats_web/live/profile_live.ex
View file

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

5
lib/live_beats_web/live/profile_live/song_row_component.ex
View file

@ -28,7 +28,9 @@ defmodule LiveBeatsWeb.ProfileLive.SongRowComponent do
<% end %> <% end %>
<%= if @status == :stopped do %> <%= if @status == :stopped do %>
<span class="flex relative w-6 -translate-x-1"> <span class="flex relative w-6 -translate-x-1">
<%= if @owns_profile? do %>
<.icon name={:play} class="h-5 w-5 text-gray-400"/> <.icon name={:play} class="h-5 w-5 text-gray-400"/>
<% end %>
</span> </span>
<% end %> <% end %>
<% end %> <% end %>
@ -52,7 +54,8 @@ defmodule LiveBeatsWeb.ProfileLive.SongRowComponent do
col: assigns.col, col: assigns.col,
class: assigns.class, class: assigns.class,
index: assigns.index, index: assigns.index,
status: :stopped status: :stopped,
owns_profile?: assigns.owns_profile?
)} )}
end end
end end