From 9a18716bad4d29adaa519166036bcbaff93a269f Mon Sep 17 00:00:00 2001 From: Kieran Eglin Date: Tue, 20 Feb 2024 12:33:19 -0800 Subject: [PATCH] Added UI explaining output template options --- assets/tailwind.config.js | 3 +- lib/pinchflat/profiles/media_profile.ex | 2 +- lib/pinchflat_web.ex | 1 + .../components/core_components.ex | 21 +++++- .../custom_components/text_components.ex | 31 ++++++++ .../media_profiles/media_profile_html.ex | 17 +++++ .../media_profile_form.html.heex | 14 ++-- .../output_template_help.html.heex | 72 +++++++++++++++++++ 8 files changed, 151 insertions(+), 10 deletions(-) create mode 100644 lib/pinchflat_web/components/custom_components/text_components.ex create mode 100644 lib/pinchflat_web/controllers/media_profiles/media_profile_html/output_template_help.html.heex diff --git a/assets/tailwind.config.js b/assets/tailwind.config.js index 08f407f..49d9b55 100644 --- a/assets/tailwind.config.js +++ b/assets/tailwind.config.js @@ -11,7 +11,8 @@ module.exports = { darkMode: 'class', theme: { fontFamily: { - satoshi: ['Satoshi', 'sans-serif'] + satoshi: ['Satoshi', 'sans-serif'], + ...defaultTheme.fontFamily }, screens: { '2xsm': '375px', diff --git a/lib/pinchflat/profiles/media_profile.ex b/lib/pinchflat/profiles/media_profile.ex index cc1a7fa..848eae6 100644 --- a/lib/pinchflat/profiles/media_profile.ex +++ b/lib/pinchflat/profiles/media_profile.ex @@ -29,7 +29,7 @@ defmodule Pinchflat.Profiles.MediaProfile do schema "media_profiles" do field :name, :string - field :output_path_template, :string, default: "/{{ uploader }}/{{ title }}/{{ title }}-{{ id }}.{{ ext }}" + field :output_path_template, :string, default: "/{{ channel }}/{{ title }}/{{ title }} [{{ id }}].{{ ext }}" field :download_subs, :boolean, default: true field :download_auto_subs, :boolean, default: true diff --git a/lib/pinchflat_web.ex b/lib/pinchflat_web.ex index 0df8659..e0a512d 100644 --- a/lib/pinchflat_web.ex +++ b/lib/pinchflat_web.ex @@ -88,6 +88,7 @@ defmodule PinchflatWeb do # Core UI components and translation import PinchflatWeb.Gettext import PinchflatWeb.CoreComponents + import PinchflatWeb.CustomComponents.TextComponents import PinchflatWeb.CustomComponents.TableComponents import PinchflatWeb.CustomComponents.ButtonComponents diff --git a/lib/pinchflat_web/components/core_components.ex b/lib/pinchflat_web/components/core_components.ex index bcf8e02..939169b 100644 --- a/lib/pinchflat_web/components/core_components.ex +++ b/lib/pinchflat_web/components/core_components.ex @@ -256,6 +256,7 @@ defmodule PinchflatWeb.CoreComponents do attr :prompt, :string, default: nil, doc: "the prompt for select inputs" attr :options, :list, doc: "the options to pass to Phoenix.HTML.Form.options_for_select/2" attr :multiple, :boolean, default: false, doc: "the multiple flag for select inputs" + attr :inputclass, :string, default: "" attr :rest, :global, include: ~w(accept autocomplete capture cols disabled form list max maxlength min minlength multiple pattern placeholder readonly required rows size step) @@ -281,7 +282,15 @@ defmodule PinchflatWeb.CoreComponents do
<.help :if={@help}><%= @help %> @@ -315,7 +324,10 @@ defmodule PinchflatWeb.CoreComponents do
@@ -335,7 +347,8 @@ defmodule PinchflatWeb.CoreComponents do name={@name} class={[ "relative z-20 w-full appearance-none rounded border border-stroke bg-transparent py-3 pl-5 pr-12 outline-none transition", - "focus:border-primary active:border-primary dark:border-form-strokedark dark:bg-form-input text-black dark:text-white" + "focus:border-primary active:border-primary dark:border-form-strokedark dark:bg-form-input text-black dark:text-white", + @inputclass ]} multiple={@multiple} {@rest} @@ -359,6 +372,7 @@ defmodule PinchflatWeb.CoreComponents do class={[ "mt-2 block w-full rounded-lg text-zinc-900 focus:ring-0 sm:text-sm sm:leading-6", "min-h-[6rem] phx-no-feedback:border-zinc-300 phx-no-feedback:focus:border-zinc-400", + @inputclass, @errors == [] && "border-zinc-300 focus:border-zinc-400", @errors != [] && "border-rose-400 focus:border-rose-400" ]} @@ -384,6 +398,7 @@ defmodule PinchflatWeb.CoreComponents do "w-full rounded-lg border-[1.5px] border-stroke bg-transparent px-5 py-3 font-normal text-black", "outline-none transition focus:border-primary active:border-primary disabled:cursor-default disabled:bg-whiter", "dark:border-form-strokedark dark:bg-form-input dark:text-white dark:focus:border-primary", + @inputclass, @errors != [] && "border-rose-400 focus:border-rose-400" ]} {@rest} diff --git a/lib/pinchflat_web/components/custom_components/text_components.ex b/lib/pinchflat_web/components/custom_components/text_components.ex new file mode 100644 index 0000000..a109666 --- /dev/null +++ b/lib/pinchflat_web/components/custom_components/text_components.ex @@ -0,0 +1,31 @@ +defmodule PinchflatWeb.CustomComponents.TextComponents do + @moduledoc false + use Phoenix.Component + + @doc """ + Renders a code block with the given content. + """ + slot :inner_block + + def inline_code(assigns) do + ~H""" + + <%= render_slot(@inner_block) %> + + """ + end + + @doc """ + Renders a reference link with the given href and content. + """ + attr :href, :string, required: true + slot :inner_block + + def reference_link(assigns) do + ~H""" + <.link href={@href} target="_blank" class="text-blue-500 hover:text-blue-300"> + <%= render_slot(@inner_block) %> + + """ + end +end diff --git a/lib/pinchflat_web/controllers/media_profiles/media_profile_html.ex b/lib/pinchflat_web/controllers/media_profiles/media_profile_html.ex index 31133c1..41840f0 100644 --- a/lib/pinchflat_web/controllers/media_profiles/media_profile_html.ex +++ b/lib/pinchflat_web/controllers/media_profiles/media_profile_html.ex @@ -28,4 +28,21 @@ defmodule PinchflatWeb.MediaProfiles.MediaProfileHTML do {"360p", "360p"} ] end + + def custom_output_template_options do + ~w(upload_day upload_month upload_year)a + end + + def common_output_template_options do + ~w( + id + ext + title + fulltitle + uploader + channel + upload_date + duration_string + )a + end end 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 21c006c..0786aa7 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 @@ -6,11 +6,13 @@ General Options <.input field={f[:name]} type="text" label="Name" placeholder="New Profile" help="(required)" /> + <.input field={f[:output_path_template]} type="text" + inputclass="font-mono" label="Output path template" - help="TODO: provide docs (required)" + help="Must end with .{{ ext }}. See below for more details. I promise the default is good for most cases (required)" />

@@ -67,7 +69,7 @@ options={friendly_format_type_options()} type="select" label="Include Shorts?" - help="Experimental" + help="Experimental. Please report any issues on GitHub" /> <.input field={f[:livestream_behaviour]} @@ -88,7 +90,9 @@ help="Will grab the closest available resolution if your preferred is not available" /> - <:actions> - <.button class="mt-15 mb-5 sm:mb-7.5">Save Media profile - + <.button class="mt-15 mb-5 sm:mb-7.5">Save Media profile + +
+ <.output_template_help /> +
diff --git a/lib/pinchflat_web/controllers/media_profiles/media_profile_html/output_template_help.html.heex b/lib/pinchflat_web/controllers/media_profiles/media_profile_html/output_template_help.html.heex new file mode 100644 index 0000000..c98fb21 --- /dev/null +++ b/lib/pinchflat_web/controllers/media_profiles/media_profile_html/output_template_help.html.heex @@ -0,0 +1,72 @@ +<%!-- The heex HTML formatter is really struggling with this file - I apologize in advance --%> +