yt-grabber 1.1.1 → 1.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "yt-grabber",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "description": "Youtube Grabber",
   "main": "./dist/index.js",
   "repository": {
@@ -69,7 +69,6 @@
     "@mui/icons-material": "^7.0.0",
     "@mui/lab": "^7.0.0-beta.9",
     "@mui/material": "^7.0.0",
-    "@pureit/busylight": "^1.0.12",
     "axios": "^1.8.4",
     "classnames": "^2.5.1",
     "electron-devtools-installer": "^4.0.0",

package/src/App.styl

@@ -50,18 +50,5 @@ html {
                 }
             } 
         }
-
-        :global(#help-backdrop) {
-            position: absolute;
-            width: 100vw;
-            height: 100vh;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            background: rgba(0, 0, 0, 0.5);
-            z-index: 1;
-            vendor("backdrop-filter", blur(2px));
-        }
     }
 }

package/src/common/Youtube.ts

@@ -3,7 +3,8 @@ import {MediaFormat} from "./Media";
 export type YoutubeInfoResult = {
     url: string,
     value?: TrackInfo[];
-    error?: string,
+    errors?: string[],
+    warnings?: string[],
 };
 
 export type TrackInfo = {

package/src/components/appBar/AppBar.styl

@@ -19,7 +19,6 @@
         }
 
         .language-picker {
-            margin-right: .5em;
         }
 
         .icon {
@@ -32,11 +31,11 @@
             }
 
             &.help {
-                opacity: .15;
+                opacity: .5;
                 vendor("transition", opacity .25s ease-in-out);
                 
                 &:hover {
-                    opacity: .35;
+                    opacity: 1;
                 }
 
                 &.active {

package/src/components/appBar/AppBar.tsx

@@ -4,6 +4,7 @@ import {useTranslation} from "react-i18next";
 
 import CloseIcon from "@mui/icons-material/Close";
 import HelpIcon from "@mui/icons-material/Help";
+import HelpOutlineIcon from "@mui/icons-material/HelpOutline";
 import SettingsIcon from "@mui/icons-material/Settings";
 import {Stack} from "@mui/material";
 import ApplicationBar from "@mui/material/AppBar";
@@ -56,15 +57,19 @@ const AppBar = (props: AppBarProps) => {
     const createSettingsButton = () => {
         if (state.location !== "/") {
             return (
-                <IconButton onClick={handleClose} color="inherit" className={Styles.icon}>
-                    <CloseIcon />
-                </IconButton>
+                <div>
+                    <IconButton onClick={handleClose} color="inherit" className={Styles.icon}>
+                        <CloseIcon />
+                    </IconButton>
+                </div>
             );
         } else {
             return (
-                <IconButton data-help="settings" disabled={disableNavigation} onClick={handleOpenSettings} color="inherit" className={Styles.icon}>
-                    <SettingsIcon />
-                </IconButton>
+                <div>
+                    <IconButton data-help="settings" disabled={disableNavigation} onClick={handleOpenSettings} color="inherit" className={Styles.icon}>
+                        <SettingsIcon />
+                    </IconButton>
+                </div>
             );
         }
     };
@@ -79,8 +84,8 @@ const AppBar = (props: AppBarProps) => {
                     </Typography>
                     <Box sx={{flexGrow: 1}}></Box>
                     <Stack direction="row" gap={1}>
-                        <LanguagePicker data-help="languagePicker" className={Styles.languagePicker} showArrow={false} mode={ComponentDisplayMode.Minimal} />
-                        <IconButton data-help="help-toggle" className={classnames(Styles.icon, Styles.help, {[Styles.active]: state.help})} onClick={onHelpClick}><HelpIcon/></IconButton>
+                        <LanguagePicker data-help="languagePicker" className={Styles.languagePicker} showArrow={false} mode={ComponentDisplayMode.Minimal} sx={{ marginRight: 1}} />
+                        <IconButton color="inherit" data-help="help-toggle" className={classnames(Styles.icon, Styles.help, {[Styles.active]: state.help})} onClick={onHelpClick}>{state.help ? <HelpIcon/> : <HelpOutlineIcon/>}</IconButton>
                         <Tooltip title={state.location === "/settings" ? t("closeSettings") : t("openSettings")}>
                             {createSettingsButton()}
                         </Tooltip>

package/src/components/languagePicker/LanguagePicker.tsx

@@ -2,12 +2,12 @@ import classnames from "classnames";
 import $_ from "lodash";
 import moment from "moment";
 import path from "path";
-import React, {HTMLProps, useState} from "react";
+import React, {HTMLAttributes, useState} from "react";
 import {useTranslation} from "react-i18next";
 
 import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
 import {
-    Button, CircularProgress, ClickAwayListener, Menu, MenuItem, Theme, useMediaQuery
+    Box, BoxProps, Button, CircularProgress, ClickAwayListener, Menu, MenuItem, Theme, useMediaQuery
 } from "@mui/material";
 
 import {ComponentDisplayMode} from "../../common/ComponentDisplayMode";
@@ -17,13 +17,13 @@ const isMac = process.platform === "darwin";
 const isDev = process.env.NODE_ENV === "development";
 const prependPath = isMac && !isDev ? path.join(process.resourcesPath, "..") : ".";
 
-export type LanguagePickerProps = Omit<HTMLProps<HTMLDivElement>, "onClick"> & {
+export type LanguagePickerProps = Omit<HTMLAttributes<HTMLDivElement> & BoxProps, "onClick"> & {
     className?: string;
     mode?: ComponentDisplayMode;
     showArrow?: boolean;
 }
 
-export type LanguagePickerTriggerProps = Omit<HTMLProps<HTMLButtonElement>, "onClick"> & LanguagePickerProps & {
+export type LanguagePickerTriggerProps = Omit<HTMLAttributes<HTMLButtonElement>, "onClick"> & LanguagePickerProps & {
     loading?: boolean;
     onClick?: React.MouseEventHandler<HTMLButtonElement>;
 }
@@ -69,7 +69,7 @@ export const LanguagePicker = (props: LanguagePickerProps) => {
     };
 
     return (
-        <div className={classnames(Styles.languagePicker,className)} {...rest}>
+        <Box className={classnames(Styles.languagePicker,className)} {...rest}>
             <LanguagePickerTrigger showArrow={showArrow} mode={displayMode} loading={loading} onClick={onTriggerClick} />
             <ClickAwayListener onClickAway={onClickAway}>
                 <Menu
@@ -91,7 +91,7 @@ export const LanguagePicker = (props: LanguagePickerProps) => {
                     ))}
                 </Menu>
             </ClickAwayListener>
-        </div>
+        </Box>
     );
 };
 

package/src/components/themePicker/ThemePicker.tsx

@@ -33,6 +33,16 @@ export const ThemePicker = (props: IThemePickerProps) => {
         return <SystemModeIcon className={Styles.icon} />;
     };
 
+    const resolveText = (mode: ThemeMode) => {
+        if (mode === "dark") {
+            return t("modeDark");
+        } else if (mode === "light") {
+            return t("modeLight");
+        }
+
+        return t("modeSystem");
+    };
+
     const onChangeMode = (event: SelectChangeEvent<ThemeMode>) => {       
         setMode(event.target.value as ThemeMode);
     };
@@ -55,7 +65,7 @@ export const ThemePicker = (props: IThemePickerProps) => {
             >
                 {_map(themeModes, (item) => <MenuItem key={item} value={item} className={Styles.menuItem}>
                     {resolveIcon(item)}
-                    <div>{item}</div>
+                    {resolveText(item)}
                 </MenuItem>)}
             </Select>
         </FormControl>

package/src/components/youtube/infoBar/InfoBar.tsx

@@ -1,15 +1,17 @@
 import _filter from "lodash/filter";
 import _find from "lodash/find";
+import _isEmpty from "lodash/isEmpty";
 import _reject from "lodash/reject";
 import _size from "lodash/size";
 import _some from "lodash/some";
 import React from "react";
 import {useTranslation} from "react-i18next";
 
-import {Box, LinearProgress, Stack, Typography} from "@mui/material";
+import {Box, LinearProgress, Stack, Tooltip, Typography} from "@mui/material";
 
 import {useAppContext} from "../../../react/contexts/AppContext";
 import {useDataState} from "../../../react/contexts/DataContext";
+import LogMenu from "../logMenu/LogMenu";
 import Styles from "./InfoBar.styl";
 
 export type InfoBarProps = {
@@ -18,7 +20,7 @@ export type InfoBarProps = {
 
 export const InfoBar: React.FC<InfoBarProps> = (props) => {
     const {hidden} = props;
-    const {tracks, playlists, trackStatus} = useDataState();
+    const {tracks, playlists, trackStatus, errors, warnings} = useDataState();
     const {state} = useAppContext();
     const {t} = useTranslation();
 
@@ -47,13 +49,28 @@ export const InfoBar: React.FC<InfoBarProps> = (props) => {
     if (hidden) return null;
 
     return (
-        <Stack className={Styles.infoBar} direction="row" spacing={1} padding={1.5} data-help="infoBar">
-            <Typography className={Styles.label} variant="body2" color="primary.light">{t("playlists")}:</Typography>
-            <Typography data-help="allPlaylists" className={Styles.value} variant="body2">{_size(playlists)}</Typography>
-            <Typography data-help="grabbedPlaylists" className={Styles.value} variant="body2">{`(${getGrabbedPlaylists()})`}</Typography>
-            <Typography className={Styles.label} variant="body2" color="primary.light">{t("tracks")}:</Typography>
-            <Typography data-help="allTracks" className={Styles.value} variant="body2">{_size(tracks)}</Typography>
-            <Typography data-help="grabbedTracks" className={Styles.value} variant="body2">{`(${getGrabbedTracks()})`}</Typography>
+        <Stack className={Styles.infoBar} direction="row" justifyContent="space-between" spacing={1} padding={1.5} data-help="infoBar">
+            <Stack direction="row" alignItems="start">
+                <LogMenu hidden={_isEmpty(errors) && _isEmpty(warnings)} />
+            </Stack>
+            <Stack direction="row" spacing={1} alignItems="center">
+                <Typography className={Styles.label} variant="body2" color="primary.light">{t("playlists")}:</Typography>
+                <Tooltip title={t("totalPlaylistsCount", {num: _size(playlists)})} arrow enterDelay={500} leaveDelay={100} enterNextDelay={500}>
+                    <Typography data-help="allPlaylists" className={Styles.value} variant="body2">{_size(playlists)}</Typography>
+                </Tooltip>
+                <Tooltip title={t("downloadedPlaylistsCount", {num: getGrabbedPlaylists()})} arrow enterDelay={500} leaveDelay={100} enterNextDelay={500}>
+                    <Typography data-help="grabbedPlaylists" className={Styles.value} variant="body2">{`(${getGrabbedPlaylists()})`}</Typography>
+                </Tooltip>
+                <Typography className={Styles.label} variant="body2" color="primary.light">{t("tracks")}:</Typography>
+                <Tooltip title={t("totalTracksCount", {num: _size(tracks)})} arrow enterDelay={500} leaveDelay={100} enterNextDelay={500}>
+                    <Typography data-help="allTracks" className={Styles.value} variant="body2">{_size(tracks)}</Typography>
+                </Tooltip>
+                <Tooltip title={t("downloadedTracksCount", {num: getGrabbedTracks()})} arrow enterDelay={500} leaveDelay={100} enterNextDelay={500}>
+                    <Typography data-help="grabbedTracks" className={Styles.value} variant="body2">{`(${getGrabbedTracks()})`}</Typography>
+                </Tooltip>
+            </Stack>
+            <Stack direction="row" spacing={1} alignItems="end">
+            </Stack>
             {state.loading &&
                 <Box className={Styles.progress}>
                     <LinearProgress className={Styles.progressBar} variant="determinate" color="primary" value={getTotalProgress()} />

package/src/components/youtube/inputPanel/InputPanel.styl

@@ -1,8 +1,15 @@
 .input-panel {
     display: flex;
 
-    > :global(.MuiGrid2-root) {
-        display: flex;
+    > :global(.MuiGrid-root) {
+
+        > :global(.MuiStack-root) {
+
+            > * {
+                display: flex;
+            }
+        }
+
     }
 
     .mode-buttons {

package/src/components/youtube/inputPanel/InputPanel.tsx

@@ -172,27 +172,35 @@ export const InputPanel: React.FC<InputPanelProps> = (props: InputPanelProps) =>
             <Grid>
                 <Stack direction="row" spacing={1} height={54}>
                     <Tooltip title={t("loadFromFile")} arrow enterDelay={2000} leaveDelay={100} enterNextDelay={500} placement="bottom">
-                        <Button data-help="loadFromFile" disabled={loading} variant="contained" disableElevation color="secondary" onClick={() => handleOpenFromFile()}>
-                            <FolderIcon/>
-                        </Button>
+                        <div>
+                            <Button data-help="loadFromFile" disabled={loading} variant="contained" disableElevation color="secondary" onClick={() => handleOpenFromFile()}>
+                                <FolderIcon/>
+                            </Button>
+                        </div>
                     </Tooltip>
                     <Tooltip title={t("loadInfo")} arrow enterDelay={2000} leaveDelay={100} enterNextDelay={500} placement="bottom">
-                        <Button data-help="loadInfo" disabled={loading || _isEmpty(urls)} variant="contained" disableElevation color="secondary" onClick={() => onLoadInfo(urls)}>
-                            <SearchIcon />
-                        </Button>
+                        <div>
+                            <Button data-help="loadInfo" disabled={loading || _isEmpty(urls)} variant="contained" disableElevation color="secondary" onClick={() => onLoadInfo(urls)}>
+                                <SearchIcon />
+                            </Button>
+                        </div>
                     </Tooltip>
                     {showDownloadFailed &&
                         <Tooltip title={t("downloadFailed")} arrow enterDelay={2000} leaveDelay={100} enterNextDelay={500} placement="bottom">
-                            <Button data-help="downloadFailed" disabled={loading || _isEmpty(urls)} variant="contained" disableElevation color="secondary" onClick={onDownloadFailed}>
-                                <ReplayIcon />
-                            </Button>
+                            <div>
+                                <Button data-help="downloadFailed" disabled={loading || _isEmpty(urls)} variant="contained" disableElevation color="secondary" onClick={onDownloadFailed}>
+                                    <ReplayIcon />
+                                </Button>
+                            </div>
                         </Tooltip>
                     }
                     {!loading &&
                         <Tooltip title={t("downloadAll")} arrow enterDelay={2000} leaveDelay={100} enterNextDelay={500} placement="bottom">
-                            <Button data-help="downloadAll" disabled={loading || _isEmpty(urls)} variant="contained" disableElevation color="secondary" onClick={() => onDownload(urls)}>
-                                <DownloadIcon />
-                            </Button>
+                            <div>
+                                <Button data-help="downloadAll" disabled={loading || _isEmpty(urls)} variant="contained" disableElevation color="secondary" onClick={() => onDownload(urls)}>
+                                    <DownloadIcon />
+                                </Button>
+                            </div>
                         </Tooltip>
                     }
                     {loading && !_isEmpty(playlists) &&

package/src/components/youtube/logMenu/LogMenu.styl

@@ -0,0 +1,23 @@
+@import "../../../styles/mixins.styl"
+
+.log-menu {
+    display: flex;
+    flex-direction: row;
+    justify-content: start;
+    align-items: center;
+
+    .log-button {
+        padding: 2px;    
+    }
+
+    .log-menu-list {
+        
+        .log-entry {
+        
+            .log-entry-icon {
+                min-width: 0;
+                padding-right: 12px;
+            }
+        }
+    }
+}

package/src/components/youtube/logMenu/LogMenu.tsx

@@ -0,0 +1,135 @@
+import classnames from "classnames";
+import _isEmpty from "lodash/isEmpty";
+import _map from "lodash/map";
+import React, {HTMLAttributes} from "react";
+import {useTranslation} from "react-i18next";
+
+import CancelIcon from "@mui/icons-material/Cancel";
+import ErrorIcon from "@mui/icons-material/Error";
+import {
+    Divider, IconButton, ListItemIcon, ListItemText, Menu, MenuItem, Tooltip
+} from "@mui/material";
+
+import {useDataState} from "../../../react/contexts/DataContext";
+import Styles from "./LogMenu.styl";
+
+export type LogMenuProps = HTMLAttributes<HTMLDivElement>;
+
+export const LogMenu: React.FC<LogMenuProps> = (props) => {
+    const {className, hidden} = props;
+    const {errors, warnings} = useDataState();
+    const [errorAnchorEl, setErrorAnchorEl] = React.useState<null | HTMLElement>(null);
+    const [warningAnchorEl, setWarningAnchorEl] = React.useState<null | HTMLElement>(null);
+    const errorMenuOpen = Boolean(errorAnchorEl);
+    const warningMenuOpen = Boolean(warningAnchorEl);
+    const {t} = useTranslation();
+    
+    const handleErrorClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+        setWarningAnchorEl(null);
+        setErrorAnchorEl(event.currentTarget);
+    };
+
+    const handleWarningClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+        setErrorAnchorEl(null);
+        setWarningAnchorEl(event.currentTarget);
+    };
+
+    const handleErrorClose = () => {
+        setErrorAnchorEl(null);
+    };
+
+    const handleWarningClose = () => {
+        setWarningAnchorEl(null);
+    };
+
+    if (hidden) return null;
+
+    return (
+        <div className={classnames(Styles.logMenu, className)} data-help="logMenu">
+            <Tooltip title={t("errors")} arrow enterDelay={500} leaveDelay={100} enterNextDelay={500}>
+                <div>
+                    <IconButton className={Styles.logButton} color="error" disabled={_isEmpty(errors)} onClick={handleErrorClick}>
+                        <CancelIcon />
+                    </IconButton>
+                </div>
+            </Tooltip>
+            <Tooltip title={t("warnings")} arrow enterDelay={500} leaveDelay={100} enterNextDelay={500}>
+                <div>
+                    <IconButton className={Styles.logButton} color="warning" disabled={_isEmpty(warnings)} onClick={handleWarningClick}>
+                        <ErrorIcon />
+                    </IconButton>
+                </div>
+            </Tooltip>
+            <Menu
+                anchorEl={errorAnchorEl}
+                open={errorMenuOpen}
+                onClose={handleErrorClose}
+                anchorReference="anchorEl"
+                anchorOrigin={{vertical: "top", horizontal: "center"}}
+                transformOrigin={{vertical: "bottom", horizontal: "center"}}                
+                slotProps={{
+                    list: {
+                        className: Styles.logMenuList,
+                    }
+                }}
+            >
+                {_map(errors, (error, index) =>([
+                    <MenuItem key={index} dense onClick={handleErrorClose} className={Styles.logEntry}>
+                        <ListItemIcon className={Styles.logEntryIcon}>
+                            <CancelIcon />
+                        </ListItemIcon>
+                        <ListItemText
+                            primary={error.url}
+                            secondary={error.message}
+                            slotProps={{
+                                primary: {
+                                    paddingBottom: .5
+                                },
+                                secondary: {
+                                    whiteSpace: "normal",
+                                }
+                            }}
+                        />
+                    </MenuItem>,
+                    index < errors.length - 1 && <Divider key={index + "_divider"} color="white" variant="middle" />
+                ]))}
+            </Menu>
+            <Menu
+                anchorEl={warningAnchorEl}
+                open={warningMenuOpen}
+                onClose={handleWarningClose}
+                anchorReference="anchorEl"
+                anchorOrigin={{vertical: "top", horizontal: "center"}}
+                transformOrigin={{vertical: "bottom", horizontal: "center"}}                
+                slotProps={{
+                    list: {
+                        className: Styles.logMenuList,
+                    }
+                }}
+            >
+                {_map(warnings, (warning, index) =>([
+                    <MenuItem key={index} dense onClick={handleWarningClose} className={Styles.logEntry}>
+                        <ListItemIcon className={Styles.logEntryIcon}>
+                            <ErrorIcon />
+                        </ListItemIcon>
+                        <ListItemText
+                            primary={warning.url}
+                            secondary={warning.message}
+                            slotProps={{
+                                primary: {
+                                    paddingBottom: .5
+                                },
+                                secondary: {
+                                    whiteSpace: "normal",
+                                }
+                            }}
+                        />
+                    </MenuItem>,
+                    index < warnings.length - 1 && <Divider key={index + "_divider"} color="white" variant="middle" />
+                ]))}
+            </Menu>
+        </div>
+    );
+};
+
+export default LogMenu;

package/src/components/youtube/mediaInfoPanel/MediaInfoPanel.tsx

@@ -146,9 +146,11 @@ export const MediaInfoPanel: React.FC<MediaInfoPanelProps> = (props: MediaInfoPa
                                     </Button>
                                 </Tooltip>
                                 <Tooltip title={t("downloadPlaylist")} arrow enterDelay={2000} leaveDelay={100} enterNextDelay={500} placement="top">
-                                    <Button disabled={_includes(queue, "load-single") || _includes(queue, "load-multi")} data-help="downloadPlaylist" className={Styles.download} size="large" fullWidth variant="contained" color="secondary" disableElevation onClick={downloadPlaylist}>
-                                        <DownloadIcon />
-                                    </Button>
+                                    <div>
+                                        <Button disabled={_includes(queue, "load-single") || _includes(queue, "load-multi")} data-help="downloadPlaylist" className={Styles.download} size="large" fullWidth variant="contained" color="secondary" disableElevation onClick={downloadPlaylist}>
+                                            <DownloadIcon />
+                                        </Button>
+                                    </div>
                                 </Tooltip>
                             </Box>
                         }

package/src/components/youtube/trackList/TrackList.tsx

@@ -266,9 +266,11 @@ export const TrackList: React.FC<TrackListProps> = (props: TrackListProps) => {
                                 </Tooltip>
                                 {!_includes(queue, item.id) &&
                                     <Tooltip title={t("download")} arrow enterDelay={2000} leaveDelay={100} enterNextDelay={500} placement="top">
-                                        <Button disabled={_includes(queue, "load-single") || _includes(queue, "load-multi")} data-help="downloadTrack" className={Styles.trackAction} size="small" color="primary" disableElevation variant="contained" data-id={item.id} onClick={onDownloadTrackClick}>
-                                            <DownloadIcon />
-                                        </Button>
+                                        <div>
+                                            <Button disabled={_includes(queue, "load-single") || _includes(queue, "load-multi")} data-help="downloadTrack" className={Styles.trackAction} size="small" color="primary" disableElevation variant="contained" data-id={item.id} onClick={onDownloadTrackClick}>
+                                                <DownloadIcon />
+                                            </Button>
+                                        </div>
                                     </Tooltip>
                                 }
                                 {_includes(queue, item.id) &&

package/src/hooks/useHelp.ts

@@ -1,4 +1,6 @@
 
+import _toInteger from "lodash/toInteger";
+import _toString from "lodash/toString";
 import {useEffect, useState} from "react";
 import {useTranslation} from "react-i18next";
 
@@ -11,6 +13,65 @@ const useHelp = () => {
     const [help, setHelp] = useState<{header: string, content: string | string[];}>({header: "", content: ""});
     const {t} = useTranslation();
     
+    const createBackdropElement = (background = "rgba(0, 0, 0, 0.5)", filter = "blur(2px)") => {
+        const backdrop = document.createElement("div");
+        
+        backdrop.style.position = "absolute";
+        backdrop.style.width = "100vw";
+        backdrop.style.height = "100vh";
+        backdrop.style.top = "0";
+        backdrop.style.left = "0";
+        backdrop.style.zIndex = "1";
+        backdrop.style.background = background;
+        backdrop.style.backdropFilter = filter;
+
+        document.body.appendChild(backdrop);
+
+        return backdrop;
+    };
+
+    const createAnchorElement = (original: HTMLElement, zIndex = 999) => {
+        const bbox = original.getBoundingClientRect();
+        const clone = original.cloneNode(true) as HTMLElement;
+
+        const copyComputedStyle = (src: HTMLElement, dest: HTMLElement) => {
+            const computedStyle = window.getComputedStyle(src);
+            
+            for (const key of computedStyle) {
+                try {
+                    dest.style[key as any] = computedStyle.getPropertyValue(key);
+                } catch (error) {
+                    console.log(error);
+                }
+            }
+        };
+      
+        const traverseAndCopy = (srcNode: HTMLElement, destNode: HTMLElement, disableEvents = true) => {
+            copyComputedStyle(srcNode, destNode);
+            
+            if (disableEvents) {
+                destNode.style.pointerEvents = "none";
+            }
+
+            const srcChildren = srcNode.children as HTMLCollectionOf<HTMLElement>;
+            const destChildren = destNode.children as HTMLCollectionOf<HTMLElement>;
+            
+            for (let i = 0; i < srcChildren.length; i++) {
+                traverseAndCopy(srcChildren[i], destChildren[i]);
+            }
+        };
+      
+        traverseAndCopy(original, clone);
+        document.body.appendChild(clone);
+
+        clone.style.position = "fixed";
+        clone.style.left = bbox.x - clone.offsetLeft + "px";
+        clone.style.top = bbox.y - clone.offsetTop + "px";
+        clone.style.zIndex = _toString(zIndex + 1);
+
+        return clone;
+    };
+
     const handleClick = (event: MouseEvent) => {            
         const element = event.target as HTMLElement;
         const elementHelp = element.closest<HTMLElement>("[data-help]");
@@ -25,11 +86,12 @@ const useHelp = () => {
 
         const header = t(helpId + "Header", {ns: "help"});
         const content: string | string[] = t(helpId + "Content", {ns: "help", returnObjects: true}) as string | string[]; 
-        const backdrop = document.createElement("div");
-
-        backdrop.id = "help-backdrop";
-        setBackdropEl(backdrop);
-        setAnchorEl(elementHelp);
+        
+        const backdropElement = createBackdropElement();
+        const anchorElement = createAnchorElement(elementHelp, _toInteger(backdropElement.style.zIndex));
+        
+        setBackdropEl(backdropElement);
+        setAnchorEl(anchorElement);
         setHelp({header, content});
 
         event.stopPropagation();
@@ -43,33 +105,21 @@ const useHelp = () => {
     
     const handleKeyUpEvent = (event: KeyboardEvent) => {
         if (event.key !== "Escape") return;
-            
+
         actions.setHelp(false);
         setBackdropEl(null);
         setAnchorEl(null);
     };
 
     useEffect(() => {
-        if (backdropEl) {
-            document.body.appendChild(backdropEl);
-        }
-
         return () => {
-            if (!backdropEl) return;
-
-            document.body.removeChild(backdropEl);
+            backdropEl?.remove();
         };
     }, [backdropEl]);
 
-    useEffect(() => {
-        if (anchorEl) {
-            anchorEl.style.zIndex = "99";
-        }
-
+    useEffect(() => {        
         return () => {
-            if (!anchorEl) return;
-
-            anchorEl.style.zIndex = "initial";
+            anchorEl?.remove();
         };
     }, [anchorEl]);
 
@@ -84,9 +134,6 @@ const useHelp = () => {
             document.removeEventListener("mouseup", handleMouseEvent, true);
             document.removeEventListener("mousedown", handleMouseEvent, true);
             document.removeEventListener("keyup", handleKeyUpEvent, true);
-            if (anchorEl) {
-                anchorEl.style.zIndex = "initial";
-            }
         }
 
         return () => {
@@ -94,9 +141,6 @@ const useHelp = () => {
             document.removeEventListener("mouseup", handleMouseEvent, true);
             document.removeEventListener("mousedown", handleMouseEvent, true);
             document.removeEventListener("keyup", handleKeyUpEvent, true);
-            if (anchorEl) {
-                anchorEl.style.zIndex = "initial";
-            }
         };
     }, [state]);
 

package/src/react/contexts/DataContext.tsx

@@ -13,6 +13,11 @@ export type Task = {
     dirty?: boolean;
 };
 
+export type LogEntry = {
+    url: string;
+    message: string;
+};
+
 export type DataState = {
     playlists: PlaylistInfo[];
     tracks: TrackInfo[];
@@ -24,6 +29,8 @@ export type DataState = {
     operation: string;
     activeTab: string;
     queue: string[];
+    errors: LogEntry[];
+    warnings: LogEntry[];
 
     setPlaylists: React.Dispatch<React.SetStateAction<PlaylistInfo[]>>;
     setTracks: React.Dispatch<React.SetStateAction<TrackInfo[]>>;
@@ -35,6 +42,8 @@ export type DataState = {
     setQueue: React.Dispatch<React.SetStateAction<string[]>>;
     setOperation: React.Dispatch<React.SetStateAction<string>>;
     setActiveTab: React.Dispatch<React.SetStateAction<string>>;
+    setErrors: React.Dispatch<React.SetStateAction<LogEntry[]>>;
+    setWarnings: React.Dispatch<React.SetStateAction<LogEntry[]>>;
     clear: () => void;
 };
 
@@ -52,6 +61,8 @@ export function DataProvider(props: any) {
     const [queue, setQueue] = useState<string[]>([]);
     const [operation, setOperation] = useState<string>();
     const [activeTab, setActiveTab] = useState<string>();
+    const [errors, setErrors] = useState<LogEntry[]>([]);
+    const [warnings, setWarnings] = useState<LogEntry[]>([]);
 
     const clear = () => {
         setPlaylists([]);
@@ -62,6 +73,8 @@ export function DataProvider(props: any) {
         setQueue([]);
         setFormats({global: {type: MediaFormat.Audio, extension: AudioType.Mp3, audioQuality: 0}});
         setOperation(undefined);
+        setErrors([]);
+        setWarnings([]);
     };
 
     return (
@@ -76,7 +89,9 @@ export function DataProvider(props: any) {
             queue,
             operation,
             activeTab,
-            
+            errors,
+            warnings,
+
             setOperation,
             setPlaylists,
             setAutoDownload,
@@ -87,6 +102,8 @@ export function DataProvider(props: any) {
             setUrls,
             setQueue,
             setActiveTab,
+            setErrors,
+            setWarnings,
             clear
         }}>
             {props.children}

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

@@ -65,8 +65,8 @@
     "formatScopeHeader": "Formatbereich",
     "formatScopeContent": [
         "Legen Sie den Geltungsbereich des ausgewählten Formats für Downloads fest.",
-        "Wenn der Bereich `global` ist, wird das ausgewählte Format auf alle heruntergeladenen Dateien angewendet, sobald der Download gestartet wird.",
-        "Wenn der Bereich `pro Tab` ist, können Sie für jeden Tab ein anderes Format festlegen, sodass die zugehörigen Downloads unterschiedliche Ausgabeformate haben."
+        "Wenn der Bereich `Allgemein` ist, wird das ausgewählte Format auf alle heruntergeladenen Dateien angewendet, sobald der Download gestartet wird.",
+        "Wenn der Bereich `Für jeden Tab unterschiedlich` ist, können Sie für jeden Tab ein anderes Format festlegen, sodass die zugehörigen Downloads unterschiedliche Ausgabeformate haben."
     ],
     "alwaysOverwriteHeader": "Dateiüberschreibung",
     "alwaysOverwriteContent": "Legt fest, ob vorhandene heruntergeladene Dateien überschrieben werden.\nWenn deaktiviert, wird kein Download durchgeführt, wenn die entsprechende Datei bereits vorhanden ist.",
@@ -116,5 +116,19 @@
     "allTracksHeader": "Titel",
     "allTracksContent": "Anzahl aller geladenen Titel.",
     "grabbedTracksHeader": "Heruntergeladene Titel",
-    "grabbedTracksContent": "Anzahl der heruntergeladenen Titel."
+    "grabbedTracksContent": "Anzahl der heruntergeladenen Titel.",
+    "logMenuHeader": "Fehler und Warnungen",
+    "logMenuContent": "Zeigt Fehler und Warnungen im Zusammenhang mit dem Downloadvorgang an.",
+    "downloadFailedHeader": "Download fehlgeschlagen",
+    "downloadFailedContent": "Versucht, fehlgeschlagene Elemente erneut herunterzuladen.",
+    "cancellAllHeader": "Alle Downloads abbrechen",
+    "cancellAllContent": "Alle aktiven und wartenden Downloads abbrechen.",
+    "cancelDownloadPlaylistHeader": "Playlist-Download abbrechen",
+    "cancelDownloadPlaylistContent": "Alle aktiven und wartenden Downloads, die mit dieser Playlist verbunden sind, abbrechen.",
+    "cancelDownloadTrackHeader": "Track-Download abbrechen",
+    "cancelDownloadTrackContent": "Allen Sie den Download des Titels ab.",
+    "findInFileSystemHeader": "In Dateisystem suchen",
+    "findInFileSystemContent": "Offnet die zugehörige Datei im Dateisystem.",
+    "openOutputDirectoryHeader": "Ausgabeverzeichnis öffnen",
+    "openOutputDirectoryContent": "Offnet das Ausgabeverzeichnis im Datei-Explorer."
 }

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

@@ -1,6 +1,6 @@
 {
     "albumOutputTemplate": "Ausgabenvorlage (Alben)",
-    "alwaysOverwrite": "Immer Überschreiben",
+    "alwaysOverwrite": "Heruntergeladene Dateien überschreiben",
     "artist": "Künstler",
     "audioQuality": "Audio-Qualität",
     "cancel": "Stornieren",
@@ -13,15 +13,18 @@
     "cut": "schneiden",
     "debugMode": "Debug-Modus",
     "detailsModalTitle": "Mediendetails bearbeiten",
-    "discographyDownload": "Diskografie-Download (experimentell)",
+    "discographyDownload": "Diskografie-downloadAll",
     "done": "Fertig",
     "download": "Herunterladen",
     "downloadAll": "Alles herunterladen",
+    "downloadedPlaylistsCount": "Heruntergeladene Wiedergabelisten: {{num}}",
+    "downloadedTracksCount": "Heruntergeladene Spuren: {{num}}",
     "downloadFailed": "Falsch Herunterladen",
     "downloading": "Herunterladen läuft",
     "downloadPlaylist": "Playlist herunterladen",
     "duration": "Dauer",
     "edit": "Bearbeiten",
+    "errors": "Fehler",
     "exceptionGetYoutubeUrls": "GetYoutubeUrls: Fehler",
     "exceptionGetYoutubeUrlsText": "Beim Laden der Ressourcen von YouTube ist ein Fehler aufgetreten",
     "exceptionTimeout": "Timeout-Fehler",
@@ -29,7 +32,7 @@
     "extractingAudio": "Audio Extrahieren",
     "findFileInSystem": "Im Datei-Explorer anzeigen",
     "format": "Format",
-    "formatScope": "Ausgewählter Formatumfang",
+    "formatScope": "Download-Parameterumfang",
     "formatScopeGlobal": "Allgemein",
     "formatScopeTab": "Für jeden Tab unterschiedlich",
     "from": "von",
@@ -40,6 +43,9 @@
     "mediaType": "Typ",
     "merging": "Zusammenführung",
     "missingMediaInfoError": "Fehlende Medieninformationen",
+    "modeDark": "Dunkel",
+    "modeLight": "Licht",
+    "modeSystem": "System",
     "ok": "OK",
     "openInBrowser": "Im Browser öffnen",
     "openOutputDirectory": "Verzeichnis im System anzeigen",
@@ -57,8 +63,11 @@
     "themeMode": "Designmodus",
     "title": "Titel",
     "to": "bis",
+    "totalPlaylistsCount": "Alle Wiedergabelisten: {{num}}",
+    "totalTracksCount": "Alle Spuren: {{num}}",
     "trackOutputTemplate": "Ausgabevorlage (Audiospuren)",
     "tracks": "Spuren",
     "videoOutputTemplate": "Ausgabevorlage (videos)",
+    "warnings": "Warnungen",
     "youtubeUrl": "YouTube-URL"
 }

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

@@ -65,8 +65,8 @@
     "formatScopeHeader": "Format Scope",
     "formatScopeContent": [
         "Specify scope of format selected for downloads.",
-        "If scope is `global` then format you select will be applied to all downloaded files once download is started.",
-        "If scope is `per tab` then you can specify different format for each tab so that related downloads will have different output formats."
+        "If scope is `Global` then format you select will be applied to all downloaded files once download is started.",
+        "If scope is `Different for each tab` then you can specify different format for each tab so that related downloads will have different output formats."
     ],
     "alwaysOverwriteHeader": "File Overwriting",
     "alwaysOverwriteContent": "Specifies whether existing downloaded files are overwritten.\nIf disabled, no download is performed when related file is already present.",
@@ -116,5 +116,19 @@
     "allTracksHeader": "Tracks",
     "allTracksContent": "Number of all loaded tracks.",
     "grabbedTracksHeader": "Grabbed Tracks",
-    "grabbedTracksContent": "Number of downloaded tracks."
+    "grabbedTracksContent": "Number of downloaded tracks.",
+    "logMenuHeader": "Errors and Warnings",
+    "logMenuContent": "Displays errors and warnings related to downloading process.",
+    "downloadFailedHeader": "Download Failed",
+    "downloadFailedContent": "Attempts to download failed items again.",
+    "cancellAllHeader": "Cancel All Downloads",
+    "cancellAllContent": "Cancels all active and queued downloads.",
+    "cancelDownloadPlaylistHeader": "Cancel Playlist Download",
+    "cancelDownloadPlaylistContent": "Cancels all active and queued downloads related to this playlist.",
+    "cancelDownloadTrackHeader": "Cancel Track Download",
+    "cancelDownloadTrackContent": "Cancels downlaoding track.",
+    "findInFileSystemHeader": "Find File",
+    "findInFileSystemContent": "Finds related file in the file system.",
+    "openOutputDirectoryHeader": "Open Output Directory",
+    "openOutputDirectoryContent": "Opens output directory in file explorer."
 }

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

@@ -1,6 +1,6 @@
 {
     "albumOutputTemplate": "Output template (albums)",
-    "alwaysOverwrite": "Overwrite existing files",
+    "alwaysOverwrite": "Overwrite downloaded files",
     "artist": "Artist",
     "audioQuality": "Audio Quality",
     "cancel": "Cancel",
@@ -13,15 +13,18 @@
     "cut": "cut",
     "debugMode": "Debug Mode",
     "detailsModalTitle": "Edit media details",
-    "discographyDownload": "Discography download (experimental)",
+    "discographyDownload": "Discography download",
     "done": "Done",
     "download": "Download",
     "downloadAll": "Download All",
+    "downloadedPlaylistsCount": "Downloaded playlists: {{num}}",
+    "downloadedTracksCount": "Downloaded tracks: {{num}}",
     "downloadFailed": "Download Failed",
     "downloading": "Downloading",
     "downloadPlaylist": "Download Playlist",
     "duration": "Duration",
     "edit": "Edit",
+    "errors": "Errors",
     "exceptionGetYoutubeUrls": "GetYoutubeUrls: Error",
     "exceptionGetYoutubeUrlsText": "Error occured while loading resources from youtube",
     "exceptionTimeout": "Timeout error",
@@ -29,9 +32,9 @@
     "extractingAudio": "Extracting Audio",
     "findFileInSystem": "Reveal in file explorer",
     "format": "Format",
-    "formatScope": "Selected format scope",
+    "formatScope": "Download parameters scope",
     "formatScopeGlobal": "Global",
-    "formatScopeTab": "Per Tab",
+    "formatScopeTab": "Different for each tab",
     "from": "from",
     "invalidTemplateKeys": "Invalid template keys: {{invalidKeys}}",
     "langName": "English",
@@ -40,6 +43,9 @@
     "mediaType": "Type",
     "merging": "merging",
     "missingMediaInfoError": "Missing media info",
+    "modeDark": "Dark",
+    "modeLight": "Light",
+    "modeSystem": "System",
     "ok": "OK",
     "openInBrowser": "Open in browser",
     "openOutputDirectory": "Reveal directory in system",
@@ -57,8 +63,11 @@
     "themeMode": "Theme Mode",
     "title": "Title",
     "to": "to",
+    "totalPlaylistsCount": "Total playlists: {{num}}",
+    "totalTracksCount": "Total tracks: {{num}}",
     "trackOutputTemplate": "Output template (audio tracks)",
     "tracks": "Tracks",
     "videoOutputTemplate": "Output template (videos)",
+    "warnings": "Warnings",
     "youtubeUrl": "YouTube URL"
 }

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

@@ -65,8 +65,8 @@
     "formatScopeHeader": "Zakres formatu",
     "formatScopeContent": [
         "Określ zakres formatu wybranego dla pobrań.",
-        "Jeśli zakres to `globalny`, wybrany format zostanie zastosowany do wszystkich pobieranych plików po rozpoczęciu pobierania.",
-        "Jeśli zakres to `per karta`, możesz określić inny format dla każdej karty, tak aby powiązane pobrania miały różne formaty wyjściowe."
+        "Jeśli zaznaczono `Globalny`, wybrany format zostanie zastosowany do wszystkich pobieranych plików po rozpoczęciu pobierania.",
+        "Jeśli zaznaczono `Oddzielny dla każdej zakładki`, możesz określić inny format dla każdej karty, tak aby powiązane pobrania miały różne formaty wyjściowe."
     ],
     "alwaysOverwriteHeader": "Nadpisywanie plików",
     "alwaysOverwriteContent": "Określa, czy istniejące pobrane pliki są nadpisywane.\nJeśli wyłączone, pobieranie nie zostanie wykonane, gdy powiązany plik już istnieje.",
@@ -116,5 +116,19 @@
     "allTracksHeader": "Utwory",
     "allTracksContent": "Liczba wszystkich wczytanych utworów.",
     "grabbedTracksHeader": "Pobrane utwory",
-    "grabbedTracksContent": "Liczba pobranych utworów."
+    "grabbedTracksContent": "Liczba pobranych utworów.",
+    "logMenuHeader": "Błędy i ostrzeżenia",
+    "logMenuContent": "Wyświetla błędy i ostrzeżenia związane z procesem pobierania.",
+    "downloadFailedHeader": "Pobierz niuedane",
+    "downloadFailedContent": "Próbuje ponownie pobrać nieudane elementy.",
+    "cancellAllHeader": "Anuluj wszystkie pobierania",
+    "cancellAllContent": "Anuluj wszystkie aktywne i oczekujące pobrania.",
+    "cancelDownloadPlaylistHeader": "Anuluj pobieranie playlisty",
+    "cancelDownloadPlaylistContent": "Anuluj wszystkie aktywne i oczekujące pobrania związane z tą playlistą.",
+    "cancelDownloadTrackHeader": "Anuluj pobieranie utworu",
+    "cancelDownloadTrackContent": "Anuluj pobieranie utworu.",
+    "findInFileSystemHeader": "Znajdź plik",
+    "findInFileSystemContent": "Znajdź powiązany plik w systemie plików.",
+    "openOutputDirectoryHeader": "Otwórz katalog wyjściowy",
+    "openOutputDirectoryContent": "Otwiera katalog wyjściowy w eksploratorze plików."
 }

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

@@ -1,6 +1,6 @@
 {
     "albumOutputTemplate": "Szablon wyjściowy (albumy)",
-    "alwaysOverwrite": "Nadpisuj istniejące pliki",
+    "alwaysOverwrite": "Nadpisuj pobrane pliki",
     "artist": "Wykonawca",
     "audioQuality": "Jakość audio",
     "cancel": "Anuluj",
@@ -13,15 +13,18 @@
     "cut": "przytnij",
     "debugMode": "Tryb debugowania",
     "detailsModalTitle": "Edycja danych",
-    "discographyDownload": "Pobieranie dyskografii (eksperymentalnie)",
+    "discographyDownload": "Pobieranie dyskografii",
     "done": "Gotowe",
     "download": "Pobierz",
     "downloadAll": "Pobierz wszystko",
+    "downloadedPlaylistsCount": "Pobrane playlisty: {{num}}",
+    "downloadedTracksCount": "Pobrane utwory: {{num}}",
     "downloadFailed": "Pobierz błędne",
     "downloading": "Pobieranie",
     "downloadPlaylist": "Pobierz playlistę",
     "duration": "Czas trwania",
     "edit": "Edytuj",
+    "errors": "Błędy",
     "exceptionGetYoutubeUrls": "GetYoutubeUrls: Błąd",
     "exceptionGetYoutubeUrlsText": "Wystąpił błąd podczas wczytywania danych z YouTube",
     "exceptionTimeout": "Błąd czasu oczekiwania",
@@ -29,7 +32,7 @@
     "extractingAudio": "Wyodrębnianie dźwięku",
     "findFileInSystem": "Pokaż w eksploratorze plików",
     "format": "Format",
-    "formatScope": "Zakres wybranego formatu",
+    "formatScope": "Zakres parametrów pobierania",
     "formatScopeGlobal": "Globalny",
     "formatScopeTab": "Oddzielny dla każdej zakładki",
     "from": "start",
@@ -40,6 +43,9 @@
     "mediaType": "Typ",
     "merging": "Łączenie",
     "missingMediaInfoError": "Metadane są niekompletne",
+    "modeDark": "Ciemny",
+    "modeLight": "Jasny",
+    "modeSystem": "Systemowy",
     "ok": "OK",
     "openInBrowser": "Otwórz w przeglądarce",
     "openOutputDirectory": "Pokaż katalog w systemie",
@@ -57,8 +63,11 @@
     "themeMode": "Tryb motywu",
     "title": "Tytuł",
     "to": "koniec",
+    "totalPlaylistsCount": "Dostępne playlisty: {{num}}",
+    "totalTracksCount": "Dostepne utwory: {{num}}",
     "trackOutputTemplate": "Szablon wyjściowy (pliki audio)",
     "tracks": "Ścieżki",
     "videoOutputTemplate": "Szablon wyjściowy (pliki wideo)",
+    "warnings": "Ostrzeżenia",
     "youtubeUrl": "YouTube URL"
 }

package/src/views/home/HomeView.tsx

@@ -11,11 +11,14 @@ import _isArray from "lodash/isArray";
 import _isEmpty from "lodash/isEmpty";
 import _isNaN from "lodash/isNaN";
 import _isNil from "lodash/isNil";
+import _join from "lodash/join";
 import _map from "lodash/map";
 import _min from "lodash/min";
 import _size from "lodash/size";
 import _some from "lodash/some";
+import _split from "lodash/split";
 import _times from "lodash/times";
+import _trim from "lodash/trim";
 import _uniq from "lodash/uniq";
 import path from "path";
 import {LaunchOptions} from "puppeteer";
@@ -25,7 +28,6 @@ import {useDebounceValue} from "usehooks-ts";
 import YTDlpWrap, {Progress as YtDlpProgress} from "yt-dlp-wrap";
 
 import {Alert, Box, Grid} from "@mui/material";
-import {BusyLight} from "@pureit/busylight";
 
 import {getBinPath} from "../../common/FileSystem";
 import {getAlbumInfo} from "../../common/Formatters";
@@ -50,7 +52,25 @@ const abortControllers: {[key: string]: AbortController} = {};
 
 export const HomeView: React.FC = () => {
     const [appOptions, setAppOptions] = useState<ApplicationOptions>(global.store.get("application"));
-    const {operation, playlists, tracks, trackStatus, trackCuts, formats, autoDownload, queue, setOperation, setPlaylists, setTracks, setTrackStatus, setAutoDownload, setQueue, clear} = useDataState();
+    const {
+        operation,
+        playlists,
+        tracks,
+        trackStatus,
+        trackCuts,
+        formats,
+        autoDownload,
+        queue,
+        setOperation,
+        setPlaylists,
+        setTracks,
+        setTrackStatus,
+        setAutoDownload,
+        setQueue,
+        setErrors,
+        setWarnings,
+        clear
+    } = useDataState();
     const {state, actions} = useAppContext();
     const [error, setError] = useState(false);
     const [abort, setAbort] = useState<string>();
@@ -105,13 +125,6 @@ export const HomeView: React.FC = () => {
 
 
     useEffect(() => {
-        const devices = BusyLight.devices();
-        const light = new BusyLight(devices[0]);
-        light.connect();
-        
-
-        // light.blink("#000044", 5, 2);
-        light.alert(2, 1, "#ff0000", true, 5, 3);
         ipcRenderer.on("get-youtube-urls-progress", onGetYoutubeUrlsCompleted);
 
         return () => {
@@ -142,11 +155,19 @@ export const HomeView: React.FC = () => {
         setAppOptions((prev) => ({...prev, urls}));
     };
 
-    const update = (item: YoutubeInfoResult) => {       
-        if (item.error) return;
+    const update = (item: YoutubeInfoResult) => {
+        if (!_isEmpty(item.warnings)) {
+            setWarnings((prev) => [...prev, {url: item.url, message: _join(item.warnings, "\n")}]);
+        }
+
+        if (!_isEmpty(item.errors)) {
+            setErrors((prev) => [...prev, {url: item.url, message: _join(item.errors, "\n")}]);
+        }
 
-        setTracks((prev) => [...prev, ...item.value]);
-        setPlaylists((prev) => [...prev, {url: item.url, album: getAlbumInfo(item.value, item.url), tracks: item.value}]);
+        if (item.value) {
+            setTracks((prev) => [...prev, ...item.value]);
+            setPlaylists((prev) => [...prev, {url: item.url, album: getAlbumInfo(item.value, item.url), tracks: item.value}]);
+        }
     };
 
     const loadInfo = (urls: string[]) => {        
@@ -205,18 +226,19 @@ export const HomeView: React.FC = () => {
             return resolveMockData(300);
         } else {
             return _map(urls, (url) => new Promise<YoutubeInfoResult>((resolve) => {
-                ytDlpWrap.getVideoInfo(url)
+                ytDlpWrap.execPromise([url, "--dump-json", "--no-check-certificate", "--geo-bypass"])
                     .then((result) => {
-                        resolve({url, value: _isArray(result) ? result : [result]});
+                        const parsed = _map(_split(_trim(result), "\n"), (item) => JSON.parse(item));
+                        
+                        resolve({url, value: _isArray(parsed) ? parsed : [parsed]});
                     })
                     .catch((e) => {
-                        const authErrRegex = /ERROR: \[youtube\].*Sign in to confirm your age/gm;
-
-                        if (authErrRegex.test(e.message)) {
-                            return resolve({url, error: "Age restriction detected. Sign in required."}); 
-                        }
+                        const warningRegex = /WARNING:\s([\s\S]*?)(?=ERROR|WARNING|$)/gm;
+                        const errorRegex = /ERROR:\s([\s\S]*?)(?=ERROR|WARNING|$)/gm;
+                        const warningMatches = e.message.match(warningRegex) ?? [];
+                        const errorMatches = e.message.match(errorRegex) ?? [];
                         
-                        resolve({url, error: e.message}); 
+                        resolve({url, errors: _uniq(errorMatches), warnings: _uniq(warningMatches)}); 
                     });
             }));
         }

package/src/@types/busylight.d.ts

@@ -1 +0,0 @@
-declare module "@pureit/busylight";