Added codec settings to frontend

lib/pinchflat/downloading/codec_parser.ex

@@ -61,7 +61,8 @@ defmodule Pinchflat.Downloading.CodecParser do
     |> Enum.join("/")
   end
 
-  defp video_codec_map do
+  @doc false
+  def video_codec_map do
     %{
       "av01" => "av01",
       "avc" => "avc",
@@ -69,7 +70,8 @@ defmodule Pinchflat.Downloading.CodecParser do
     }
   end
 
-  defp audio_codec_map do
+  @doc false
+  def audio_codec_map do
     %{
       "aac" => "aac",
       "mp4a" => "mp4a",

lib/pinchflat/settings/setting.ex

@@ -61,6 +61,7 @@ defmodule Pinchflat.Settings.Setting do
             |> String.split(">")
             |> Enum.map(&String.trim/1)
             |> Enum.reject(&(String.trim(&1) == ""))
+            |> Enum.map(&String.downcase/1)
 
           put_change(changeset, actual_field, new_value)
       end

lib/pinchflat_web/controllers/settings/setting_html.ex

@@ -1,6 +1,8 @@
 defmodule PinchflatWeb.Settings.SettingHTML do
   use PinchflatWeb, :html
 
+  alias Pinchflat.Downloading.CodecParser
+
   embed_templates "setting_html/*"
 
   @doc """

lib/pinchflat_web/controllers/settings/setting_html/codec_settings_help.html.heex

@@ -0,0 +1,17 @@
+<aside>
+  <h2 class="text-xl font-bold mb-2">Codec Preferences</h2>
+  <section class="ml-2 md:ml-4 mb-2 max-w-prose">
+    <section>
+      Available video codecs:
+      <ul class="list-disc ml-8">
+        <li :for={{codec, _} <- CodecParser.video_codec_map()}><%= codec %></li>
+      </ul>
+    </section>
+    <section class="mt-4">
+      Available audio codecs:
+      <ul class="list-disc ml-8">
+        <li :for={{codec, _} <- CodecParser.audio_codec_map()}><%= codec %></li>
+      </ul>
+    </section>
+  </section>
+</aside>

lib/pinchflat_web/controllers/settings/setting_html/setting_form.html.heex

@@ -1,13 +1,24 @@
-<.simple_form :let={f} for={@changeset} action={@action}>
+<.simple_form
+  :let={f}
+  for={@changeset}
+  action={@action}
+  x-data="{ advancedMode: !!JSON.parse(localStorage.getItem('advancedMode')) }"
+  x-init="$watch('advancedMode', value => localStorage.setItem('advancedMode', JSON.stringify(value)))"
+>
   <.error :if={@changeset.action}>
     Oops, something went wrong! Please check the errors below.
   </.error>
 
-  <h3 class="mt-2 md:mt-8 text-2xl text-black dark:text-white">
-    Notification Settings
-  </h3>
-
   <section>
+    <section class="flex justify-between items-center mt-4">
+      <h3 class="text-2xl text-black dark:text-white">
+        Notification Settings
+      </h3>
+      <span class="cursor-pointer hover:underline" x-on:click="advancedMode = !advancedMode">
+        Editing Mode: <span x-text="advancedMode ? 'Advanced' : 'Basic'"></span>
+      </span>
+    </section>
+
     <%= live_render(
       @conn,
       Pinchflat.Settings.AppriseServerLive,
@@ -15,33 +26,42 @@
     ) %>
   </section>
 
-  <section class="mt-10">
-    <h3 class="text-2xl text-black dark:text-white">
-      Advanced Options
-    </h3>
+  <section class="mt-10" x-show="advancedMode">
+    <section>
+      <h3 class="text-2xl text-black dark:text-white">
+        Codec Options
+      </h3>
 
-    <%!-- TODO: add codec docs --%>
-    <.input
-      id="video_codec_preference_string"
-      name="setting[video_codec_preference_string]"
-      value={Enum.join(f[:video_codec_preference].value, ">")}
-      placeholder="avc>vp9>av01"
-      type="text"
-      label="Video Codec Preference"
-      help="Order of preference for video codecs. Separate with >. See below for available codecs TODO"
-      inputclass="font-mono text-sm mr-4"
-    />
+      <p class="text-sm mt-2 max-w-prose">
+        The best available codec will be used if your preferred codecs are not found
+      </p>
 
-    <.input
-      id="audio_codec_preference_string"
-      name="setting[audio_codec_preference_string]"
-      value={Enum.join(f[:audio_codec_preference].value, ">")}
-      placeholder="mp4a>opus>aac"
-      type="text"
-      label="Audio Codec Preference"
-      help="Order of preference for audio codecs. Separate with >. See below for available codecs TODO"
-      inputclass="font-mono text-sm mr-4"
-    />
+      <.input
+        id="video_codec_preference_string"
+        name="setting[video_codec_preference_string]"
+        value={Enum.join(f[:video_codec_preference].value, ">")}
+        placeholder="avc>vp9>av01"
+        type="text"
+        label="Video Codec Preference"
+        help="Order of preference for video codecs. Separate with >. Will be remuxed into an MP4 container. See below for available codecs"
+        inputclass="font-mono text-sm mr-4"
+      />
+
+      <.input
+        id="audio_codec_preference_string"
+        name="setting[audio_codec_preference_string]"
+        value={Enum.join(f[:audio_codec_preference].value, ">")}
+        placeholder="mp4a>opus>aac"
+        type="text"
+        label="Audio Codec Preference"
+        help="Order of preference for audio codecs. Separate with >. See below for available codecs"
+        inputclass="font-mono text-sm mr-4"
+      />
+    </section>
+
+    <div class="rounded-sm dark:bg-meta-4 p-4 md:p-6 mt-5">
+      <.codec_settings_help />
+    </div>
   </section>
 
   <.button class="mt-10 mb-4 sm:mb-8 w-full sm:w-auto" rounding="rounded-lg">Save Settings</.button>

test/pinchflat/settings_test.exs

@@ -106,4 +106,18 @@ defmodule Pinchflat.SettingsTest do
     assert ["avc", "vp9"] = changeset.changes.video_codec_preference
     assert ["aac", "opus"] = changeset.changes.audio_codec_preference
   end
+
+  test "downcases (video|audio)_codec_preference" do
+    setting = Settings.record()
+
+    new_setting = %{
+      video_codec_preference_string: "AVC>VP9",
+      audio_codec_preference_string: "AAC>OPUS"
+    }
+
+    changeset = Settings.change_setting(setting, new_setting)
+
+    assert ["avc", "vp9"] = changeset.changes.video_codec_preference
+    assert ["aac", "opus"] = changeset.changes.audio_codec_preference
+  end
 end