Media UI v1 (#17)

* Updated comments

* Added basic media tables to sources#show

* Adds a very basic listing and show page for media

lib/pinchflat_web/controllers/media/media_item_controller.ex

@@ -0,0 +1,11 @@
+defmodule PinchflatWeb.Media.MediaItemController do
+  use PinchflatWeb, :controller
+
+  alias Pinchflat.Media
+
+  def show(conn, %{"id" => id}) do
+    media_item = Media.get_media_item!(id)
+
+    render(conn, :show, media_item: media_item)
+  end
+end

lib/pinchflat_web/controllers/media/media_item_html.ex

@@ -0,0 +1,5 @@
+defmodule PinchflatWeb.Media.MediaItemHTML do
+  use PinchflatWeb, :html
+
+  embed_templates "media_item_html/*"
+end

lib/pinchflat_web/controllers/media/media_item_html/show.html.heex

@@ -0,0 +1,18 @@
+<div class="mb-6 flex gap-3 flex-row items-center justify-between">
+  <div class="flex gap-3 items-center">
+    <.link :if={@conn.params["source_id"]} navigate={~p"/sources/#{@media_item.source_id}"}>
+      <.icon name="hero-arrow-left" class="w-10 h-10 hover:dark:text-white" />
+    </.link>
+    <h2 class="text-title-md2 font-bold text-black dark:text-white ml-4">
+      Media Item #<%= @media_item.id %>
+    </h2>
+  </div>
+</div>
+<div class="rounded-sm border border-stroke bg-white px-5 pb-2.5 pt-6 shadow-default dark:border-strokedark dark:bg-boxdark sm:px-7.5 xl:pb-1">
+  <div class="max-w-full overflow-x-auto">
+    <div class="flex flex-col gap-10 dark:text-white">
+      <h3 class="font-bold text-xl">Attributes</h3>
+      <.list_items_from_map map={Map.from_struct(@media_item)} />
+    </div>
+  </div>
+</div>

lib/pinchflat_web/controllers/media_sources/source_controller.ex

@@ -2,6 +2,7 @@ defmodule PinchflatWeb.MediaSources.SourceController do
   use PinchflatWeb, :controller
 
   alias Pinchflat.Repo
+  alias Pinchflat.Media
   alias Pinchflat.Profiles
   alias Pinchflat.MediaSource
   alias Pinchflat.MediaSource.Source
@@ -36,7 +37,10 @@ defmodule PinchflatWeb.MediaSources.SourceController do
       |> MediaSource.get_source!()
       |> Repo.preload(:media_profile)
 
-    render(conn, :show, source: source)
+    pending_media = Media.list_pending_media_items_for(source)
+    downloaded_media = Media.list_downloaded_media_items_for(source)
+
+    render(conn, :show, source: source, pending_media: pending_media, downloaded_media: downloaded_media)
   end
 
   def edit(conn, %{"id" => id}) do

lib/pinchflat_web/controllers/media_sources/source_html/show.html.heex

@@ -33,6 +33,44 @@
 
       <h3 class="font-bold text-xl">Attributes</h3>
       <.list_items_from_map map={Map.from_struct(@source)} />
+
+      <h3 class="font-bold text-xl">Downloaded Media</h3>
+      <%= if length(@downloaded_media) > 0 do %>
+        <.table rows={@downloaded_media} table_class="text-black dark:text-white">
+          <:col :let={media_item} label="Title">
+            <%= String.slice(media_item.title, 0..50) %>...
+          </:col>
+          <:col :let={media_item} label="" class="flex place-content-evenly">
+            <.link
+              navigate={~p"/sources/#{@source.id}/media/#{media_item.id}"}
+              class="hover:text-secondary duration-200 ease-in-out mx-0.5"
+            >
+              <.icon name="hero-eye" />
+            </.link>
+          </:col>
+        </.table>
+      <% else %>
+        <p class="text-black dark:text-white">Nothing Here!</p>
+      <% end %>
+
+      <h3 class="font-bold text-xl">Pending Media</h3>
+      <%= if length(@pending_media) > 0 do %>
+        <.table rows={@pending_media} table_class="text-black dark:text-white">
+          <:col :let={media_item} label="Title">
+            <%= String.slice(media_item.title, 0..50) %>...
+          </:col>
+          <:col :let={media_item} label="" class="flex place-content-evenly">
+            <.link
+              navigate={~p"/sources/#{@source.id}/media/#{media_item.id}"}
+              class="hover:text-secondary duration-200 ease-in-out mx-0.5"
+            >
+              <.icon name="hero-eye" />
+            </.link>
+          </:col>
+        </.table>
+      <% else %>
+        <p class="text-black dark:text-white">Nothing Here!</p>
+      <% end %>
     </div>
   </div>
 </div>