Added sponsorblock options to profile form

lib/pinchflat_web/components/core_components.ex

@@ -251,7 +251,7 @@ defmodule PinchflatWeb.CoreComponents do
   attr :type, :string,
     default: "text",
     values: ~w(checkbox color date datetime-local email file hidden month number password
-               toggle range radio search select tel text textarea time url week)
+            checkbox_group toggle range radio search select tel text textarea time url week)
 
   attr :field, Phoenix.HTML.FormField, doc: "a form field struct retrieved from the form, for example: @form[:email]"
 
@@ -304,6 +304,33 @@ defmodule PinchflatWeb.CoreComponents do
     """
   end
 
+  def input(%{type: "checkbox_group"} = assigns) do
+    ~H"""
+    <div phx-feedback-for={@name}>
+      <.label for={@id}>
+        <%= @label %><span :if={@label_suffix} class="text-xs text-bodydark"><%= @label_suffix %></span>
+      </.label>
+      <section class="grid grid-cols-1 gap-2 md:grid-cols-2 max-w-prose mb-4 ml-1">
+        <div :for={{option_name, option_value} <- @options} class="flex items-center">
+          <input
+            type="checkbox"
+            id={"#{@id}-#{option_value}"}
+            name={"#{@name}[]"}
+            value={option_value}
+            checked={option_value in @value}
+            class={["rounded focus:ring-offset-0 ring-offset-0 focus:ring-0 h-5 w-5 ", @inputclass]}
+          />
+          <label for={"#{@id}-#{option_value}"} class="ml-2 cursor-pointer select-none">
+            <%= option_name %>
+          </label>
+        </div>
+      </section>
+      <.help :if={@help}><%= @help %></.help>
+      <.error :for={msg <- @errors}><%= msg %></.error>
+    </div>
+    """
+  end
+
   def input(%{type: "toggle"} = assigns) do
     assigns =
       assign_new(assigns, :checked, fn ->
@@ -601,6 +628,10 @@ defmodule PinchflatWeb.CoreComponents do
         _ ->
           true
       end)
+      |> Enum.map(fn
+        {k, v} when is_list(v) -> {k, Enum.join(v, ", ")}
+        rest -> rest
+      end)
 
     assigns = assign(assigns, iterable_attributes: attrs)
 

lib/pinchflat_web/controllers/media_profiles/media_profile_html.ex

@@ -32,6 +32,26 @@ defmodule PinchflatWeb.MediaProfiles.MediaProfileHTML do
     ]
   end
 
+  def friendly_sponsorblock_options do
+    [
+      {"Disabled (default)", "disabled"},
+      {"Remove Segments", "remove"}
+    ]
+  end
+
+  def frieldly_sponsorblock_categories do
+    [
+      {"Sponsor", "sponsor"},
+      {"Intro/Intermission", "intro"},
+      {"Outro/Credits", "outro"},
+      {"Self Promotion", "selfpromo"},
+      {"Preview/Recap", "preview"},
+      {"Filler Tangent", "filler"},
+      {"Interaction Reminder", "interaction"},
+      {"Non-music Section", "music_offtopic"}
+    ]
+  end
+
   def custom_output_template_options do
     %{
       upload_day: nil,

lib/pinchflat_web/controllers/media_profiles/media_profile_html/media_profile_form.html.heex

@@ -238,6 +238,36 @@
       />
     </section>
 
+    <h3 class="mt-10 text-2xl text-black dark:text-white">
+      SponsorBlock Options
+    </h3>
+
+    <section x-data="{ sponsorblockBehaviour: null }">
+      <section x-data="{ presets: { default: 'disabled', media_center: 'disabled', audio: 'disabled', archiving: 'disabled' } }">
+        <.input
+          field={f[:sponsorblock_behaviour]}
+          options={friendly_sponsorblock_options()}
+          type="select"
+          label="SponsorBlock Behaviour"
+          help="Action to take when SponsorBlock segments are found. 'Disabled' won't take any action"
+          x-model="sponsorblockBehaviour"
+          x-init="
+            sponsorblockBehaviour = $el.value
+            $watch('selectedPreset', p => p && ($el.value = presets[p]))
+          "
+        />
+      </section>
+
+      <section x-show="sponsorblockBehaviour !== 'disabled'" x-transition>
+        <.input
+          field={f[:sponsorblock_categories]}
+          options={frieldly_sponsorblock_categories()}
+          type="checkbox_group"
+          label="SponsorBlock Categories"
+        />
+      </section>
+    </section>
+
     <.button class="my-10 sm:mb-7.5 w-full sm:w-auto" rounding="rounded-lg">Save Media profile</.button>
   </section>