Update live stream card in real-time

asciinema · Apr 21, 2024 · c3e857e · c3e857e
1 parent 4412034
commit c3e857e
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 10 deletions.
diff --git a/lib/asciinema/streaming/live_stream_server.ex b/lib/asciinema/streaming/live_stream_server.ex
@@ -31,7 +31,7 @@ defmodule Asciinema.Streaming.LiveStreamServer do
     GenServer.call(via_tuple(stream_id), :heartbeat)
   end
 
-  def subscribe(stream_id, type) when type in [:reset, :feed, :offline] do
+  def subscribe(stream_id, type) when type in [:reset, :feed, :offline, :metadata] do
     PubSub.subscribe(topic_name(stream_id, type))
   end
 
@@ -165,12 +165,21 @@ defmodule Asciinema.Streaming.LiveStreamServer do
     stream =
       case state.vt_size do
         {cols, rows} ->
-          Streaming.update_live_stream(state.stream,
-            current_viewer_count: state.viewer_count,
-            cols: cols,
-            rows: rows,
-            snapshot: generate_snapshot(state.vt)
-          )
+          stream =
+            Streaming.update_live_stream(state.stream,
+              current_viewer_count: state.viewer_count,
+              cols: cols,
+              rows: rows,
+              snapshot: generate_snapshot(state.vt)
+            )
+
+          publish(state.stream_id, %Update{
+            stream_id: state.stream_id,
+            event: :metadata,
+            data: stream
+          })
+
+          stream
 
         nil ->
           state.stream

diff --git a/lib/asciinema_web/controllers/live_stream/card.html.heex b/lib/asciinema_web/controllers/live_stream/card.html.heex
@@ -26,7 +26,6 @@
 
     <small>
       by <.link href={author_profile_path(@stream)}><%= author_username(@stream) %></.link>
-      <%= time_ago_tag(@stream.last_started_at) %>
     </small>
   </div>
 </div>
diff --git a/lib/asciinema_web/controllers/user/show.html.heex b/lib/asciinema_web/controllers/user/show.html.heex
@@ -41,7 +41,9 @@
         <div class="col-md-12">
           <div :for={streams <- Enum.chunk_every(@streams, 2, 2)} class="row">
             <div :for={stream <- streams} class="col-md-6">
-              <LiveStreamHTML.card stream={stream} />
+              <%= live_render(@conn, AsciinemaWeb.LiveStreamCardLive,
+                session: %{"stream_id" => stream.id}
+              ) %>
             </div>
           </div>
         </div>

diff --git a/lib/asciinema_web/controllers/user_html.ex b/lib/asciinema_web/controllers/user_html.ex
@@ -3,7 +3,7 @@ defmodule AsciinemaWeb.UserHTML do
   import AsciinemaWeb.ErrorHelpers
   import Scrivener.HTML
   alias Asciinema.{Fonts, Gravatar}
-  alias AsciinemaWeb.{LiveStreamHTML, MediaView, RecordingHTML}
+  alias AsciinemaWeb.{MediaView, RecordingHTML}
 
   embed_templates "user/*"
 

diff --git a/lib/asciinema_web/live/live_stream_card_live.ex b/lib/asciinema_web/live/live_stream_card_live.ex
@@ -0,0 +1,28 @@
+defmodule AsciinemaWeb.LiveStreamCardLive do
+  use AsciinemaWeb, :live_view
+  alias Asciinema.Streaming
+  alias Asciinema.Streaming.LiveStreamServer
+
+  @impl true
+  def render(assigns) do
+    ~H"""
+    <AsciinemaWeb.LiveStreamHTML.card stream={@stream} />
+    """
+  end
+
+  @impl true
+  def mount(_params, %{"stream_id" => stream_id}, socket) do
+    socket = assign(socket, :stream, Streaming.get_live_stream(stream_id))
+
+    if connected?(socket) do
+      LiveStreamServer.subscribe(stream_id, :metadata)
+    end
+
+    {:ok, socket}
+  end
+
+  @impl true
+  def handle_info(%LiveStreamServer.Update{event: :metadata} = update, socket) do
+    {:noreply, assign(socket, stream: update.data)}
+  end
+end