From 8acf30ca71d4d1c319b584d445a8adb2c072d158 Mon Sep 17 00:00:00 2001 From: Kieran Eglin Date: Thu, 8 Feb 2024 10:28:32 -0800 Subject: [PATCH] Adds new UI to media profiles page --- lib/pinchflat/profiles/media_profile.ex | 3 +- .../layouts/partials/header.html.heex | 19 +----- .../media_profile_html/edit.html.heex | 20 +++--- .../media_profile_html/index.html.heex | 45 ++++++++++--- .../media_profile_form.html.heex | 63 ++++++++++++++----- .../media_profile_html/new.html.heex | 20 +++--- .../media_profile_html/show.html.heex | 35 +++++++---- .../media_profile_controller_test.exs | 12 ++-- 8 files changed, 147 insertions(+), 70 deletions(-) diff --git a/lib/pinchflat/profiles/media_profile.ex b/lib/pinchflat/profiles/media_profile.ex index 5e4a374..0d7fad9 100644 --- a/lib/pinchflat/profiles/media_profile.ex +++ b/lib/pinchflat/profiles/media_profile.ex @@ -27,7 +27,8 @@ defmodule Pinchflat.Profiles.MediaProfile do schema "media_profiles" do field :name, :string - field :output_path_template, :string + + field :output_path_template, :string, default: "/{{ uploader }}/{{ title }}.{{ ext }}" field :download_subs, :boolean, default: true field :download_auto_subs, :boolean, default: true diff --git a/lib/pinchflat_web/components/layouts/partials/header.html.heex b/lib/pinchflat_web/components/layouts/partials/header.html.heex index 8d70867..a89a162 100644 --- a/lib/pinchflat_web/components/layouts/partials/header.html.heex +++ b/lib/pinchflat_web/components/layouts/partials/header.html.heex @@ -1,5 +1,5 @@
-
+
-
diff --git a/lib/pinchflat_web/controllers/media_profiles/media_profile_html/edit.html.heex b/lib/pinchflat_web/controllers/media_profiles/media_profile_html/edit.html.heex index 38a1e43..6570b9b 100644 --- a/lib/pinchflat_web/controllers/media_profiles/media_profile_html/edit.html.heex +++ b/lib/pinchflat_web/controllers/media_profiles/media_profile_html/edit.html.heex @@ -1,8 +1,14 @@ -<.old_header> - Edit Media profile <%= @media_profile.id %> - <:subtitle>Use this form to manage media_profile records in your database. - +
+ <.link navigate={~p"/media_profiles"}> + <.icon name="hero-arrow-left" class="w-10 h-10 hover:dark:text-white" /> + +

Edit Media Profile

+
-<.media_profile_form changeset={@changeset} action={~p"/media_profiles/#{@media_profile}"} /> - -<.back navigate={~p"/media_profiles"}>Back to media_profiles +
+
+
+ <.media_profile_form changeset={@changeset} action={~p"/media_profiles/#{@media_profile}"} /> +
+
+
diff --git a/lib/pinchflat_web/controllers/media_profiles/media_profile_html/index.html.heex b/lib/pinchflat_web/controllers/media_profiles/media_profile_html/index.html.heex index 708efba..a009702 100644 --- a/lib/pinchflat_web/controllers/media_profiles/media_profile_html/index.html.heex +++ b/lib/pinchflat_web/controllers/media_profiles/media_profile_html/index.html.heex @@ -1,8 +1,39 @@ -<.old_header> - Listing Media profiles - <:actions> - <.link href={~p"/media_profiles/new"}> - <.button>New Media profile +
+

All Media Profiles

