Audio Codecs & Slightly Improve UX

solid-src/src/App.tsx

@@ -17,12 +17,13 @@ import {
     playFile,
     videoFileExtensions,
     type CodecInfo,
+    type CodecList,
     type FFmpegParams,
 } from "./util/ffmpeg";
 import Neutralino from "@neutralinojs/lib";
 import H264Options from "./components/H264Options";
 import { openFile } from "./util/oshelper";
-import { getTemporaryFilePath } from "./util/path";
+import { getTemporaryFilePath, getVencoderFolder } from "./util/path";
 import { generateRandomString } from "./util/string";
 import "./css/icons.css";
 import BreezeIcon from "./components/BreezeIcon";
@@ -41,6 +42,7 @@ function App() {
     const [windowFocused, setWindowFocused] = createSignal(true);
     const [displayedCodecs, setDisplayedCodecs]: Signal<CodecInfo[]> =
         createSignal([] as CodecInfo[]);
+    const [audioCodecList, setAudioCodecList] = createSignal([] as CodecInfo[]);
     const [fileList, setFileList] = createSignal([] as string[]);
     const [selectedClip, setSelectedClip] = createSignal("");
     const [outputCommand, setOutputCommand] = createSignal(
@@ -56,8 +58,9 @@ function App() {
     const [globalopts, setGlobalopts] = createSignal("");
     const [inputopts, setInputopts] = createSignal("");
     const [outputopts, setOutputopts] = createSignal("");
+    const [audioCodec, setAudioCodec] = createSignal("copy");
     const logs: { [id: number]: string[] } = {};
-    let supportedCodecs: CodecInfo[] = [];
+    let supportedCodecs: CodecList = { vcodecs: [], acodecs: [] };
     let ffmpegParams: FFmpegParams = {
         vcodec: "",
         useropts: {
@@ -127,6 +130,7 @@ function App() {
 
         supportedCodecs = await getAvailableCodecs();
         filterDisplayedCodecs();
+        setAudioCodecList(supportedCodecs.acodecs);
 
         const firstCodec = displayedCodecs()[0];
 
@@ -180,12 +184,14 @@ function App() {
     function filterDisplayedCodecs() {
         if (showCommonCodecs()) {
             setDisplayedCodecs(
-                supportedCodecs.filter((v) => commonCodecs.has(v.shortName)),
+                supportedCodecs.vcodecs.filter((v) =>
+                    commonCodecs.has(v.shortName),
+                ),
             );
             return;
         }
 
-        setDisplayedCodecs(supportedCodecs);
+        setDisplayedCodecs(supportedCodecs.vcodecs);
     }
 
     function showCommonCodecsChanged(e: InputEvent) {
@@ -248,7 +254,7 @@ function App() {
         ffmpegParams = {
             vcodec: selectedCodec()?.shortName ?? "",
             encoder,
-            acodec: ffmpegParams.acodec,
+            acodec: audioCodec(),
             abitrate: ffmpegParams.abitrate,
             crf: ffmpegParams.crf,
             doNotUseAn: ffmpegParams.doNotUseAn,
@@ -282,14 +288,7 @@ function App() {
                 ? videoFileExtensions[selectedCodec()?.shortName ?? ""]
                 : customExt;
 
-        switch (window.NL_OS) {
+        ffmpegParams.outputFile = `${await getVencoderFolder()}${fileName}.${fileExt}`;
-            case "Linux":
-                ffmpegParams.outputFile = `${await Neutralino.os.getEnv("HOME")}/Vencoder/${fileName}.${fileExt}`;
-                break;
-            case "Windows":
-                ffmpegParams.outputFile = `${await Neutralino.os.getEnv("HOMEPATH")}\\Vencoder\\${fileName}.${fileExt}`;
-                break;
-        }
 
         const outputDir = (
             await Neutralino.filesystem.getPathParts(
@@ -401,9 +400,7 @@ function App() {
     }
 
     return (
-        <main class="row flex-col">
+        <main class="row">
-            <div class="container" style={{ flex: "1" }}>
-                <div class="row h-full">
             <div class="row flex-col h-full">
                 <header
                     class={`k-page-header k-rborder ${windowFocused() ? "" : "window-blur"}`}
@@ -419,13 +416,9 @@ function App() {
                             {(item, _) => (
                                 <li
                                     class={
-                                                item == selectedClip()
+                                        item == selectedClip() ? "selected" : ""
-                                                    ? "selected"
-                                                    : ""
-                                            }
-                                            onclick={() =>
-                                                setSelectedClip(item)
                                     }
+                                    onclick={() => setSelectedClip(item)}
                                 >
                                     {item}
                                 </li>
@@ -433,16 +426,10 @@ function App() {
                         </For>
                     </ul>
                     <div class="row gap2">
-                                <button
+                        <button onclick={openBtnClicked} class="k-button">
-                                    onclick={openBtnClicked}
-                                    class="k-button"
-                                >
                             Open...
                         </button>
-                                <button
+                        <button onclick={removeAllBtnClicked} class="k-button">
-                                    onclick={removeAllBtnClicked}
-                                    class="k-button"
-                                >
                             Remove All
                         </button>
                         <button
@@ -469,10 +456,7 @@ function App() {
                             class="icon-button k-button"
                             onclick={settingsBtnPressed}
                         >
-                                    <BreezeIcon
+                            <BreezeIcon icon="configure" alt="Configure" />
-                                        icon="configure"
-                                        alt="Configure"
-                                    />
                         </button>
                     </div>
                 </div>
@@ -483,14 +467,7 @@ function App() {
                 >
                     <div class="page-title">Conversion Settings</div>
                 </header>
-                        <div
+                <div class="page-content">
-                            class="col row flex-col"
-                            style={{
-                                padding:
-                                    "var(--k-grid-unit) var(--k-small-spacing)",
-                                flex: "1",
-                            }}
-                        >
                     <div>
                         <form
                             class="k-form"
@@ -535,32 +512,19 @@ function App() {
                                 }
                                 placeholder="Leave blank to guess from codec"
                             />
-                                    <Show
+                            <Show when={selectedCodec()?.encoders.length !== 0}>
-                                        when={
+                                <label for="videoEncoder">Encoder</label>
-                                            selectedCodec()?.encoders.length !==
-                                            0
-                                        }
-                                    >
-                                        <label for="videoEncoder">
-                                            Encoder
-                                        </label>
                                 <select
                                     name="videoEncoder"
                                     id="videoEncoder"
                                     class="k-dropdown"
                                     value={selectedEncoder()}
                                     oninput={(e) =>
-                                                setSelectedEncoder(
+                                        setSelectedEncoder(e.target.value)
-                                                    e.target.value,
-                                                )
                                     }
                                 >
-                                            <For
+                                    <For each={selectedCodec()?.encoders}>
-                                                each={selectedCodec()?.encoders}
+                                        {(item, _) => <option>{item}</option>}
-                                            >
-                                                {(item, _) => (
-                                                    <option>{item}</option>
-                                                )}
                                     </For>
                                 </select>
                             </Show>
@@ -568,10 +532,8 @@ function App() {
                         <Switch fallback={<div></div>}>
                             <Match
                                 when={
-                                            selectedCodec()?.shortName ===
+                                    selectedCodec()?.shortName === "h264" ||
-                                                "h264" ||
+                                    selectedCodec()?.shortName === "hevc"
-                                            selectedCodec()?.shortName ===
-                                                "hevc"
                                 }
                             >
                                 <H264Options
@@ -580,11 +542,7 @@ function App() {
                                     onParamChanged={onParametersChanged}
                                 />
                             </Match>
-                                    <Match
+                            <Match when={selectedCodec()?.shortName === "av1"}>
-                                        when={
-                                            selectedCodec()?.shortName === "av1"
-                                        }
-                                    >
                                 <AV1Options
                                     codec={selectedCodec()}
                                     encoder={selectedEncoder()}
@@ -593,10 +551,7 @@ function App() {
                                 />
                             </Match>
                             <Match
-                                        when={
+                                when={selectedCodec()?.shortName === "dnxhd"}
-                                            selectedCodec()?.shortName ===
-                                            "dnxhd"
-                                        }
                             >
                                 <DNxHDOptions
                                     codec={selectedCodec()}
@@ -605,6 +560,27 @@ function App() {
                                 />
                             </Match>
                         </Switch>
+                        <div class="row flex-col align-items-center">
+                            <h3 class="k-form-section-title">Audio</h3>
+                        </div>
+                        <form class="k-form">
+                            <label for="targetCodec">Codec</label>
+                            <select
+                                class="k-dropdown"
+                                id="targetCodec"
+                                value={audioCodec()}
+                                oninput={(e) => setAudioCodec(e.target.value)}
+                            >
+                                <option value="copy">Copy from source</option>
+                                <For each={audioCodecList()}>
+                                    {(item, _) => (
+                                        <option value={item.shortName}>
+                                            {item.description}
+                                        </option>
+                                    )}
+                                </For>
+                            </select>
+                        </form>
                         <div class="row flex-col align-items-center">
                             <h3 class="k-form-section-title">
                                 Extra Arguments
@@ -614,9 +590,7 @@ function App() {
                             class="k-form"
                             onsubmit={(e) => e.preventDefault()}
                         >
-                                    <label for="globalopts">
+                            <label for="globalopts">Global Options</label>
-                                        Global Options
-                                    </label>
                             <input
                                 type="text"
                                 name="globalopts"
@@ -640,9 +614,7 @@ function App() {
                                     setInputopts(e.target.value);
                                 }}
                             />
-                                    <label for="outputopts">
+                            <label for="outputopts">Output Options</label>
-                                        Output Options
-                                    </label>
                             <input
                                 type="text"
                                 name="outputopts"
@@ -656,21 +628,16 @@ function App() {
                             />
                         </form>
                     </div>
-                            <div class="row flex-col p-medium">
+                </div>
+                <footer class="k-page-footer row flex-col gap2">
+                    <div class="row flex-col">
                         <label for="outputCommand">Command</label>
-                                <pre
+                        <pre id="outputCommand" class="k-text-field col">
-                                    id="outputCommand"
-                                    class="k-text-field w-full col"
-                                >
                             {outputCommand()}
                         </pre>
                     </div>
-                        </div>
+                    <div class="row gap2">
-                        <footer class="k-page-footer row gap2">
+                        <button class="k-button" onclick={convertAllClicked}>
-                            <button
-                                class="k-button"
-                                onclick={convertAllClicked}
-                            >
                             Convert All
                         </button>
                         <button
@@ -680,10 +647,9 @@ function App() {
                         >
                             Convert Selected
                         </button>
+                    </div>
                 </footer>
             </div>
-                </div>
-            </div>
         </main>
     );
 }

solid-src/src/css/index.css

@@ -92,3 +92,13 @@ h2 {
     gap: var(--k-medium-spacing);
     align-items: center;
 }
+
+.page-content {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    padding: var(--k-grid-unit) var(--k-small-spacing);
+    overflow-x: hidden;
+    overflow-y: auto;
+    max-height: 90vh;
+}

solid-src/src/pages/ProgressPage.tsx

@@ -1,3 +1,4 @@
+import { getVencoderFolder } from "@/util/path";
 import { events, os, storage } from "@neutralinojs/lib";
 import { createSignal, onMount, onCleanup, Show, Index } from "solid-js";
 
@@ -131,6 +132,14 @@ function ProgressPage() {
         setFinished(true);
     }
 
+    async function openFolder() {
+        const folder = await getVencoderFolder();
+
+        if (folder) {
+            os.open(folder);
+        }
+    }
+
     return (
         <main class="row flex-col">
             <div class="container row flex-col" style={{ flex: "1" }}>
@@ -182,11 +191,10 @@ function ProgressPage() {
                         )}
                     </Index>
                 </div>
-                <Show when={!finished()}>
+                <footer class="p-medium row" style={{ "align-items": "end" }}>
-                    <footer
+                    <Show
-                        class="p-medium row"
+                        when={finished()}
-                        style={{ "align-items": "end" }}
+                        fallback={
-                    >
                             <button
                                 class="k-button"
                                 disabled={isCancelling()}
@@ -194,8 +202,13 @@ function ProgressPage() {
                             >
                                 Cancel
                             </button>
-                    </footer>
+                        }
+                    >
+                        <button class="k-button" onclick={openFolder}>
+                            Open Folder
+                        </button>
                     </Show>
+                </footer>
             </div>
         </main>
     );

solid-src/src/util/ffmpeg.ts

@@ -7,24 +7,27 @@ export interface CodecInfo {
     encoders: string[];
 }
 
-export async function getAvailableCodecs(): Promise<CodecInfo[]> {
+export type CodecList = {
+    vcodecs: CodecInfo[],
+    acodecs: CodecInfo[]
+}
+
+export async function getAvailableCodecs(): Promise<CodecList> {
     const seperator = "-------";
-    const videoEncodingSupported = /.EV.../;
     const wideFormattingSpaces = / {2,}/;
     const decodeEncodeSpecification = / \(((decoders)|(encoders)):.+\)/g;
     const result = await Neutralino.os.execCommand("ffmpeg -codecs");
     const rawCodecList = result.stdOut
         .substring(result.stdOut.indexOf(seperator) + seperator.length)
         .split("\n");
-    let codecs = [];
+    let vcodecs = [];
+    let acodecs = [];
 
     for (let codec of rawCodecList) {
         codec = codec.trim();
         const flags = codec.substring(0, 6);
 
-        if (!videoEncodingSupported.test(flags)) {
+        if (flags[1] !== "E") continue;
-            continue;
-        }
 
         const nameAndDescription = codec
             .substring(7)
@@ -48,15 +51,27 @@ export async function getAvailableCodecs(): Promise<CodecInfo[]> {
                 .split(" ");
         }
 
-        codecs.push({
+        if (flags[2] === "V") {
+            vcodecs.push({
+                flags,
+                shortName,
+                description,
+                encoders,
+            });
+        } else if (flags[2] === "A") {
+            acodecs.push({
                 flags,
                 shortName,
                 description,
                 encoders,
             });
         }
+    }
 
-    return codecs;
+    return {
+        vcodecs,
+        acodecs
+    };
 }
 
 export function playFile(path: string) {

solid-src/src/util/path.ts

@@ -1,3 +1,5 @@
+import Neutralino from "@neutralinojs/lib";
+
 export function getTemporaryFilePath() {
     switch (window.NL_OS) {
         case "Windows":
@@ -8,3 +10,12 @@ export function getTemporaryFilePath() {
             return ".";
     }
 }
+
+export async function getVencoderFolder() {
+    switch (window.NL_OS) {
+        case "Linux":
+            return `${await Neutralino.os.getEnv("HOME")}/Vencoder/`;
+        case "Windows":
+            return `${await Neutralino.os.getEnv("HOMEPATH")}\\Vencoder\\`;
+    }
+}