WIP

assets/js/app.js

@@ -181,16 +181,16 @@ Hooks.AudioPlayer = {
 Hooks.Ping = {
   mounted(){
     this.handleEvent("pong", () => {
-      console.log("pong")
+      let rtt = Date.now() - this.nowMs
-      this.el.innerText = `ping: ${Date.now() - this.nowMs}ms`
+      this.el.innerText = `ping: ${rtt}ms`
-      this.timer = setTimeout(() => this.ping(), 1000)
+      this.timer = setTimeout(() => this.ping(rtt), 1000)
     })
-    this.ping()
+    this.ping(null)
   },
   destroyed(){ clearTimeout(this.timer) },
-  ping(){
+  ping(rtt){
     this.nowMs = Date.now()
-    this.pushEvent("ping", {})
+    this.pushEvent("ping", {rtt: rtt})
   }
 }
 

lib/live_beats/media_library.ex

@@ -30,6 +30,10 @@ defmodule LiveBeats.MediaLibrary do
     Phoenix.PubSub.subscribe(@pubsub, topic(profile.user_id))
   end
 
+  def broadcast_ping(%Accounts.User{} = user, rtt, region) do
+    broadcast!(user.active_profile_user_id, {:ping, %{rtt: rtt, region: region}})
+  end
+
   def unsubscribe_to_profile(%Profile{} = profile) do
     Phoenix.PubSub.unsubscribe(@pubsub, topic(profile.user_id))
   end
@@ -251,7 +255,9 @@ defmodule LiveBeats.MediaLibrary do
   end
 
   def get_current_active_song(%Profile{user_id: user_id}) do
-    Repo.replica().one(from s in Song, where: s.user_id == ^user_id and s.status in [:playing, :paused])
+    Repo.replica().one(
+      from s in Song, where: s.user_id == ^user_id and s.status in [:playing, :paused]
+    )
   end
 
   def get_profile!(%Accounts.User{} = user) do

lib/live_beats_web/live/nav.ex

@@ -31,7 +31,13 @@ defmodule LiveBeatsWeb.Nav do
     {:cont, assign(socket, active_tab: active_tab)}
   end
 
-  defp handle_event("ping", _, socket) do
+  defp handle_event("ping", %{"rtt" => rtt}, socket) do
+    %{current_user: current_user} = socket.assigns
+
+    if rtt && current_user && current_user.active_profile_user_id do
+      MediaLibrary.broadcast_ping(current_user, rtt, socket.assigns.region)
+    end
+
     {:halt, push_event(socket, "pong", %{})}
   end
 

lib/live_beats_web/live/profile_live.ex

@@ -40,7 +40,13 @@ defmodule LiveBeatsWeb.ProfileLive do
     </.title_bar>
 
     <Presence.listening_now presences={@presences}>
-      <:title let={user}><%= user.username %></:title>
+      <:title let={%{presence: presence, ping: ping, region: region}}>
+        <%= presence.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 %>
+        <% end %>
+      </:title>
     </Presence.listening_now>
 
     <div id="dialogs" phx-update="append">
@@ -180,6 +186,11 @@ 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)
+    {:noreply, socket}
+  end
+
   def handle_info({MediaLibrary, _}, socket), do: {:noreply, socket}
 
   def handle_info({Accounts, _}, socket), do: {:noreply, socket}

lib/live_beats_web/templates/layout/live.html.heex

@@ -24,7 +24,7 @@
       <.link navigate={home_path(@current_user)}>
         <.icon name={:status_online} class="w-8 h-8 text-purple-600 -mt-2 inline-block" outlined/>
         <span class="h-8 w-auto text-2xl ml-1 font-bold">
-          LiveBeats <%= @region %>
+          LiveBeats
         </span>
       </.link>
     </div>
@@ -55,7 +55,7 @@
       <.link navigate={home_path(@current_user)}>
         <.icon name={:status_online} class="w-8 h-8 text-purple-600 -mt-2 inline-block" outlined/>
         <span class="h-8 w-auto text-2xl ml-1 font-bold">
-          LiveBeats <small class="font-normal"><%= @region %></small>
+          LiveBeats
         </span>
       </.link>
     </div>
@@ -165,6 +165,9 @@
     <%= @inner_content %>
   </main>
   <div class="relative">
-    <div id="ping" phx-hook="Ping" class="fixed bottom-0 right-0 bg-gray-900 text-gray-200 px-2 rounded-tl-md text-sm w-24 min-w-max"></div>
+    <div class="fixed bottom-0 right-0 bg-gray-900 text-gray-200 px-2 rounded-tl-md text-sm w-[114px] min-w-max" phx-update="ignore">
+      <span id="ping" phx-hook="Ping"></span>
+      <%= if @region do %><img class="inline w-5 h-5 absolute right-0" src={"https://fly.io/ui/images/#{@region}.svg"} /><% end %>
+    </div>
   </div>
 </div>