+ +
+ +
+
+
+ <.table rows={@media_profiles} table_class="text-black dark:text-white"> + <:col :let={media_profile} label="Name"> + <%= media_profile.name %> + + <:col :let={media_profile} label="Output Template"> + <%= media_profile.output_path_template %> + + <:col :let={media_profile} label="" class="flex place-content-evenly"> + <.link + navigate={~p"/media_profiles/#{media_profile.id}"} + class="hover:text-secondary duration-200 ease-in-out mx-0.5" + > + <.icon name="hero-eye" /> + + <.link + navigate={~p"/media_profiles/#{media_profile.id}/edit"} + class="hover:text-secondary duration-200 ease-in-out mx-0.5" + > + <.icon name="hero-pencil-square" /> + + + +
+
+
diff --git a/lib/pinchflat_web/controllers/media_profiles/media_profile_html/media_profile_form.html.heex b/lib/pinchflat_web/controllers/media_profiles/media_profile_html/media_profile_form.html.heex index ca1ee9c..1c653fc 100644 --- a/lib/pinchflat_web/controllers/media_profiles/media_profile_html/media_profile_form.html.heex +++ b/lib/pinchflat_web/controllers/media_profiles/media_profile_html/media_profile_form.html.heex @@ -2,29 +2,62 @@ <.error :if={@changeset.action}> Oops, something went wrong! Please check the errors below. - <.input field={f[:name]} type="text" label="Name" /> - <.input field={f[:output_path_template]} type="text" label="Output path template" /> +

+ General Options +

+ <.input field={f[:name]} type="text" label="Name" placeholder="New Profile" help="(required)" /> + <.input + field={f[:output_path_template]} + type="text" + label="Output path template" + help="TODO: provide docs (required)" + /> -

Subtitle Options

- <.input field={f[:download_subs]} type="checkbox" label="Download Subs" /> - <.input field={f[:download_auto_subs]} type="checkbox" label="Download Autogenerated Subs" /> - <.input field={f[:embed_subs]} type="checkbox" label="Embed Subs" /> - <.input field={f[:sub_langs]} type="text" label="Sub Langs" /> +

+ Subtitle Options +

+ <.input field={f[:download_subs]} type="toggle" label="Download Subtitles" /> + <.input + field={f[:download_auto_subs]} + type="toggle" + label="Download Autogenerated Subtitles" + help="Prefers normal subs but will download autogenerated if needed" + /> + <.input + field={f[:embed_subs]} + type="toggle" + label="Embed Subtitles" + help="Embeds subtitles in the video file itself, if supported" + /> + <.input + field={f[:sub_langs]} + type="text" + label="Subtitle Languages" + help="Use commas for multiple languages (eg: en,de)" + /> -

Thumbnail Options

- <.input field={f[:download_thumbnail]} type="checkbox" label="Download Thumbnail" /> - <.input field={f[:embed_thumbnail]} type="checkbox" label="Embed Thumbnail" /> +

+ Thumbnail Options +

+ <.input field={f[:download_thumbnail]} type="toggle" label="Download Thumbnail" /> + <.input field={f[:embed_thumbnail]} type="toggle" label="Embed Thumbnail" /> -

Metadata Options

- <.input field={f[:download_metadata]} type="checkbox" label="Download Metadata" /> - <.input field={f[:embed_metadata]} type="checkbox" label="Embed Metadata" /> +

+ Metadata Options +

+ <.input field={f[:download_metadata]} type="toggle" label="Download Metadata" /> + <.input field={f[:embed_metadata]} type="toggle" label="Embed Metadata" /> + +

+ Release Format Options +

-

Release Format Options

<.input field={f[:shorts_behaviour]} options={friendly_format_type_options()} type="select" label="Include Shorts?" + help="Experimental" /> <.input field={f[:livestream_behaviour]} @@ -34,6 +67,6 @@ /> <:actions> - <.button>Save Media profile + <.button class="mt-15 mb-5 sm:mb-7.5">Save Media profile diff --git a/lib/pinchflat_web/controllers/media_profiles/media_profile_html/new.html.heex b/lib/pinchflat_web/controllers/media_profiles/media_profile_html/new.html.heex index 5d1e8bf..9599619 100644 --- a/lib/pinchflat_web/controllers/media_profiles/media_profile_html/new.html.heex +++ b/lib/pinchflat_web/controllers/media_profiles/media_profile_html/new.html.heex @@ -1,8 +1,14 @@ -<.old_header> - New Media profile - <:subtitle>Use this form to manage media_profile records in your database. - +
+ <.link navigate={~p"/media_profiles"}> + <.icon name="hero-arrow-left" class="w-10 h-10 hover:dark:text-white" /> + +

