yt-grabber 1.7.0 → 1.8.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "yt-grabber",
-  "version": "1.7.0",
+  "version": "1.8.1",
   "description": "Youtube Grabber",
   "main": "./dist/index.js",
   "repository": {
@@ -96,6 +96,7 @@
     "react-number-format": "^5.4.3",
     "react-router-dom": "^7.4.0",
     "usehooks-ts": "^3.1.1",
+    "win-version-info": "^6.0.1",
     "yt-dlp-wrap": "^2.3.12"
   },
   "devDependencies": {
@@ -115,6 +116,7 @@
     "@types/react-dom": "^19.0.4",
     "@types/webpack-dev-server": "^4.7.2",
     "@types/webpack-env": "^1.18.8",
+    "@types/win-version-info": "^3.1.3",
     "@typescript-eslint/eslint-plugin": "^8.28.0",
     "@typescript-eslint/parser": "^8.28.0",
     "concurrently": "^9.1.2",

package/src/automations/YoutubeAlbums.ts

@@ -71,8 +71,15 @@ const run = async (params: GetYoutubeParams, options: LaunchOptions, i18n: i18ne
 
     const process = async (album: string) => {
         const results: string[] = [];
+        const albumUrlRegex = /^https?:\/\/.*playlist/i;
 
         try {
+            if (albumUrlRegex.test(album)) {
+                results.push(album);
+
+                return results;
+            }
+
             const searchInput = await page.waitForSelector(`::-p-xpath(${YtMusicSearchInputSelector})`, {timeout: 1000});
             await clearInput(searchInput, page);
             await searchInput.type(album);

package/src/automations/YoutubeArtists.ts

@@ -85,13 +85,6 @@ const run = async (
     
     const process = async (artist: string) => {
         const results: string[] = [];
-        const searchInput = await page.waitForSelector(`::-p-xpath(${YtMusicSearchInputSelector})`, {timeout: 1000});
-        
-        await clearInput(searchInput, page);
-        await searchInput.type(artist);
-        page.keyboard.press("Enter");
-        await page.waitForNetworkIdle();
-        
         const artistChannelUrl = await getArtistUrl(params, artist, onPause);
 
         await navigateToPage(artistChannelUrl, page);
@@ -120,6 +113,17 @@ const run = async (
 
 const getArtistUrl = async (params: GetYoutubeParams, artist: string, onPause?: (data: YoutubeArtist[]) => Promise<YoutubeArtist>): Promise<string> => {
     try {
+        const searchInput = await page.waitForSelector(`::-p-xpath(${YtMusicSearchInputSelector})`, {timeout: 1000});
+        const channelUrlRegex = /^https?:\/\/.*channel/i;
+        
+        if (channelUrlRegex.test(artist)) {
+            return artist;
+        } else {
+            await clearInput(searchInput, page);
+            await searchInput.type(artist);
+            page.keyboard.press("Enter");
+            await page.waitForNetworkIdle();
+        }
         const artistsChip = await page.waitForSelector(`::-p-xpath(${YtMusicArtistsChipSelector})`, {visible: true, timeout: 1000});
 
         artistsChip.click();

package/src/automations/YoutubeTracks.ts

@@ -72,8 +72,15 @@ const run = async (params: GetYoutubeParams, options: LaunchOptions, i18n: i18ne
 
     const process = async (song: string) => {
         const results: string[] = [];
+        const trackUrlRegex = /^https?:\/\/.*watch/i;
 
         try {
+            if (trackUrlRegex.test(song)) {
+                results.push(song);
+
+                return results;
+            }
+            
             const searchInput = await page.waitForSelector(`::-p-xpath(${YtMusicSearchInputSelector})`, {timeout: 1000});
             await clearInput(searchInput, page);
             await searchInput.type(song);

package/src/common/Helpers.ts

@@ -43,20 +43,30 @@ export const resolveMockData = (delay = 1000) => {
 
 export const waitFor = (miliseconds: number) => new Promise((resolve) => setTimeout(resolve, miliseconds));
 
-export const getUrlType = (url: string) => {
-    const artistRegex = /^(?:https?:\/\/)?(?:www\.)?(?:m\.)?(?:music\.)?(?:youtube\.com\/|youtu\.be\/)?(channel)/;
+export const isPlaylist = (url: string) => {
     const playlistRegex = /^(?:https?:\/\/)?(?:www\.)?(?:music\.)?youtube\.com\/(?:playlist\?list=|watch\?.*?\blist=)([a-zA-Z0-9_-]+)/;
+
+    return playlistRegex.test(url);
+};
+
+export const isArtist = (url: string) => {
+    const artistRegex = /^(?:https?:\/\/)?(?:www\.)?(?:m\.)?(?:music\.)?(?:youtube\.com\/|youtu\.be\/)?(channel)/;
+
+    return artistRegex.test(url);
+};
+
+export const isTrack = (url: string) => {
     const trackRegex = /^(?:https?:\/\/)?(?:www\.)?(?:music\.)?youtube\.com\/watch\?.*?\bv=([a-zA-Z0-9_-]+)/;
 
-    const isArtist = artistRegex.test(url);
-    const isPlaylist = playlistRegex.test(url);
-    const isTrack = trackRegex.test(url);
-    
-    if (isArtist) {
+    return trackRegex.test(url);
+};
+
+export const getUrlType = (url: string) => {    
+    if (isArtist(url)) {
         return UrlType.Artist;
-    } else if (isPlaylist) {
+    } else if (isPlaylist(url)) {
         return UrlType.Playlist;
-    } else if (isTrack) {
+    } else if (isTrack(url)) {
         return UrlType.Track;
     }
 

package/src/common/Store.ts

@@ -8,6 +8,7 @@ export type ApplicationOptions = {
     outputDirectory?: string;
     ytdlpExecutablePath?: string;
     ffmpegExecutablePath?: string;
+    chromeExecutablePath?: string;
     albumOutputTemplate?: string;
     playlistOutputTemplate?: string;
     videoOutputTemplate?: string;
@@ -72,6 +73,10 @@ export const StoreSchema: Schema<IStore> = {
                 type: "string",
                 default: ""
             },
+            chromeExecutablePath: {
+                type: "string",
+                default: ""
+            },
             albumOutputTemplate: {
                 type: "string",
                 default: "{{artist}}/[{{releaseYear}}] {{albumTitle}}/{{trackNo}} - {{trackTitle}}",

package/src/components/progress/Progress.styl

@@ -12,4 +12,15 @@
         align-items: center;
         justify-content: center;
     }
+
+    &.absolute {
+        position: absolute;
+        display: flex;
+        justify-self: anchor-center;
+        align-self: anchor-center;
+    }
+
+    &.inline {
+        position: relative;
+    }
 }

package/src/components/progress/Progress.tsx

@@ -9,13 +9,14 @@ export type ProgressProps = CircularProgressProps & {
     labelScale?: number;
     label?: boolean;
     renderLabel?: (value: number) => React.ReactNode;
+    position?: "absolute" | "inline";
 };
 
 export const Progress: React.FC<ProgressProps> = (props) => {
-    const {size, labelScale = 1, label = true, renderLabel, className, ...rest} = props;
+    const {size, labelScale = 1, label = true, renderLabel, position = "inline", className, ...rest} = props;
 
     return (
-        <Box className={classnames(Styles.progress, className)}>
+        <Box className={classnames(Styles.progress, className, Styles[position])}>
             <CircularProgress variant="determinate" size={size} {...rest} />
             {label && <Box className={Styles.labelWrapper}>
                 <Typography variant="caption" sx={{scale: labelScale}}>{renderLabel ? renderLabel(props.value) : `${Math.round(props.value)}%`}</Typography>

package/src/components/youtube/playlistTabs/PlaylistTabs.tsx

@@ -15,6 +15,7 @@ import _size from "lodash/size";
 import _some from "lodash/some";
 import path from "path";
 import React, {MouseEvent, useCallback, useEffect} from "react";
+import {useTranslation} from "react-i18next";
 
 import CloseIcon from "@mui/icons-material/Close";
 import TabContext from "@mui/lab/TabContext";
@@ -47,6 +48,7 @@ export const PlaylistTabs: React.FC<PlaylistTabsProps> = (props: PlaylistTabsPro
     const {queue, onDownloadTrack, onDownloadPlaylist, onCancelPlaylist, onCancelTrack} = props;
     const {trackStatus, playlists, activeTab, setActiveTab, setTrackStatus, setPlaylists, setTracks} = useDataState();
     const {state} = useAppContext();
+    const {t} = useTranslation();
     const tabWidth = window.innerWidth / (playlists.length + playlists.length) - 30; 
 
     useEffect(() => {
@@ -256,6 +258,7 @@ export const PlaylistTabs: React.FC<PlaylistTabsProps> = (props: PlaylistTabsPro
                             <Skeleton variant="rounded" width="100%" height={50} />
                             <Skeleton variant="rounded" width="100%" height={50} />
                         </Stack>
+                        <Progress size={100} thickness={4} variant="indeterminate" label={false} position="absolute"/>
                     </TabPanel>
                 )}
             </TabContext>

package/src/resources/locales/de-DE/help.json

@@ -159,5 +159,9 @@
     "ytdlpExecutablePathHeader": "Pfad zur ausführbaren Datei yt-dpl",
     "ytdlpExecutablePathContent": "Geben Sie einen benutzerdefinierten Pfad zur ausführbaren Datei der yt-dlp Bibliothek an, um diesen anstelle eines von der Anwendung bereitgestellten Pfads zu verwenden.",
     "ffmpegExecutablePathHeader": "Pfad zur ausführbaren Datei ffmpeg",
-    "ffmpegExecutablePathContent": "Geben Sie einen benutzerdefinierten Pfad zur ausführbaren Datei der ffmpeg Bibliothek an, um diesen anstelle eines von der Anwendung bereitgestellten Pfads zu verwenden."
+    "ffmpegExecutablePathContent": "Geben Sie einen benutzerdefinierten Pfad zur ausführbaren Datei der ffmpeg Bibliothek an, um diesen anstelle eines von der Anwendung bereitgestellten Pfads zu verwenden.",
+    "ytdlpVersionHeader": "Informationen zur Version der yt-dlp",
+    "ytdlpVersionContent": "Zeigt die Version der yt-dlp an und ermöglicht deren Aktualisierung.",
+    "chromeExecutablePathHeader": "Pfad zur ausführbaren Datei chrome",
+    "chromeExecutablePathContent": "Pfad zur ausführbaren Chrome-Datei (leer lassen, um gebündeltes Chromium zu verwenden)."
 }

package/src/resources/locales/de-DE/translation.json

@@ -92,9 +92,11 @@
     "totalTracksCount": "Alle Spuren: {{num}}",
     "trackOutputTemplate": "Ausgabevorlage (Audiospuren)",
     "tracks": "Spuren",
+    "update": "Aktualisierung",
     "videoOutputTemplate": "Ausgabevorlage (videos)",
     "warnings": "Warnungen",
     "year": "Jahr",
     "youtubeUrl": "YouTube-URL",
-    "ytdlpExecutablePath": "Pfad zur ausführbaren Datei yt-dpl"
+    "ytdlpExecutablePath": "Pfad zur ausführbaren Datei yt-dpl",
+    "ytdlpVersion": "YT-DLP-Version"
 }

package/src/resources/locales/en-GB/help.json

@@ -159,5 +159,9 @@
     "ytdlpExecutablePathHeader": "Path to yt-dlp executable",
     "ytdlpExecutablePathContent": "Specify custom path to yt-dlp library executable to use it instead of one provided by the application.",
     "ffmpegExecutablePathHeader": "Path to ffmpeg executable",
-    "ffmpegExecutablePathContent": "Specify custom path to ffmpeg library executable to use it instead of one provided by the application."
+    "ffmpegExecutablePathContent": "Specify custom path to ffmpeg library executable to use it instead of one provided by the application.",
+    "ytdlpVersionHeader": "Info about yt-dlp library version",
+    "ytdlpVersionContent": "Displays version of yt-dlp library and allows to update it.",
+    "chromeExecutablePathHeader": "Path to chrome executable",
+    "chromeExecutablePathContent": "Path to chrome executable (leave empty to used bundled chromium)."
 }

package/src/resources/locales/en-GB/translation.json

@@ -92,9 +92,11 @@
     "totalTracksCount": "Total tracks: {{num}}",
     "trackOutputTemplate": "Output template (audio tracks)",
     "tracks": "Tracks",
+    "update": "Update",
     "videoOutputTemplate": "Output template (videos)",
     "warnings": "Warnings",
     "year": "Year",
     "youtubeUrl": "YouTube URL",
-    "ytdlpExecutablePath": "Path to yt-dpl executable"
+    "ytdlpExecutablePath": "Path to yt-dpl executable",
+    "ytdlpVersion": "YT-DLP version"
 }

package/src/resources/locales/pl-PL/help.json

@@ -159,5 +159,9 @@
     "ytdlpExecutablePathHeader": "Ścieżka do pliku wykonywalnego yt-dlp",
     "ytdlpExecutablePathContent": "Podaj ścieżkę do pliku wykonywalnego biblioteki yt-dlp aby użyć go zamiast dostarczonego wraz z aplikacją.",
     "ffmpegExecutablePathHeader": "Ścieżka do pliku wykonywalnego ffmpeg",
-    "ffmpegExecutablePathContent": "Podaj ścieżkę do pliku wykonywalnego biblioteki ffmpeg aby użyć go zamiast dostarczonego wraz z aplikacją."
+    "ffmpegExecutablePathContent": "Podaj ścieżkę do pliku wykonywalnego biblioteki ffmpeg aby użyć go zamiast dostarczonego wraz z aplikacją.",
+    "ytdlpVersionHeader": "Informacje o bibliotece yt-dlp",
+    "ytdlpVersionContent": "Wyświetla wersję biblioteki yt-dlp i umożliwia jej aktualizację.",
+    "chromeExecutablePathHeader": "Ścieżka do pliku wykonywalnego chrome",
+    "chromeExecutablePathContent": "Ścieżka do pliku wykonywalnego chrome (pozostaw puste aby użyć chromium dostarczonego razem z aplikacją)."
 }

package/src/resources/locales/pl-PL/translation.json

@@ -92,9 +92,11 @@
     "totalTracksCount": "Dostepne utwory: {{num}}",
     "trackOutputTemplate": "Szablon wyjściowy (pliki audio)",
     "tracks": "Ścieżki",
+    "update": "Aktualizuj",
     "videoOutputTemplate": "Szablon wyjściowy (pliki wideo)",
     "warnings": "Ostrzeżenia",
     "year": "Rok",
     "youtubeUrl": "YouTube URL",
-    "ytdlpExecutablePath": "Ścieżka do pliku wykonywalnego biblioteki yt-dlp"
+    "ytdlpExecutablePath": "Ścieżka do pliku wykonywalnego biblioteki yt-dlp",
+    "ytdlpVersion": "Wersja YT-DLP"
 }

package/src/views/development/DevelopmentView.tsx

@@ -3,9 +3,7 @@ import React, {useEffect, useState} from "react";
 import {useTranslation} from "react-i18next";
 import {useDebounceValue} from "usehooks-ts";
 
-import {
-    Box, Button, Divider, FormControlLabel, Grid, Stack, Switch, TextField
-} from "@mui/material";
+import {Box, Button, Divider, FormControlLabel, Grid, Stack, Switch} from "@mui/material";
 
 import {ApplicationOptions} from "../../common/Store";
 import NumberField from "../../components/numberField/NumberField";
@@ -28,10 +26,6 @@ export const DevelopmentView: React.FC = () => {
         setOptions((prev) => ({...prev, debugMode: checked}));
     };
 
-    const handleChromeExecutablePathChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        setPuppeteerOptions((prev) => ({...prev, executablePath: e.target.value}));
-    };
-
     const handleShowBrowserChange = (e: React.ChangeEvent<HTMLInputElement>, checked: boolean) => {
         setPuppeteerOptions((prev) => ({...prev, headless: !checked}));
     };
@@ -99,13 +93,6 @@ export const DevelopmentView: React.FC = () => {
                             loop
                         />
                     </Stack>
-                    <TextField
-                        fullWidth
-                        label={t("chromeExecutablePath")}
-                        variant="outlined"
-                        onChange={handleChromeExecutablePathChange}
-                        value={puppeteerOptions.executablePath}
-                    />
                 </Stack>
             </Stack>
             <Grid className={Styles.footer}>

package/src/views/home/HomeView.tsx

@@ -32,7 +32,9 @@ import {Alert, Box, Grid} from "@mui/material";
 
 import {getBinPath, removeIncompleteFiles} from "../../common/FileSystem";
 import {getAlbumInfo} from "../../common/Formatters";
-import {getRealFileExtension, getUrlType, mapRange, resolveMockData} from "../../common/Helpers";
+import {
+    getRealFileExtension, getUrlType, isPlaylist, mapRange, resolveMockData
+} from "../../common/Helpers";
 import {
     Format, FormatScope, InputMode, MediaFormat, QueueKeys, VideoType
 } from "../../common/Media";
@@ -168,7 +170,7 @@ export const HomeView: React.FC = () => {
         if (!state.loading && hasFailures && !_isEmpty(urls)) {
             setFailuresModalOpen(true);
         }
-    }, [trackStatus, state.loading, urls]);
+    }, [state.loading]);
 
     const ytDlpWrap = useMemo<YTDlpWrap>(() => {
         const ytdlpPath: string = global.store.get("application.ytdlpExecutablePath") || `${getBinPath()}/yt-dlp.exe`;
@@ -342,9 +344,9 @@ export const HomeView: React.FC = () => {
             return resolveMockData(300);
         } else {
             return _map(urls, (url) => {
+                const ytdplArgs = [url, "--dump-json", "--no-check-certificate", "--geo-bypass"];
                 const controller = new AbortController();
                 abortControllers[url] = controller;
-                const ytdplArgs = [url, "--dump-json", "--no-check-certificate", "--geo-bypass"];
 
                 const promiseCreator = (ytdplArgsToUse: string[], resolve: (params: any) => any) => {
                     ytDlpWrap.execPromise(ytdplArgsToUse, undefined, controller.signal)
@@ -373,7 +375,6 @@ export const HomeView: React.FC = () => {
                             delete abortControllers[url];
                         });
                 };
-
                 const playlistValidationPromise = async (currentItem: number): Promise<boolean | null> => {
                     const result = await ytDlpWrap.execPromise([url, "--dump-json", "--no-check-certificate", "--geo-bypass", "--flat-playlist", "--playlist-items", `${currentItem}`], undefined);
                     const playlistCheckItemsCount = global.store.get<string, number>("application.playlistCheckItemsCount");
@@ -391,8 +392,8 @@ export const HomeView: React.FC = () => {
                 };
 
                 return new Promise<YoutubeInfoResult>((resolve) => {
-                    if (flatPlaylist) {
-                        playlistValidationPromise(1)
+                    if (isPlaylist(url) && flatPlaylist) {
+                        return playlistValidationPromise(1)
                             .then((result) => {
                                 const ytdplArgsToUse = result ? ytdplArgs.concat("--flat-playlist") : ytdplArgs;
                                 

package/src/views/settings/SettingsView.styl

@@ -22,6 +22,10 @@
                 align-self: stretch;
                 justify-content: center;
             }
+
+            .ytdlp-version {
+                align-items: center;
+            }
         }
 
         .footer {

package/src/views/settings/SettingsView.tsx

@@ -1,3 +1,4 @@
+import {spawn} from "child_process";
 import _filter from "lodash/filter";
 import _first from "lodash/first";
 import _get from "lodash/get";
@@ -11,14 +12,16 @@ import path from "path";
 import React, {useEffect, useState} from "react";
 import {useTranslation} from "react-i18next";
 import {useDebounceValue} from "usehooks-ts";
+import versionInfo from "win-version-info";
 
 import NorthIcon from "@mui/icons-material/North";
 import SouthIcon from "@mui/icons-material/South";
 import {
     Box, Button, FormControl, FormControlLabel, FormLabel, Grid, InputLabel, MenuItem, Paper, Radio,
-    RadioGroup, Select, SelectChangeEvent, Switch, TextField
+    RadioGroup, Select, SelectChangeEvent, Stack, Switch, TextField, Typography
 } from "@mui/material";
 
+import {getBinPath} from "../../common/FileSystem";
 import {FormatScope, MultiMatchAction, SortOrder, TabsOrderKey} from "../../common/Media";
 import StoreSchema, {ApplicationOptions} from "../../common/Store";
 import FileField from "../../components/fileField/FileField";
@@ -31,6 +34,8 @@ export const SettingsView: React.FC = () => {
     const {actions} = useAppContext();
     const {t} = useTranslation();
     const [validationErrors, setValidationErrors] = useState<{[key: string]: string}>({});
+    const [updatingYtDlp, setUpdatingYtDlp] = useState(false);
+    const [ytDlpVersion, setYtDlpVersion] = useState("");
     const [applicationOptions, setApplicationOptions] = useState<ApplicationOptions>(global.store.get("application"));
     const [debouncedApplicationOptions] = useDebounceValue(applicationOptions, 500, {leading: true});
     const tabsOrderKeyOptions = [
@@ -40,6 +45,7 @@ export const SettingsView: React.FC = () => {
         {value: "releaseYear", text: t("year")},
         {value: "duration", text: t("duration")},
     ];
+
     const validateTemplateString = (input: HTMLInputElement) => {
         const allowedKeys = ["artist", "albumTitle", "trackTitle", "trackNo", "releaseYear"];
         const regex = /{{(.*?)}}/g;
@@ -70,6 +76,15 @@ export const SettingsView: React.FC = () => {
         setApplicationOptions((prev) => ({...prev, outputDirectory}));
     };
     
+    const onChromeExecutablePathChange = (value: string[]) => {
+        setApplicationOptions((prev) => ({...prev, chromeExecutablePath: _first(value)}));
+    };
+
+    const onChromeExecutablePathBlur = (value: string[]) => {
+        const chromeExecutablePath = _isNil(_first(value)) ? path.resolve(_get(StoreSchema.application, "properties.chromeExecutablePath.default")) : _first(value);
+        setApplicationOptions((prev) => ({...prev, chromeExecutablePath}));
+    };
+    
     const onYtdlpExecutablePathChange = (value: string[]) => {
         setApplicationOptions((prev) => ({...prev, ytdlpExecutablePath: _first(value)}));
     };
@@ -167,10 +182,29 @@ export const SettingsView: React.FC = () => {
     const onTabsOrderOrderChange = (event: React.MouseEvent<HTMLButtonElement>) => {       
         setApplicationOptions((prev) => ({...prev, tabsOrder: [prev.tabsOrder[0], event.currentTarget.value as SortOrder]}));
     };
+    
+    const refreshYtDlpVersion = () => {
+        const info = versionInfo(global.store.get("application.ytdlpExecutablePath") || `${getBinPath()}/yt-dlp.exe`);
+        setYtDlpVersion(info.FileVersion);
+    };
+
+    const onUpdateYtDlpClick = async (event: React.MouseEvent<HTMLButtonElement>) => {       
+        const child = spawn(global.store.get("application.ytdlpExecutablePath") || `${getBinPath()}/yt-dlp.exe`, ["-U"], {shell: true});
+        
+        setUpdatingYtDlp(true);
+        child.on("close", () => {
+            refreshYtDlpVersion();
+            setUpdatingYtDlp(false);
+        });
+    };
 
     useEffect(() => {
         global.store.set("application", debouncedApplicationOptions);
     }, [debouncedApplicationOptions]);
+    
+    useEffect(() => {
+        refreshYtDlpVersion();
+    }, []);
 
     return (
         <Box className={Styles.settings}>
@@ -260,6 +294,12 @@ export const SettingsView: React.FC = () => {
                         <Grid size={12} data-help="mergeParts">
                             <FormControlLabel control={<Switch checked={applicationOptions.mergeParts} onChange={onMergePartsChange} />} label={t("mergeParts")} />
                         </Grid>
+                        <Grid size={12} data-help="ytdlpVersion">
+                            <Stack direction="row" spacing={1} className={Styles.ytdlpVersion}>
+                                <Typography component="span" variant="body1">{t("ytdlpVersion")}: {ytDlpVersion}</Typography>
+                                <Button size="small" variant="contained" loading={updatingYtDlp} onClick={onUpdateYtDlpClick}>{t("update")}</Button>
+                            </Stack>
+                        </Grid>
                     </Grid>
                     <Grid className={Styles.group} container size={6} component={Paper} variant="outlined">
                         <Grid size={12}>
@@ -349,6 +389,20 @@ export const SettingsView: React.FC = () => {
                                 type="string"
                             />
                         </Grid>
+                        <Grid size={12}>
+                            <FileField
+                                data-help="chromeExecutablePath"
+                                fullWidth
+                                label={t("chromeExecutablePath")}
+                                id="chromeExecutablePath"
+                                variant="outlined"
+                                onChange={onChromeExecutablePathChange}
+                                onBlur={onChromeExecutablePathBlur}
+                                value={applicationOptions.chromeExecutablePath}
+                                mode="file"
+                                fileTypes={[".exe"]}
+                            />
+                        </Grid>
                         <Grid size={12}>
                             <FileField
                                 data-help="ytdlpExecutablePath"