mirror of
https://github.com/fly-apps/live_beats.git
synced 2024-05-16 00:02:41 +00:00
7461256268
The focus_wrap function component (and hook) can be used to focus wrap any content. The focus and focus_closest JS functions were added to programmtaically focus an element on the client or find the next element or previous element sibling when an action is taken that requires moving focus to cloest item. Co-authored-by: Nolan Darilek <nolan@thewordnerd.info>
62 lines
2.2 KiB
Elixir
62 lines
2.2 KiB
Elixir
defmodule LiveBeatsWeb.ProfileLive.SongRowComponent do
|
|
use LiveBeatsWeb, :live_component
|
|
|
|
def send_status(song_id, status) when status in [:playing, :paused, :stopped] do
|
|
send_update(__MODULE__, id: "song-#{song_id}", action: :send, status: status)
|
|
end
|
|
|
|
def render(assigns) do
|
|
~H"""
|
|
<tr id={@id} class={@class} tabindex="0">
|
|
<%= for {col, i} <- Enum.with_index(@col) do %>
|
|
<td
|
|
class={"px-6 py-3 text-sm font-medium text-gray-900 #{if i == 0, do: "w-80 cursor-pointer"} #{col[:class]}"}
|
|
phx-click={JS.push("play_or_pause", value: %{id: @song.id})}
|
|
>
|
|
<div class="flex items-center space-x-3 lg:pl-2">
|
|
<%= if i == 0 do %>
|
|
<%= if @status == :playing 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>
|
|
<.icon name={:volume_up} class="h-5 w-5 -mt-1 -ml-1" aria-label="Playing" role="button"/>
|
|
</span>
|
|
<% end %>
|
|
<%= if @status == :paused do %>
|
|
<span class="flex pt-1 relative mr-2 w-4">
|
|
<.icon name={:volume_up} class="h-5 w-5 -mt-1 -ml-1 text-gray-400" aria-label="Paused" role="button"/>
|
|
</span>
|
|
<% 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" aria-label="Play" role="button"/>
|
|
<% end %>
|
|
</span>
|
|
<% end %>
|
|
<% end %>
|
|
<%= render_slot(col, assigns) %>
|
|
</div>
|
|
</td>
|
|
<% end %>
|
|
</tr>
|
|
"""
|
|
end
|
|
|
|
def update(%{action: :send, status: status}, socket) when status in [:playing, :paused, :stopped] do
|
|
{:ok, assign(socket, status: status)}
|
|
end
|
|
|
|
def update(assigns, socket) do
|
|
{:ok,
|
|
assign(socket,
|
|
id: assigns.id,
|
|
song: assigns.row,
|
|
col: assigns.col,
|
|
class: assigns.class,
|
|
index: assigns.index,
|
|
status: :stopped,
|
|
owns_profile?: assigns.owns_profile?
|
|
)}
|
|
end
|
|
end
|