From 6a1b7b016035bf575adb730736437e0a923e1900 Mon Sep 17 00:00:00 2001
From: Kieran <kieran.eglin@gmail.com>
Date: Thu, 24 Oct 2024 12:47:48 -0700
Subject: [PATCH] [Enhancement] Misc. UI updates (#434)

* Format 'Scheduled At' in task table according to user's TZ

* Changed video preview layout to 1 column on all displays

* Made links in descriptions clickable

* Updated Copy JSON button to properly escape newline characters
---
 .../custom_components/text_components.ex      | 21 ++++++++++++-------
 .../actions_dropdown.html.heex                |  2 +-
 .../media_item_html/media_preview.heex        |  2 +-
 .../media_item_html/show.html.heex            |  9 ++++----
 .../actions_dropdown.html.heex                |  2 +-
 .../source_html/actions_dropdown.html.heex    |  2 +-
 .../sources/source_html/show.html.heex        |  2 +-
 7 files changed, 24 insertions(+), 16 deletions(-)

diff --git a/lib/pinchflat_web/components/custom_components/text_components.ex b/lib/pinchflat_web/components/custom_components/text_components.ex
index e5cc4eb..9319c55 100644
--- a/lib/pinchflat_web/components/custom_components/text_components.ex
+++ b/lib/pinchflat_web/components/custom_components/text_components.ex
@@ -62,17 +62,24 @@ defmodule PinchflatWeb.CustomComponents.TextComponents do
   end
 
   @doc """
-  Renders a block of text with each line broken into a separate span.
+  Renders a block of text with each line broken into a separate span and links highlighted.
   """
   attr :text, :string, required: true
 
-  def break_on_newline(assigns) do
-    broken_text =
-      assigns.text
-      |> String.split("\n", trim: false)
-      |> Enum.intersperse(Phoenix.HTML.Tag.tag(:span, class: "inline-block mt-2"))
+  def render_description(assigns) do
+    formatted_text =
+      Regex.split(~r{https?://\S+}, assigns.text, include_captures: true)
+      |> Enum.map(fn
+        "http" <> _ = url ->
+          Phoenix.HTML.Tag.content_tag(:a, url, class: "text-blue-500 hover:text-blue-300", href: url, target: "_blank")
 
-    assigns = Map.put(assigns, :text, broken_text)
+        text ->
+          text
+          |> String.split("\n", trim: false)
+          |> Enum.intersperse(Phoenix.HTML.Tag.tag(:span, class: "inline-block mt-2"))
+      end)
+
+    assigns = Map.put(assigns, :text, formatted_text)
 
     ~H"""
     <span><%= @text %></span>
diff --git a/lib/pinchflat_web/controllers/media_items/media_item_html/actions_dropdown.html.heex b/lib/pinchflat_web/controllers/media_items/media_item_html/actions_dropdown.html.heex
index fcd4589..cd40fb7 100644
--- a/lib/pinchflat_web/controllers/media_items/media_item_html/actions_dropdown.html.heex
+++ b/lib/pinchflat_web/controllers/media_items/media_item_html/actions_dropdown.html.heex
@@ -2,7 +2,7 @@
   <:option>
     <span x-data="{ copied: false }" x-on:click={~s"
         copyWithCallbacks(
-          `#{Jason.Formatter.pretty_print(Phoenix.json_library().encode!(@media_item))}`, 
+          String.raw`#{Jason.Formatter.pretty_print(Phoenix.json_library().encode!(@media_item))}`,
           () => copied = true, 
           () => copied = false
         )
diff --git a/lib/pinchflat_web/controllers/media_items/media_item_html/media_preview.heex b/lib/pinchflat_web/controllers/media_items/media_item_html/media_preview.heex
index 5ad0533..d5d43be 100644
--- a/lib/pinchflat_web/controllers/media_items/media_item_html/media_preview.heex
+++ b/lib/pinchflat_web/controllers/media_items/media_item_html/media_preview.heex
@@ -1,5 +1,5 @@
 <%= if media_type(@media_item) == :video do %>
-  <video controls class="max-h-96 w-full">
+  <video controls class="max-h-128 w-full">
     <source src={~p"/media/#{@media_item.uuid}/stream"} type="video/mp4" />
     Your browser does not support the video element.
   </video>
diff --git a/lib/pinchflat_web/controllers/media_items/media_item_html/show.html.heex b/lib/pinchflat_web/controllers/media_items/media_item_html/show.html.heex
index e2442c6..5d16070 100644
--- a/lib/pinchflat_web/controllers/media_items/media_item_html/show.html.heex
+++ b/lib/pinchflat_web/controllers/media_items/media_item_html/show.html.heex
@@ -26,11 +26,12 @@
       <:tab title="Media" id="media">
         <div class="flex flex-col gap-10 dark:text-white">
           <%= if media_file_exists?(@media_item) do %>
-            <section class="grid grid-cols-1 xl:grid-cols-2 xl:gap-6 mt-6">
+            <section class="grid grid-cols-1 xl:gap-6 mt-6">
               <div>
                 <.media_preview media_item={@media_item} />
               </div>
-              <aside class="mt-4 xl:mt-0">
+              <aside class="mt-4">
+                <h2 class="text-xl mb-2"><%= @media_item.title %></h2>
                 <div>Uploaded: <%= DateTime.to_date(@media_item.uploaded_at) %></div>
                 <div>
                   <span :if={URI.parse(@media_item.original_url).scheme =~ "http"}>
@@ -44,7 +45,7 @@
                   </span>
                 </div>
                 <div :if={@media_item.description} class="mt-4 text-bodydark">
-                  <.break_on_newline text={@media_item.description} />
+                  <.render_description text={@media_item.description} />
                 </div>
               </aside>
             </section>
@@ -70,7 +71,7 @@
               <%= task.job.state %>
             </:col>
             <:col :let={task} label="Scheduled At">
-              <%= Calendar.strftime(task.job.scheduled_at, "%y-%m-%d %I:%M:%S %p %Z") %>
+              <.datetime_in_zone datetime={task.job.scheduled_at} />
             </:col>
           </.table>
         <% else %>
diff --git a/lib/pinchflat_web/controllers/media_profiles/media_profile_html/actions_dropdown.html.heex b/lib/pinchflat_web/controllers/media_profiles/media_profile_html/actions_dropdown.html.heex
index 29fbe42..da058fa 100644
--- a/lib/pinchflat_web/controllers/media_profiles/media_profile_html/actions_dropdown.html.heex
+++ b/lib/pinchflat_web/controllers/media_profiles/media_profile_html/actions_dropdown.html.heex
@@ -2,7 +2,7 @@
   <:option>
     <span x-data="{ copied: false }" x-on:click={~s"
         copyWithCallbacks(
-          `#{Jason.Formatter.pretty_print(Phoenix.json_library().encode!(@media_profile))}`, 
+          String.raw`#{Jason.Formatter.pretty_print(Phoenix.json_library().encode!(@media_profile))}`,
           () => copied = true, 
           () => copied = false
         )
diff --git a/lib/pinchflat_web/controllers/sources/source_html/actions_dropdown.html.heex b/lib/pinchflat_web/controllers/sources/source_html/actions_dropdown.html.heex
index 0495384..f2681c0 100644
--- a/lib/pinchflat_web/controllers/sources/source_html/actions_dropdown.html.heex
+++ b/lib/pinchflat_web/controllers/sources/source_html/actions_dropdown.html.heex
@@ -17,7 +17,7 @@
   <:option>
     <span x-data="{ copied: false }" x-on:click={~s"
         copyWithCallbacks(
-          `#{Jason.Formatter.pretty_print(Phoenix.json_library().encode!(@source))}`, 
+          String.raw`#{Jason.Formatter.pretty_print(Phoenix.json_library().encode!(@source))}`,
           () => copied = true, 
           () => copied = false
         )
diff --git a/lib/pinchflat_web/controllers/sources/source_html/show.html.heex b/lib/pinchflat_web/controllers/sources/source_html/show.html.heex
index 26fdc96..0e9459a 100644
--- a/lib/pinchflat_web/controllers/sources/source_html/show.html.heex
+++ b/lib/pinchflat_web/controllers/sources/source_html/show.html.heex
@@ -67,7 +67,7 @@
               <%= task.job.state %>
             </:col>
             <:col :let={task} label="Scheduled At">
-              <%= Calendar.strftime(task.job.scheduled_at, "%y-%m-%d %I:%M:%S %p %Z") %>
+              <.datetime_in_zone datetime={task.job.scheduled_at} />
             </:col>
           </.table>
         <% else %>