Display term version in a tooltip

Author: ku1ik

assets/css/_recording_show.scss

@@ -74,6 +74,10 @@
           margin-right: 0.5em;
         }
       }
+
+      .help-tooltip {
+        cursor: help;
+      }
     }
   }
 

lib/asciinema_web/controllers/medium_html.ex

@@ -1,16 +1,15 @@
 defmodule AsciinemaWeb.MediumHTML do
   use AsciinemaWeb, :html
 
-  def metadata(medium) do
-    items = [os_info(medium), term_info(medium), shell_info(medium)]
+  embed_templates "medium_html/*"
 
-    case Enum.filter(items, & &1) do
-      [] -> nil
-      items -> Enum.join(items, " ◆ ")
-    end
+  defp segments(medium) do
+    [os(medium), term(medium), shell(medium)]
+    |> Enum.filter(& &1)
+    |> Enum.intersperse(" ◆ ")
   end
 
-  defp os_info(medium) do
+  defp os(medium) do
     os_from_user_agent(medium.user_agent) || os_from_uname(medium)
   end
 
@@ -68,13 +67,19 @@ defmodule AsciinemaWeb.MediumHTML do
     end
   end
 
-  defp shell_info(medium) do
+  defp shell(medium) do
     if medium.shell do
       Path.basename("#{medium.shell}")
     end
   end
 
-  defp term_info(medium) do
-    medium.term_type
+  defp term(medium) do
+    case medium.term_version do
+      nil ->
+        medium.term_type
+
+      version ->
+        {medium.term_type, version}
+    end
   end
 end

lib/asciinema_web/controllers/medium_html/env_info.html.heex

@@ -0,0 +1,7 @@
+<span :for={item <- segments(@attrs)}>
+  <%= if is_tuple(item) do %>
+    <span title={elem(item, 1)} class="help-tooltip">{elem(item, 0)}</span>
+  <% else %>
+    {item}
+  <% end %>
+</span>

lib/asciinema_web/controllers/recording_html.ex

@@ -16,7 +16,7 @@ defmodule AsciinemaWeb.RecordingHTML do
   defdelegate font_family_options, to: MediaView
   defdelegate username(user), to: UserHTML
   defdelegate title(asciicast), to: Recordings
-  defdelegate metadata(asciicast), to: MediumHTML
+  defdelegate env_info(asciicast), to: MediumHTML
 
   def player_src(asciicast), do: ~p"/a/#{asciicast}" <> ".#{filename_ext(asciicast)}"
 
@@ -109,6 +109,9 @@ defmodule AsciinemaWeb.RecordingHTML do
     end
   end
 
+  defp env_info_attrs(asciicast),
+    do: Map.take(asciicast, [:user_agent, :term_type, :term_version, :shell, :uname])
+
   defp truncate(text, length) do
     if String.length(text) > length do
       String.slice(text, 0, length - 3) <> "..."

lib/asciinema_web/controllers/recording_html/show.html.heex

@@ -113,12 +113,8 @@
     <div class="row">
       <div class="col-md-12 col-xs-12">
         <div class="status-line">
-          <span
-            :if={m = metadata(@asciicast)}
-            class="status-line-item"
-            title="Terminal environment"
-          >
-            <.terminal_solid_icon /> {m}
+          <span class="status-line-item">
+            <.terminal_solid_icon /> <.env_info attrs={env_info_attrs(@asciicast)} />
           </span>
 
           <span class="status-line-item" title="Total views">

lib/asciinema_web/live/stream_status_live.ex

@@ -4,6 +4,8 @@ defmodule AsciinemaWeb.StreamStatusLive do
   alias AsciinemaWeb.MediumHTML
   use AsciinemaWeb, :live_view
 
+  defdelegate env_info(stream), to: MediumHTML
+
   @info_timeout 1_000
   @duration_update_interval 60_000
 
@@ -23,8 +25,8 @@ defmodule AsciinemaWeb.StreamStatusLive do
             <% end %>
           </span>
 
-          <span :if={@metadata} class="status-line-item" title="Terminal environment">
-            <.terminal_solid_icon /> {@metadata}
+          <span class="status-line-item">
+            <.terminal_solid_icon /> <.env_info attrs={@env_info_attrs} />
           </span>
 
           <span class="status-line-item">
@@ -62,7 +64,7 @@ defmodule AsciinemaWeb.StreamStatusLive do
         started_at: stream.last_started_at,
         duration: nil,
         viewer_count: stream.current_viewer_count,
-        metadata: MediumHTML.metadata(stream)
+        env_info_attrs: env_info_attrs(stream)
       )
       |> update_duration()
 
@@ -96,7 +98,7 @@ defmodule AsciinemaWeb.StreamStatusLive do
   end
 
   def handle_info(%StreamServer.Update{event: :metadata, data: stream}, socket) do
-    {:noreply, assign(socket, metadata: MediumHTML.metadata(stream))}
+    {:noreply, assign(socket, :env_info_attrs, env_info_attrs(stream))}
   end
 
   def handle_info(%ViewerTracker.Update{viewer_count: c}, socket) do
@@ -107,6 +109,9 @@ defmodule AsciinemaWeb.StreamStatusLive do
     {:noreply, update_duration(socket)}
   end
 
+  defp env_info_attrs(stream),
+    do: Map.take(stream, [:user_agent, :term_type, :term_version, :shell])
+
   defp update_duration(socket) do
     socket = assign(socket, :duration, format_duration(socket.assigns.started_at))