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