mirror of
https://github.com/fly-apps/live_beats.git
synced 2024-07-02 20:15:45 +00:00
59 lines
2 KiB
Elixir
59 lines
2 KiB
Elixir
defmodule LiveBeatsWeb.SongLive.SongRowComponent do
|
|
use LiveBeatsWeb, :live_component
|
|
|
|
def send_status(id, status) when status in [:playing, :paused, :stopped] do
|
|
send_update(__MODULE__, id: "song-#{id}", action: :send, status: status)
|
|
end
|
|
|
|
def render(assigns) do
|
|
~H"""
|
|
<tr id={@id} class={@class}}>
|
|
<%= for {col, i} <- Enum.with_index(@col) do %>
|
|
<td
|
|
class={"px-6 py-3 whitespace-nowrap text-sm font-medium text-gray-900 #{if i == 0, do: "max-w-0 w-full cursor-pointer"}"}
|
|
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"/>
|
|
</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"/>
|
|
</span>
|
|
<% end %>
|
|
<%= if @status == :stopped do %>
|
|
<span class="flex relative w-6 -translate-x-1">
|
|
<.icon name={:play} class="h-5 w-5 text-gray-400"/>
|
|
</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
|
|
)}
|
|
end
|
|
end
|