add timestamps for chat messages (#36)

lib/algora_web/components/chat_message_timestamp_component.ex

@@ -0,0 +1,24 @@
+defmodule AlgoraWeb.ChatMessageTimestampComponent do
+  use AlgoraWeb, :live_component
+
+  def render(assigns) do
+    ~H"""
+    <span class="text-gray-400 text-xs ml-1">
+      <%= format_timestamp(@message.inserted_at) %>
+    </span>
+    """
+  end
+
+  defp format_timestamp(timestamp) do
+    now = NaiveDateTime.utc_now()
+    diff_in_seconds = NaiveDateTime.diff(now, timestamp)
+
+    cond do
+      diff_in_seconds < 60 -> "Just now"
+      diff_in_seconds < 3600 -> "#{div(diff_in_seconds, 60)}m ago"
+      diff_in_seconds < 86_400 -> "#{div(diff_in_seconds, 3600)}h ago"
+      diff_in_seconds < 604_800 -> "#{div(diff_in_seconds, 86400)}d ago"
+      true -> Calendar.strftime(timestamp, "%b %-d, %Y")
+    end
+  end
+end

lib/algora_web/live/chat_live.ex

@@ -82,6 +82,11 @@ defmodule AlgoraWeb.ChatLive do
                   <span class="font-medium text-gray-100">
                     <%= message.body %>
                   </span>
+                  <.live_component
+                    module={AlgoraWeb.ChatMessageTimestampComponent}
+                    id={"timestamp-#{message.id}"}
+                    message={message}
+                  />
                 </div>
               </div>
             </div>
@@ -105,6 +110,7 @@ defmodule AlgoraWeb.ChatLive do
       Chat.subscribe_to_room(video)
 
       Presence.subscribe(channel_handle)
+      schedule_timestamp_tick()
     end
 
     videos = Library.list_channel_videos(channel, 50)
@@ -223,6 +229,16 @@ defmodule AlgoraWeb.ChatLive do
 
   def handle_info({Library, _}, socket), do: {:noreply, socket}
 
+  def handle_info(:tick, socket) do
+    send_update(AlgoraWeb.ChatMessageTimestampComponent, %{})
+    schedule_timestamp_tick()
+    {:noreply, socket}
+  end
+
+  defp schedule_timestamp_tick() do
+    Process.send_after(self(), :tick, :timer.minutes(1))
+  end
+
   defp system_message?(%Chat.Message{} = message) do
     message.sender_handle == "algora"
   end

lib/algora_web/live/video_live.ex

@@ -411,6 +411,11 @@ defmodule AlgoraWeb.VideoLive do
                     <span class="font-medium text-gray-100">
                       <%= message.body %>
                     </span>
+                    <.live_component
+                      module={AlgoraWeb.ChatMessageTimestampComponent}
+                      id={"timestamp-#{message.id}"}
+                      message={message}
+                    />
                     <button
                       :if={@current_user && Chat.can_delete?(@current_user, message)}
                       phx-click="delete"
@@ -520,6 +525,7 @@ defmodule AlgoraWeb.VideoLive do
       })
 
       Presence.subscribe(channel_handle)
+      schedule_timestamp_tick()
     end
 
     videos = Library.list_channel_videos(channel, 50)
@@ -662,6 +668,16 @@ defmodule AlgoraWeb.VideoLive do
 
   def handle_info({Library, _}, socket), do: {:noreply, socket}
 
+  def handle_info(:tick, socket) do
+    send_update(AlgoraWeb.ChatMessageTimestampComponent, %{})
+    schedule_timestamp_tick()
+    {:noreply, socket}
+  end
+
+  defp schedule_timestamp_tick() do
+    Process.send_after(self(), :tick, :timer.minutes(1))
+  end
+
   defp fmt(num) do
     chars = num |> Integer.to_string() |> String.to_charlist()
     {h, t} = Enum.split(chars, rem(length(chars), 3))