2021-11-22 14:57:24 +00:00
|
|
|
defmodule LiveBeatsWeb.ProfileLive.SongRowComponent do
|
2021-11-05 00:49:19 +00:00
|
|
|
use LiveBeatsWeb, :live_component
|
|
|
|
|
2021-12-16 03:03:18 +00:00
|
|
|
def send_status(song_id, status) when status in [:playing, :paused, :stopped] do
|
|
|
|
send_update(__MODULE__, id: "song-#{song_id}", action: :send, status: status)
|
2021-11-05 19:57:33 +00:00
|
|
|
end
|
|
|
|
|
2021-11-05 00:49:19 +00:00
|
|
|
def render(assigns) do
|
|
|
|
~H"""
|
2022-02-04 16:41:05 +00:00
|
|
|
<tr id={@id} class={@class} tabindex="0">
|
2021-11-05 00:49:19 +00:00
|
|
|
<%= for {col, i} <- Enum.with_index(@col) do %>
|
|
|
|
<td
|
2021-11-10 15:10:43 +00:00
|
|
|
class={"px-6 py-3 text-sm font-medium text-gray-900 #{if i == 0, do: "w-80 cursor-pointer"} #{col[:class]}"}
|
2021-11-05 19:57:33 +00:00
|
|
|
phx-click={JS.push("play_or_pause", value: %{id: @song.id})}
|
2021-11-05 00:49:19 +00:00
|
|
|
>
|
|
|
|
<div class="flex items-center space-x-3 lg:pl-2">
|
2022-01-26 16:33:12 +00:00
|
|
|
<%= 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"/>
|
2021-11-05 00:49:19 +00:00
|
|
|
<% end %>
|
2022-01-26 16:33:12 +00:00
|
|
|
</span>
|
2021-11-05 00:49:19 +00:00
|
|
|
<% end %>
|
2022-01-26 16:33:12 +00:00
|
|
|
<% end %>
|
|
|
|
<%= render_slot(col, assigns) %>
|
2021-11-05 00:49:19 +00:00
|
|
|
</div>
|
|
|
|
</td>
|
|
|
|
<% end %>
|
|
|
|
</tr>
|
|
|
|
"""
|
|
|
|
end
|
|
|
|
|
2021-12-16 03:03:18 +00:00
|
|
|
def update(%{action: :send, status: status}, socket) when status in [:playing, :paused, :stopped] do
|
|
|
|
{:ok, assign(socket, status: status)}
|
2021-11-05 00:49:19 +00:00
|
|
|
end
|
|
|
|
|
|
|
|
def update(assigns, socket) do
|
|
|
|
{:ok,
|
|
|
|
assign(socket,
|
|
|
|
id: assigns.id,
|
|
|
|
song: assigns.row,
|
|
|
|
col: assigns.col,
|
|
|
|
class: assigns.class,
|
|
|
|
index: assigns.index,
|
2021-11-23 17:52:43 +00:00
|
|
|
status: :stopped,
|
|
|
|
owns_profile?: assigns.owns_profile?
|
2021-11-05 00:49:19 +00:00
|
|
|
)}
|
|
|
|
end
|
|
|
|
end
|