enabled custom args

2023-01-12 21:37:51 +01:00
parent 658cb64a02
commit f8091b6d14
4 changed files with 76 additions and 14 deletions
--- a/frontend/src/Home.tsx
+++ b/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}>
--- a/frontend/src/Settings.tsx
+++ b/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>
--- a/frontend/src/assets/i18n.yaml
+++ b/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
--- a/frontend/src/features/settings/settingsSlice.ts
+++ b/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,
-    serverPort: string,
-    language: LanguageUnion,
-    theme: ThemeUnion,
-    cliArgs: string,
-    formatSelection: boolean,
-    ratelimit: string,
-    fileRenaming: boolean,
-    pathOverriding: boolean,
+    serverAddr: string
+    serverPort: string
+    language: LanguageUnion
+    theme: ThemeUnion
+    cliArgs: string
+    formatSelection: boolean
+    ratelimit: string
+    fileRenaming: 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