Add pings

lib/live_beats/media_library.ex

@@ -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

lib/live_beats_web/channels/presence.ex

@@ -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"> <!-- users -->
-    <div class="px-4 mt-6 sm:px-6 lg:px-8">
       <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

lib/live_beats_web/live/nav.ex

@@ -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

lib/live_beats_web/live/profile_live.ex

@@ -39,15 +39,17 @@ defmodule LiveBeatsWeb.ProfileLive do
       </:actions>
     </.title_bar>
 
-    <Presence.listening_now presences={@presences}>
+    <.live_component
-      <:title let={%{presence: presence, ping: ping, region: region}}>
+      let={%{user: user, ping: ping, region: region}}
-        <%= presence.username %>
+      id={:presence_badges} module={Presence.BadgeListComponent}
+      presences={@presences}
+    >
+      <%= user.username %>
       <%= if ping do %>
-          (<%= ping %>ms)
+        <p class="text-gray-400 text-xs">ping: <%= ping %>ms</p>
-          <%= if region do %><img class="inline w-5 h-5 absolute right-1" src={"https://fly.io/ui/images/#{region}.svg"} /><% end %>
+        <%= 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>
+    </.live_component>
-    </Presence.listening_now>
 
     <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
+  def handle_info({MediaLibrary, {:ping, ping}}, socket) do
-    send_update(Presence.Pill, id: id, ping: rtt, region: region)
+    %{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