enabled custom args

frontend/src/Home.tsx

@@ -47,6 +47,7 @@ export default function Home({ socket }: Props) {
   const [pickedAudioFormat, setPickedAudioFormat] = useState('');
   const [pickedBestFormat, setPickedBestFormat] = useState('');
 
+  const [customArgs, setCustomArgs] = useState('');
   const [downloadPath, setDownloadPath] = useState(0);
   const [availableDownloadPaths, setAvailableDownloadPaths] = useState<string[]>([]);
 
@@ -68,6 +69,7 @@ export default function Home({ socket }: Props) {
   useEffect(() => {
     socket.onopen = () => {
       dispatch(connected())
+      setCustomArgs(localStorage.getItem('last-input-args') ?? '')
     }
   }, [])
 
@@ -84,9 +86,6 @@ export default function Home({ socket }: Props) {
   useEffect(() => {
     socket.onmessage = (event) => {
       const res = client.decode(event.data)
-
-      setShowBackdrop(false)
-
       switch (typeof res.result) {
         case 'object':
           setActiveDownloads(
@@ -101,6 +100,12 @@ export default function Home({ socket }: Props) {
     }
   }, [])
 
+  useEffect(() => {
+    if (activeDownloads.length > 0 && showBackdrop) {
+      setShowBackdrop(false)
+    }
+  }, [activeDownloads, showBackdrop])
+
   useEffect(() => {
     client.directoryTree()
       .then(data => {
@@ -121,7 +126,7 @@ export default function Home({ socket }: Props) {
 
     client.download(
       immediate || url || workingUrl,
-      cliArgs.toString() + toFormatArgs(codes),
+      `${cliArgs.toString()} ${toFormatArgs(codes)} ${customArgs}`,
       availableDownloadPaths[downloadPath] ?? '',
       fileNameOverride
     )
@@ -173,6 +178,15 @@ export default function Home({ socket }: Props) {
     setFilenameOverride(e.target.value)
   }
 
+  /**
+   * Update the custom args state whenever the input value changes
+   * @param e Input change event
+   */
+  const handleCustomArgsChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setCustomArgs(e.target.value)
+    localStorage.setItem("last-input-args", e.target.value)
+  }
+
   /**
    * Abort a specific download if id's provided, other wise abort all running ones.
    * @param id The download id / pid
@@ -257,6 +271,21 @@ export default function Home({ socket }: Props) {
               />
             </Grid>
             <Grid container spacing={1} sx={{ mt: 1 }}>
+              {
+                settings.enableCustomArgs ?
+                  <Grid item xs={12}>
+                    <TextField
+                      id="customArgsInput"
+                      fullWidth
+                      label={i18n.t('customArgsInput')}
+                      variant="outlined"
+                      onChange={handleCustomArgsChange}
+                      value={customArgs}
+                      disabled={!status.connected || (settings.formatSelection && downloadFormats != null)}
+                    />
+                  </Grid> :
+                  null
+              }
               {
                 settings.fileRenaming ?
                   <Grid item xs={8}>

frontend/src/Settings.tsx

@@ -26,6 +26,7 @@ import { RPCClient } from "./features/core/rpcClient";
 import {
   LanguageUnion,
   setCliArgs,
+  setEnableCustomArgs,
   setFileRenaming,
   setFormatSelection,
   setLanguage,
@@ -255,6 +256,17 @@ export default function Settings({ socket }: { socket: WebSocket }) {
                     }
                     label={i18n.t('filenameOverrideOption')}
                   />
+                  <FormControlLabel
+                    control={
+                      <Switch
+                        defaultChecked={settings.enableCustomArgs}
+                        onChange={() => {
+                          dispatch(setEnableCustomArgs(!settings.enableCustomArgs))
+                        }}
+                      />
+                    }
+                    label={i18n.t('customArgs')}
+                  />
                 </Stack>
               </Grid>
               <Grid>

frontend/src/assets/i18n.yaml

@@ -25,6 +25,8 @@ languages:
     filenameOverrideOption: Enable output file name overriding
     customFilename: Custom filemame (leave blank to use default)
     customPath: Custom path
+    customArgs: Enable custom yt-dlp args (great power = great responsabilities)
+    customArgsInput: Custom yt-dlp arguments
   italian:
     urlInput: URL di YouTube o di qualsiasi altro servizio supportato
     statusTitle: Stato
@@ -50,6 +52,8 @@ languages:
     filenameOverrideOption: Abilita sovrascrittura del nome del file di output
     customFilename: Custom filemame (leave blank to use default)
     customPath: Custom path
+    customArgs: Enable custom yt-dlp args (great power = great responsabilities)
+    customArgsInput: Custom yt-dlp arguments
   chinese:
     urlInput: YouTube 或其他受支持服务的视频网址
     statusTitle: 状态
@@ -75,6 +79,8 @@ languages:
     filenameOverrideOption: Enable output file name overriding
     customFilename: Custom filemame (leave blank to use default)
     customPath: Custom path
+    customArgs: Enable custom yt-dlp args (great power = great responsabilities)
+    customArgsInput: Custom yt-dlp arguments
   spanish:
     urlInput: YouTube or other supported service video url
     statusTitle: Status
@@ -100,6 +106,8 @@ languages:
     filenameOverrideOption: Enable output file name overriding
     customFilename: Custom filemame (leave blank to use default)
     customPath: Custom path
+    customArgs: Enable custom yt-dlp args (great power = great responsabilities)
+    customArgsInput: Custom yt-dlp arguments
   russian:
     urlInput: YouTube or other supported service video url
     statusTitle: Status
@@ -125,6 +133,8 @@ languages:
     filenameOverrideOption: Enable output file name overriding
     customFilename: Custom filemame (leave blank to use default)
     customPath: Custom path
+    customArgs: Enable custom yt-dlp args (great power = great responsabilities)
+    customArgsInput: Custom yt-dlp arguments
   korean:
     urlInput: YouTube나 다른 지원되는 사이트의 URL
     statusTitle: 상태
@@ -150,6 +160,8 @@ languages:
     filenameOverrideOption: Enable output file name overriding
     customFilename: Custom filemame (leave blank to use default)
     customPath: Custom path
+    customArgs: Enable custom yt-dlp args (great power = great responsabilities)
+    customArgsInput: Custom yt-dlp arguments
   japanese:
     urlInput: YouTubeまたはサポート済み動画のURL
     statusTitle: 状態
@@ -174,4 +186,6 @@ languages:
     pathOverrideOption: Enable output path overriding
     filenameOverrideOption: Enable output file name overriding
     customFilename: Custom filemame (leave blank to use default)
-    customPath: Custom path
+    customPath: Custom path
+    customArgs: Enable custom yt-dlp args (great power = great responsabilities)
+    customArgsInput: Custom yt-dlp arguments

frontend/src/features/settings/settingsSlice.ts

@@ -4,15 +4,16 @@ export type LanguageUnion = "english" | "chinese" | "russian" | "italian" | "spa
 export type ThemeUnion = "light" | "dark"
 
 export interface SettingsState {
-    serverAddr: string,
+    serverAddr: string
-    serverPort: string,
+    serverPort: string
-    language: LanguageUnion,
+    language: LanguageUnion
-    theme: ThemeUnion,
+    theme: ThemeUnion
-    cliArgs: string,
+    cliArgs: string
-    formatSelection: boolean,
+    formatSelection: boolean
-    ratelimit: string,
+    ratelimit: string
-    fileRenaming: boolean,
+    fileRenaming: boolean
-    pathOverriding: boolean,
+    pathOverriding: boolean
+    enableCustomArgs: boolean
 }
 
 const initialState: SettingsState = {
@@ -25,6 +26,7 @@ const initialState: SettingsState = {
     ratelimit: localStorage.getItem("rate-limit") ?? "",
     fileRenaming: localStorage.getItem("file-renaming") === "true",
     pathOverriding: localStorage.getItem("path-overriding") === "true",
+    enableCustomArgs: localStorage.getItem("enable-custom-args") === "true",
 }
 
 export const settingsSlice = createSlice({
@@ -67,6 +69,10 @@ export const settingsSlice = createSlice({
             state.fileRenaming = action.payload
             localStorage.setItem("file-renaming", action.payload.toString())
         },
+        setEnableCustomArgs: (state, action: PayloadAction<boolean>) => {
+            state.enableCustomArgs = action.payload
+            localStorage.setItem("enable-custom-args", action.payload.toString())
+        },
     }
 })
 
@@ -80,6 +86,7 @@ export const {
     setRateLimit,
     setFileRenaming,
     setPathOverriding,
+    setEnableCustomArgs,
 } = settingsSlice.actions
 
 export default settingsSlice.reducer