[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

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
+  def render_description(assigns) do
-    broken_text =
+    formatted_text =
-      assigns.text
+      Regex.split(~r{https?://\S+}, assigns.text, include_captures: true)
-      |> String.split("\n", trim: false)
+      |> Enum.map(fn
-      |> Enum.intersperse(Phoenix.HTML.Tag.tag(:span, class: "inline-block mt-2"))
+        "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>

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
         )

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>

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 %>

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
         )

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
         )

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 %>