New Media Profile

+
-<.media_profile_form changeset={@changeset} action={~p"/media_profiles"} /> - -<.back navigate={~p"/media_profiles"}>Back to media_profiles +
+
+
+ <.media_profile_form changeset={@changeset} action={~p"/media_profiles"} /> +
+
+
diff --git a/lib/pinchflat_web/controllers/media_profiles/media_profile_html/show.html.heex b/lib/pinchflat_web/controllers/media_profiles/media_profile_html/show.html.heex index f8dc25d..bb39eb9 100644 --- a/lib/pinchflat_web/controllers/media_profiles/media_profile_html/show.html.heex +++ b/lib/pinchflat_web/controllers/media_profiles/media_profile_html/show.html.heex @@ -1,13 +1,26 @@ -<.old_header> - Media profile <%= @media_profile.id %> - <:subtitle>This is a media_profile record from your database. - <:actions> - <.link href={~p"/media_profiles/#{@media_profile}/edit"}> - <.button>Edit media_profile +
+
+ <.link navigate={~p"/media_profiles"}> + <.icon name="hero-arrow-left" class="w-10 h-10 hover:dark:text-white" /> - - +

+ Media Profile #<%= @media_profile.id %> +

+
-<.list_items_from_map map={Map.from_struct(@media_profile)} /> - -<.back navigate={~p"/media_profiles"}>Back to media_profiles + +
+
+
+
+

Attributes

+ <.list_items_from_map map={Map.from_struct(@media_profile)} /> +
+
+
diff --git a/test/pinchflat_web/controllers/media_profile_controller_test.exs b/test/pinchflat_web/controllers/media_profile_controller_test.exs index b5bac1e..8a2e3e1 100644 --- a/test/pinchflat_web/controllers/media_profile_controller_test.exs +++ b/test/pinchflat_web/controllers/media_profile_controller_test.exs @@ -13,14 +13,14 @@ defmodule PinchflatWeb.MediaProfileControllerTest do describe "index" do test "lists all media_profiles", %{conn: conn} do conn = get(conn, ~p"/media_profiles") - assert html_response(conn, 200) =~ "Listing Media profiles" + assert html_response(conn, 200) =~ "All Media Profiles" end end describe "new media_profile" do test "renders form", %{conn: conn} do conn = get(conn, ~p"/media_profiles/new") - assert html_response(conn, 200) =~ "New Media profile" + assert html_response(conn, 200) =~ "New Media Profile" end end @@ -32,12 +32,12 @@ defmodule PinchflatWeb.MediaProfileControllerTest do assert redirected_to(conn) == ~p"/media_profiles/#{id}" conn = get(conn, ~p"/media_profiles/#{id}") - assert html_response(conn, 200) =~ "Media profile #{id}" + assert html_response(conn, 200) =~ "Media Profile ##{id}" end test "renders errors when data is invalid", %{conn: conn} do conn = post(conn, ~p"/media_profiles", media_profile: @invalid_attrs) - assert html_response(conn, 200) =~ "New Media profile" + assert html_response(conn, 200) =~ "New Media Profile" end end @@ -49,7 +49,7 @@ defmodule PinchflatWeb.MediaProfileControllerTest do media_profile: media_profile } do conn = get(conn, ~p"/media_profiles/#{media_profile}/edit") - assert html_response(conn, 200) =~ "Edit Media profile" + assert html_response(conn, 200) =~ "Edit Media Profile" end end @@ -66,7 +66,7 @@ defmodule PinchflatWeb.MediaProfileControllerTest do test "renders errors when data is invalid", %{conn: conn, media_profile: media_profile} do conn = put(conn, ~p"/media_profiles/#{media_profile}", media_profile: @invalid_attrs) - assert html_response(conn, 200) =~ "Edit Media profile" + assert html_response(conn, 200) =~ "Edit Media Profile" end end