[Enhancement] Allow setting preference for video/audio codec (#255)

* [WIP] started on codec parser

* Added codec preferences to settings model

* [WIP] added basic codec preference fields to settings form

* Hooked up the backend portion of the codec preference work

* Added codec settings to frontend

* Ensured you can remove codec data

lib/pinchflat_web/controllers/media_items/media_item_html.ex

@@ -18,7 +18,7 @@ defmodule PinchflatWeb.MediaItems.MediaItemHTML do
   def media_type(media_item) do
     case Path.extname(media_item.media_filepath) do
       ext when ext in [".mp4", ".webm", ".mkv"] -> :video
-      ext when ext in [".mp3", ".m4a"] -> :audio
+      ext when ext in [".mp3", ".m4a", ".opus"] -> :audio
       _ -> :unknown
     end
   end

lib/pinchflat_web/controllers/media_items/media_item_html/media_item_form.html.heex

@@ -9,7 +9,7 @@
     Oops, something went wrong! Please check the errors below.
   </.error>
 
-  <h3 class=" text-2xl text-black dark:text-white">
+  <h3 class="text-2xl text-black dark:text-white">
     General Options
   </h3>
 

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,5 +26,43 @@
     ) %>
   </section>
 
+  <section class="mt-10" x-show="advancedMode">
+    <section>
+      <h3 class="text-2xl text-black dark:text-white">
+        Codec Options
+      </h3>
+
+      <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="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>
 </.simple_form>