From 5842449ded54751a630d70db1f1ede1ab99797f1 Mon Sep 17 00:00:00 2001
From: IRHM <37304121+IRHM@users.noreply.github.com>
Date: Wed, 20 Dec 2023 19:30:46 +0000
Subject: [PATCH 1/4] Make resolution setting scale output

added keep aspect ratio setting, need to implement custom res setting
---
 src/app/constants.ts                 |  11 ++-
 src/common/DropDown.tsx              |   7 +-
 src/libs/recorder/argumentBuilder.ts | 125 ++++++++++++++-------------
 src/settings/pages/Recording.tsx     |  36 +++++---
 src/settings/settingsSlice.ts        |  12 ++-
 src/settings/types.ts                |  14 ++-
 6 files changed, 129 insertions(+), 76 deletions(-)

diff --git a/src/app/constants.ts b/src/app/constants.ts
index 7f343b47..9bf58194 100644
--- a/src/app/constants.ts
+++ b/src/app/constants.ts
@@ -9,7 +9,12 @@ import type { Settings } from "@/settings/types";
 
 // App settings, not user editable.
 export const APP_SETTINGS = {
-  supportedRecordingFormats: ["mp4", "mkv"]
+  supportedRecordingFormats: ["mp4", "mkv"],
+  /**
+   * Available resolution options (presets so users don't
+   * have to manually input common resolution width and heights).
+   */
+  prefilledResolutions: ["2160p", "1440p", "1080p", "720p", "480p", "360p"] as const
 };
 
 export const DEFAULT_SETTINGS = {
@@ -30,7 +35,9 @@ export const DEFAULT_SETTINGS = {
       name: "Primary Monitor"
     },
     fps: 60,
-    resolution: "1080p",
+    resolution: "disabled",
+    resolutionCustom: undefined,
+    resolutionKeepAspectRatio: true,
     format: "mp4",
     zeroLatency: true,
     ultraFast: true,
diff --git a/src/common/DropDown.tsx b/src/common/DropDown.tsx
index de7a00c9..1cd2e806 100644
--- a/src/common/DropDown.tsx
+++ b/src/common/DropDown.tsx
@@ -1,7 +1,8 @@
 import { useState } from "react";
 import Icon from "./Icon";
+import type { CommonComponentProps } from "./types";
 
-interface DropDownProps {
+interface DropDownProps extends CommonComponentProps {
   activeItem: DropDownItem | string | number;
   items: DropDownItem[] | string[] | number[];
   onChange: (selected: DropDownItem | string | number) => void;
@@ -20,12 +21,12 @@ export interface DropDownItem {
   name: string;
 }
 
-export default function DropDown({ activeItem, items, onChange }: DropDownProps) {
+export default function DropDown({ activeItem, items, onChange, className }: DropDownProps) {
   const [isOpen, setIsOpen] = useState(false);
   const [selected, setSelected] = useState(activeItem);
 
   return (
-    <div className="flex flex-col bg-secondary-100 rounded">
+    <div className={`flex flex-col bg-secondary-100 rounded ${className ?? ""}`}>
       <label
         className={`${
           isOpen ? "rounded-t" : "rounded"
diff --git a/src/libs/recorder/argumentBuilder.ts b/src/libs/recorder/argumentBuilder.ts
index 0d8bab6b..dea55401 100644
--- a/src/libs/recorder/argumentBuilder.ts
+++ b/src/libs/recorder/argumentBuilder.ts
@@ -23,11 +23,25 @@ export default class ArgumentBuilder {
 
   constructor(private readonly customRegion: CustomRegion) {}
 
+  private bounds: CustomRegion;
+
   /**
    * Create FFmpeg arguments.
    * Automatically builds the correct arguments depending on current OS.
    */
   public async createArgs(): Promise<Arguments> {
+    if (this.customRegion) {
+      this.bounds = this.customRegion;
+    } else {
+      const monitorToRecord = ArgumentBuilder.rs.monitorToRecord.id.toLowerCase();
+      // Get monitor
+      if (monitorToRecord === "primary") {
+        this.bounds = (await DeviceManager.getPrimaryMonitor()).bounds;
+      } else {
+        this.bounds = (await DeviceManager.findMonitor(monitorToRecord)).bounds;
+      }
+    }
+
     // Build and return args differently depending on OS
     if (process.platform === "win32") {
       return await this.buildWindowsArgs();
@@ -61,6 +75,10 @@ export default class ArgumentBuilder {
     // Recording region
     args.push(`-i ${await this.recordingRegion()}`);
 
+    if (ArgumentBuilder.rs.resolution !== "disabled") {
+      args.push(this.recordingScale());
+    }
+
     // Audio maps
     args.push(`${ArgumentBuilder.audioMaps}`);
 
@@ -148,19 +166,56 @@ export default class ArgumentBuilder {
   }
 
   private async resolution(): Promise<string> {
-    // Initialise res and set 1920x1080 as default
-    const res = {
-      width: 1920,
-      height: 1080
-    };
+    if (!this.bounds) {
+      throw new Error("Failed to get recording WxH bounds");
+    }
 
-    if (this.customRegion) {
-      res.width = this.customRegion.width;
-      res.height = this.customRegion.height;
+    if (process.platform === "win32") {
+      await ArgumentBuilder.scrRegistry.add("capture_width", this.bounds.width, "REG_DWORD");
+      await ArgumentBuilder.scrRegistry.add("capture_height", this.bounds.height, "REG_DWORD");
+    }
+
+    return `${this.bounds.width}x${this.bounds.height}`;
+  }
+
+  private static get ffmpegDevice(): string {
+    if (process.platform === "win32") return "dshow";
+    else if (process.platform === "linux") return "x11grab";
+    else throw new Error("No video device to fetch for unsupported platform.");
+  }
+
+  private async recordingRegion(): Promise<string> {
+    if (!this.bounds) {
+      throw new Error("Failed to get recording region bounds");
+    }
+
+    // Return different format depending on OS
+    if (process.platform === "win32") {
+      await ArgumentBuilder.scrRegistry.add("start_x", `0x${toHexTwosComplement(this.bounds.x)}`, "REG_DWORD");
+      await ArgumentBuilder.scrRegistry.add("start_y", `0x${toHexTwosComplement(this.bounds.y)}`, "REG_DWORD");
+
+      // Return offsets as string anyway
+      return `-offset_x ${this.bounds.x} -offset_y ${this.bounds.y}`;
+    } else if (process.platform === "linux") {
+      return `:0.0+${this.bounds.x},${this.bounds.y}`;
+    } else {
+      throw new Error("Can't get recording region for unsupported platform.");
+    }
+  }
+
+  private recordingScale(): string {
+    const rscale = ArgumentBuilder.rs.resolution;
+    if (rscale === "disabled") return "";
+    const res = { width: 0, height: 0 };
+    if (rscale === "custom") {
+      const customScale = ArgumentBuilder.rs.resolutionCustom;
+      if (!customScale?.width || !customScale?.height) {
+        throw new Error("Resolution is set to 'custom', but custom resolution setting if not defined!");
+      }
+      res.width = customScale.width;
+      res.height = customScale.height;
     } else {
-      switch (ArgumentBuilder.rs.resolution) {
-        case "In-Game":
-          throw new Error("In-Game directive not currently supported.");
+      switch (rscale) {
         case "2160p":
           res.width = 3840;
           res.height = 2160;
@@ -187,53 +242,7 @@ export default class ArgumentBuilder {
           break;
       }
     }
-
-    if (process.platform === "win32") {
-      await ArgumentBuilder.scrRegistry.add("capture_width", res.width, "REG_DWORD");
-      await ArgumentBuilder.scrRegistry.add("capture_height", res.height, "REG_DWORD");
-    }
-
-    return `${res.width}x${res.height}`;
-  }
-
-  private static get ffmpegDevice(): string {
-    if (process.platform === "win32") return "dshow";
-    else if (process.platform === "linux") return "x11grab";
-    else throw new Error("No video device to fetch for unsupported platform.");
-  }
-
-  private async recordingRegion(): Promise<string> {
-    let bounds;
-
-    if (this.customRegion) {
-      bounds = this.customRegion;
-    } else {
-      const monitorToRecord = ArgumentBuilder.rs.monitorToRecord.id.toLowerCase();
-
-      // Get monitor
-      if (monitorToRecord === "primary") {
-        bounds = (await DeviceManager.getPrimaryMonitor()).bounds;
-      } else {
-        bounds = (await DeviceManager.findMonitor(monitorToRecord)).bounds;
-      }
-    }
-
-    if (!bounds) {
-      throw new Error("Failed to get recording region bounds");
-    }
-
-    // Return different format depending on OS
-    if (process.platform === "win32") {
-      await ArgumentBuilder.scrRegistry.add("start_x", `0x${toHexTwosComplement(bounds.x)}`, "REG_DWORD");
-      await ArgumentBuilder.scrRegistry.add("start_y", `0x${toHexTwosComplement(bounds.y)}`, "REG_DWORD");
-
-      // Return offsets as string anyway
-      return `-offset_x ${bounds.x} -offset_y ${bounds.y}`;
-    } else if (process.platform === "linux") {
-      return `:0.0+${bounds.x},${bounds.y}`;
-    } else {
-      throw new Error("Can't get recording region for unsupported platform.");
-    }
+    return `-vf scale=${res.width}:${ArgumentBuilder.rs.resolutionKeepAspectRatio ? "-1" : res.height}`;
   }
 
   private static get audioMaps(): string {
diff --git a/src/settings/pages/Recording.tsx b/src/settings/pages/Recording.tsx
index 2e46a3aa..0ed09e53 100644
--- a/src/settings/pages/Recording.tsx
+++ b/src/settings/pages/Recording.tsx
@@ -15,6 +15,7 @@ import {
   setHardwareEncoding,
   setMonitorToRecord,
   setResolution,
+  setResolutionKeepAspectRatio,
   setSeperateAudioTracks,
   setThumbSaveFolder,
   setVideoDevice,
@@ -22,6 +23,7 @@ import {
   setVideoSaveName,
   toggleAudioDeviceToRecord
 } from "../settingsSlice";
+import type { ResolutionScale } from "../types";
 
 export default function Recording() {
   const state = useSelector((store: RootState) => store.settings.recording);
@@ -31,7 +33,7 @@ export default function Recording() {
 
   const videoDevices = ["Default"];
   const monitors = new Array<DropDownItem>({ id: "primary", name: "Primary Monitor" });
-  const resolutions = ["In-Game", "2160p", "1440p", "1080p", "720p", "480p", "360p"];
+  const resolutions: ResolutionScale[] = ["disabled", "2160p", "1440p", "1080p", "720p", "480p", "360p", "custom"];
 
   useEffect(() => {
     DeviceManager.getDevices()
@@ -66,6 +68,14 @@ export default function Recording() {
         />
       </NamedContainer>
 
+      <NamedContainer title="Format">
+        <DropDown
+          activeItem={state.format}
+          items={APP_SETTINGS.supportedRecordingFormats}
+          onChange={(s) => dispatch(setFormat(s as string))}
+        />
+      </NamedContainer>
+
       <NamedContainer title="FPS">
         <TextBox
           type="number"
@@ -77,21 +87,27 @@ export default function Recording() {
         />
       </NamedContainer>
 
-      <NamedContainer title="Resolution">
+      <NamedContainer title="Resolution Scale">
         <DropDown
           activeItem={state.resolution}
           items={resolutions}
-          onChange={(s) => dispatch(setResolution(s as string))}
+          onChange={(s) => dispatch(setResolution(s as ResolutionScale))}
+          className="capitalize"
         />
       </NamedContainer>
 
-      <NamedContainer title="Format">
-        <DropDown
-          activeItem={state.format}
-          items={APP_SETTINGS.supportedRecordingFormats}
-          onChange={(s) => dispatch(setFormat(s as string))}
-        />
-      </NamedContainer>
+      {state.resolution !== "disabled" && (
+        <NamedContainer
+          title="Keep Aspect Ratio"
+          desc="When using the resolution scaling option, you can decide if you want to keep the original aspect ratio or not."
+          row
+        >
+          <TickBox
+            ticked={state.resolutionKeepAspectRatio}
+            onChange={(t) => dispatch(setResolutionKeepAspectRatio(t))}
+          />
+        </NamedContainer>
+      )}
 
       {process.platform === "linux" && (
         <NamedContainer
diff --git a/src/settings/settingsSlice.ts b/src/settings/settingsSlice.ts
index 130c634a..63a69046 100644
--- a/src/settings/settingsSlice.ts
+++ b/src/settings/settingsSlice.ts
@@ -1,6 +1,6 @@
 import { DEFAULT_SETTINGS } from "@/app/constants";
 import { createSlice, type PayloadAction } from "@reduxjs/toolkit";
-import { type MonitorToRecord } from "./types";
+import type { ResolutionScale, MonitorToRecord } from "./types";
 
 const settingsSlice = createSlice({
   name: "settings",
@@ -46,9 +46,15 @@ const settingsSlice = createSlice({
     setFps(state, action: PayloadAction<number>) {
       state.recording.fps = action.payload;
     },
-    setResolution(state, action: PayloadAction<string>) {
+    setResolution(state, action: PayloadAction<ResolutionScale>) {
       state.recording.resolution = action.payload;
     },
+    setResolutionCustom(state, action: PayloadAction<{ width: number; height: number }>) {
+      state.recording.resolutionCustom = action.payload;
+    },
+    setResolutionKeepAspectRatio(state, action: PayloadAction<boolean>) {
+      state.recording.resolutionKeepAspectRatio = action.payload;
+    },
     setFormat(state, action: PayloadAction<string>) {
       state.recording.format = action.payload;
     },
@@ -103,6 +109,8 @@ export const {
   setMonitorToRecord,
   setFps,
   setResolution,
+  setResolutionCustom,
+  setResolutionKeepAspectRatio,
   setFormat,
   setZeroLatency,
   setUltraFast,
diff --git a/src/settings/types.ts b/src/settings/types.ts
index 1703cdfa..b3e604f6 100644
--- a/src/settings/types.ts
+++ b/src/settings/types.ts
@@ -1,3 +1,7 @@
+import type { APP_SETTINGS } from "@/app/constants";
+
+export type ResolutionScale = typeof APP_SETTINGS.prefilledResolutions[number] | "disabled" | "custom";
+
 export interface Settings {
   general: GeneralSettings;
   recording: RecordingSettings;
@@ -41,7 +45,15 @@ export interface RecordingSettings {
   videoDevice: string;
   monitorToRecord: MonitorToRecord;
   fps: number;
-  resolution: string;
+  /**
+   * When set, video output will be scaled to this resolution.
+   */
+  resolution: ResolutionScale;
+  resolutionCustom?: { width: number; height: number };
+  /**
+   * If a resolution is set to scale to, should we keep the aspect ratio of original video?
+   */
+  resolutionKeepAspectRatio: boolean;
   format: string;
   zeroLatency: boolean;
   ultraFast: boolean;

From 8cf0e1debf7c986da490cbeff4e1a3c5f460032a Mon Sep 17 00:00:00 2001
From: IRHM <37304121+IRHM@users.noreply.github.com>
Date: Wed, 20 Dec 2023 19:46:38 +0000
Subject: [PATCH 2/4] implement custom resolution setting

---
 src/app/constants.ts             |  2 +-
 src/settings/pages/Recording.tsx | 26 ++++++++++++++++++++++++++
 src/settings/settingsSlice.ts    |  5 +++--
 src/settings/types.ts            |  2 +-
 4 files changed, 31 insertions(+), 4 deletions(-)

diff --git a/src/app/constants.ts b/src/app/constants.ts
index 9bf58194..24145609 100644
--- a/src/app/constants.ts
+++ b/src/app/constants.ts
@@ -36,7 +36,7 @@ export const DEFAULT_SETTINGS = {
     },
     fps: 60,
     resolution: "disabled",
-    resolutionCustom: undefined,
+    resolutionCustom: { width: 1920, height: 1080 },
     resolutionKeepAspectRatio: true,
     format: "mp4",
     zeroLatency: true,
diff --git a/src/settings/pages/Recording.tsx b/src/settings/pages/Recording.tsx
index 0ed09e53..fee5874e 100644
--- a/src/settings/pages/Recording.tsx
+++ b/src/settings/pages/Recording.tsx
@@ -15,6 +15,7 @@ import {
   setHardwareEncoding,
   setMonitorToRecord,
   setResolution,
+  setResolutionCustom,
   setResolutionKeepAspectRatio,
   setSeperateAudioTracks,
   setThumbSaveFolder,
@@ -96,6 +97,31 @@ export default function Recording() {
         />
       </NamedContainer>
 
+      {state.resolution === "custom" && (
+        <NamedContainer title="Custom Resolution">
+          <div className="flex row gap-3 items-center">
+            <b>W</b>
+            <TextBox
+              type="number"
+              value={state.resolutionCustom?.width ?? ""}
+              placeholder={1920}
+              onChange={(s) => {
+                dispatch(setResolutionCustom({ width: s }));
+              }}
+            />
+            <b>H</b>
+            <TextBox
+              type="number"
+              value={state.resolutionCustom?.height ?? ""}
+              placeholder={1080}
+              onChange={(s) => {
+                dispatch(setResolutionCustom({ height: s }));
+              }}
+            />
+          </div>
+        </NamedContainer>
+      )}
+
       {state.resolution !== "disabled" && (
         <NamedContainer
           title="Keep Aspect Ratio"
diff --git a/src/settings/settingsSlice.ts b/src/settings/settingsSlice.ts
index 63a69046..76bd22de 100644
--- a/src/settings/settingsSlice.ts
+++ b/src/settings/settingsSlice.ts
@@ -49,8 +49,9 @@ const settingsSlice = createSlice({
     setResolution(state, action: PayloadAction<ResolutionScale>) {
       state.recording.resolution = action.payload;
     },
-    setResolutionCustom(state, action: PayloadAction<{ width: number; height: number }>) {
-      state.recording.resolutionCustom = action.payload;
+    setResolutionCustom(state, action: PayloadAction<{ width?: number; height?: number }>) {
+      if (action.payload.width) state.recording.resolutionCustom.width = action.payload.width;
+      if (action.payload.height) state.recording.resolutionCustom.height = action.payload.height;
     },
     setResolutionKeepAspectRatio(state, action: PayloadAction<boolean>) {
       state.recording.resolutionKeepAspectRatio = action.payload;
diff --git a/src/settings/types.ts b/src/settings/types.ts
index b3e604f6..ec664d41 100644
--- a/src/settings/types.ts
+++ b/src/settings/types.ts
@@ -49,7 +49,7 @@ export interface RecordingSettings {
    * When set, video output will be scaled to this resolution.
    */
   resolution: ResolutionScale;
-  resolutionCustom?: { width: number; height: number };
+  resolutionCustom: { width: number; height: number };
   /**
    * If a resolution is set to scale to, should we keep the aspect ratio of original video?
    */

From 6ffbda80c42e852b4f343e9145ef5f4d50634e09 Mon Sep 17 00:00:00 2001
From: IRHM <37304121+IRHM@users.noreply.github.com>
Date: Wed, 20 Dec 2023 19:51:11 +0000
Subject: [PATCH 3/4] rename resolution setting to resolutionScale

so old default settings wont carry over, since this setting behaves differently, we wouldn't want unintended behaviour from carried over settings
---
 src/app/constants.ts                 | 2 +-
 src/libs/recorder/argumentBuilder.ts | 8 ++++++--
 src/settings/pages/Recording.tsx     | 6 +++---
 src/settings/settingsSlice.ts        | 2 +-
 src/settings/types.ts                | 2 +-
 5 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/src/app/constants.ts b/src/app/constants.ts
index 24145609..69ee5315 100644
--- a/src/app/constants.ts
+++ b/src/app/constants.ts
@@ -35,7 +35,7 @@ export const DEFAULT_SETTINGS = {
       name: "Primary Monitor"
     },
     fps: 60,
-    resolution: "disabled",
+    resolutionScale: "disabled",
     resolutionCustom: { width: 1920, height: 1080 },
     resolutionKeepAspectRatio: true,
     format: "mp4",
diff --git a/src/libs/recorder/argumentBuilder.ts b/src/libs/recorder/argumentBuilder.ts
index dea55401..35396be4 100644
--- a/src/libs/recorder/argumentBuilder.ts
+++ b/src/libs/recorder/argumentBuilder.ts
@@ -75,7 +75,7 @@ export default class ArgumentBuilder {
     // Recording region
     args.push(`-i ${await this.recordingRegion()}`);
 
-    if (ArgumentBuilder.rs.resolution !== "disabled") {
+    if (ArgumentBuilder.rs.resolutionScale !== "disabled") {
       args.push(this.recordingScale());
     }
 
@@ -135,6 +135,10 @@ export default class ArgumentBuilder {
     // Recording region
     await this.recordingRegion();
 
+    if (ArgumentBuilder.rs.resolutionScale !== "disabled") {
+      args.push(this.recordingScale());
+    }
+
     // Zero Latency
     if (ArgumentBuilder.rs.zeroLatency) {
       args.push("-tune zerolatency");
@@ -204,7 +208,7 @@ export default class ArgumentBuilder {
   }
 
   private recordingScale(): string {
-    const rscale = ArgumentBuilder.rs.resolution;
+    const rscale = ArgumentBuilder.rs.resolutionScale;
     if (rscale === "disabled") return "";
     const res = { width: 0, height: 0 };
     if (rscale === "custom") {
diff --git a/src/settings/pages/Recording.tsx b/src/settings/pages/Recording.tsx
index fee5874e..f61078b4 100644
--- a/src/settings/pages/Recording.tsx
+++ b/src/settings/pages/Recording.tsx
@@ -90,14 +90,14 @@ export default function Recording() {
 
       <NamedContainer title="Resolution Scale">
         <DropDown
-          activeItem={state.resolution}
+          activeItem={state.resolutionScale}
           items={resolutions}
           onChange={(s) => dispatch(setResolution(s as ResolutionScale))}
           className="capitalize"
         />
       </NamedContainer>
 
-      {state.resolution === "custom" && (
+      {state.resolutionScale === "custom" && (
         <NamedContainer title="Custom Resolution">
           <div className="flex row gap-3 items-center">
             <b>W</b>
@@ -122,7 +122,7 @@ export default function Recording() {
         </NamedContainer>
       )}
 
-      {state.resolution !== "disabled" && (
+      {state.resolutionScale !== "disabled" && (
         <NamedContainer
           title="Keep Aspect Ratio"
           desc="When using the resolution scaling option, you can decide if you want to keep the original aspect ratio or not."
diff --git a/src/settings/settingsSlice.ts b/src/settings/settingsSlice.ts
index 76bd22de..78801fcc 100644
--- a/src/settings/settingsSlice.ts
+++ b/src/settings/settingsSlice.ts
@@ -47,7 +47,7 @@ const settingsSlice = createSlice({
       state.recording.fps = action.payload;
     },
     setResolution(state, action: PayloadAction<ResolutionScale>) {
-      state.recording.resolution = action.payload;
+      state.recording.resolutionScale = action.payload;
     },
     setResolutionCustom(state, action: PayloadAction<{ width?: number; height?: number }>) {
       if (action.payload.width) state.recording.resolutionCustom.width = action.payload.width;
diff --git a/src/settings/types.ts b/src/settings/types.ts
index ec664d41..ef783218 100644
--- a/src/settings/types.ts
+++ b/src/settings/types.ts
@@ -48,7 +48,7 @@ export interface RecordingSettings {
   /**
    * When set, video output will be scaled to this resolution.
    */
-  resolution: ResolutionScale;
+  resolutionScale: ResolutionScale;
   resolutionCustom: { width: number; height: number };
   /**
    * If a resolution is set to scale to, should we keep the aspect ratio of original video?

From c72c170a7e7e4e48460d3334977d13d2b1829cc6 Mon Sep 17 00:00:00 2001
From: IRHM <37304121+IRHM@users.noreply.github.com>
Date: Wed, 20 Dec 2023 20:02:34 +0000
Subject: [PATCH 4/4] recordingScale add debug log

---
 src/libs/recorder/argumentBuilder.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/libs/recorder/argumentBuilder.ts b/src/libs/recorder/argumentBuilder.ts
index 35396be4..91e44456 100644
--- a/src/libs/recorder/argumentBuilder.ts
+++ b/src/libs/recorder/argumentBuilder.ts
@@ -209,6 +209,7 @@ export default class ArgumentBuilder {
 
   private recordingScale(): string {
     const rscale = ArgumentBuilder.rs.resolutionScale;
+    console.debug("recordingScale running", rscale);
     if (rscale === "disabled") return "";
     const res = { width: 0, height: 0 };
     if (rscale === "custom") {