Add pings

This commit is contained in:
Chris McCord 2022-01-31 08:21:27 -05:00
parent 1caf809be7
commit 826cf1d4f9
4 changed files with 56 additions and 18 deletions

View file

@ -31,7 +31,10 @@ defmodule LiveBeats.MediaLibrary do
end
def broadcast_ping(%Accounts.User{} = user, rtt, region) do
broadcast!(user.active_profile_user_id, {:ping, %{rtt: rtt, region: region}})
broadcast!(
user.active_profile_user_id,
{:ping, %{user: user, rtt: rtt, region: region}}
)
end
def unsubscribe_to_profile(%Profile{} = profile) do

View file

@ -29,11 +29,14 @@ defmodule LiveBeatsWeb.Presence do
{key, %{metas: metas, user: users[String.to_integer(key)]}}
end
end
end
def listening_now(assigns) do
defmodule LiveBeatsWeb.Presence.BadgeListComponent do
use LiveBeatsWeb, :live_component
def render(assigns) do
~H"""
<!-- users -->
<div class="px-4 mt-6 sm:px-6 lg:px-8">
<div class="px-4 mt-6 sm:px-6 lg:px-8"> <!-- users -->
<h2 class="text-gray-500 text-xs font-medium uppercase tracking-wide">Listening now</h2>
<ul
id="listening-now"
@ -45,9 +48,11 @@ defmodule LiveBeatsWeb.Presence do
<%= for presence <- @presences do %>
<li id={"presence-#{presence.id}"} class="relative col-span-1 flex shadow-sm rounded-md overflow-hidden">
<.link navigate={profile_path(presence)} class="flex-1 flex items-center justify-between border-t border-r border-b border-gray-200 bg-white rounded-r-md truncate">
<img class="w-10 h-10 flex-shrink-0 flex items-center justify-center rounded-l-md bg-purple-600" src={presence.avatar_url} alt="">
<img class="w-12 h-12 flex-shrink-0 flex items-center justify-center rounded-l-md bg-purple-600" src={presence.avatar_url} alt="">
<div class="flex-1 flex items-center justify-between text-gray-900 text-sm font-medium hover:text-gray-600 pl-3">
<%= render_slot(@title, presence) %>
<div class="flex-1 py-1 text-sm truncate">
<%= render_slot(@inner_block, %{user: presence, ping: @pings[presence.id], region: @regions[presence.id]}) %>
</div>
</div>
</.link>
</li>
@ -56,4 +61,26 @@ defmodule LiveBeatsWeb.Presence do
</div>
"""
end
def mount(socket) do
{:ok, socket, temporary_assigns: [presences: [], pings: %{}, regions: %{}]}
end
def update(%{action: {:ping, action}}, socket) do
%{user: user, ping: ping, region: region} = action
{:ok,
socket
|> assign(:presences, [user])
|> update(:pings, &Map.put(&1, user.id, ping))
|> update(:regions, &Map.put(&1, user.id, region))}
end
def update(assigns, socket) do
{:ok,
socket
|> assign(assigns)
|> assign_new(:pings, fn -> %{} end)
|> assign_new(:regions, fn -> %{} end)}
end
end

View file

@ -8,7 +8,7 @@ defmodule LiveBeatsWeb.Nav do
{:cont,
socket
|> assign(active_users: MediaLibrary.list_active_profiles(limit: 20))
|> assign(:region, System.get_env("FLY_REGION"))
|> assign(:region, System.get_env("FLY_REGION") || "iad")
|> attach_hook(:active_tab, :handle_params, &handle_active_tab_params/3)
|> attach_hook(:ping, :handle_event, &handle_event/3)}
end

View file

@ -39,15 +39,17 @@ defmodule LiveBeatsWeb.ProfileLive do
</:actions>
</.title_bar>
<Presence.listening_now presences={@presences}>
<:title let={%{presence: presence, ping: ping, region: region}}>
<%= presence.username %>
<.live_component
let={%{user: user, ping: ping, region: region}}
id={:presence_badges} module={Presence.BadgeListComponent}
presences={@presences}
>
<%= user.username %>
<%= if ping do %>
(<%= ping %>ms)
<%= if region do %><img class="inline w-5 h-5 absolute right-1" src={"https://fly.io/ui/images/#{region}.svg"} /><% end %>
<p class="text-gray-400 text-xs">ping: <%= ping %>ms</p>
<%= if region do %><img class="inline w-7 h-7 absolute right-3 top-3" src={"https://fly.io/ui/images/#{region}.svg"} /><% end %>
<% end %>
</:title>
</Presence.listening_now>
</.live_component>
<div id="dialogs" phx-update="append">
<%= for song <- if(@owns_profile?, do: @songs, else: []), id = "delete-modal-#{song.id}" do %>
@ -156,6 +158,7 @@ defmodule LiveBeatsWeb.ProfileLive do
def handle_info({LiveBeats.PresenceClient, %{user_left: presence}}, socket) do
%{user: user} = presence
if presence.metas == [] do
{:noreply, push_event(socket, "remove-el", %{id: "presence-#{user.id}"})}
else
@ -186,8 +189,13 @@ defmodule LiveBeatsWeb.ProfileLive do
{:noreply, update(socket, :songs, &(&1 ++ songs))}
end
def handle_info({MediaLibrary, {:ping, %{user_id: id, rtt: rtt, region: region}}}, socket) do
send_update(Presence.Pill, id: id, ping: rtt, region: region)
def handle_info({MediaLibrary, {:ping, ping}}, socket) do
%{user: user, rtt: rtt, region: region} = ping
send_update(Presence.BadgeListComponent,
id: :presence_badges,
action: {:ping, %{user: user, ping: rtt, region: region}}
)
{:noreply, socket}
end