yt-grabber 1.8.6 → 1.8.8

package/README.md

@@ -28,8 +28,10 @@ Each download can be customized to your needs for easy workflow automation.
 - [Running](#running)
 - [Packaging](#packaging)
 - [Testing](#testing)
+- [Debugging](#debugging)
 - [License](#license)
 - [Legal Disclaimer](#legal-disclaimer)
+- [Support Disclaimer](#support-disclaimer)
 
 
 ## Features
@@ -111,6 +113,12 @@ To execute unit tests run `npm test` or `yarn test` command (unit tests are also
 
 To execute end2end tests run `npm playwright test` or `yarn playwright test` command.
 
+## Debugging
+
+Logs are written to `init.log` and `application.log` files.
+By default only errors are logged.
+To get more detailed logs run the application with `--debug-mode` arguments.
+
 ## License
 
 This project is licensed under the [MIT License](LICENSE).
@@ -118,3 +126,9 @@ This project is licensed under the [MIT License](LICENSE).
 ## Legal Disclaimer
 
 All music files downloaded through this software must be legally owned and purchased by the user. By downloading music via this software, you represent that you have purchased and fully own the rights to any downloaded content or an active subscription to YouTube Music. Downloading or distributing pirated or illegal music copies is strictly prohibited. I claim no ownership rights to any downloaded music files - all such rights remain with the content owner. I accept no liability for the illegal use of any files downloaded through this software.
+
+## Support Disclaimer
+
+In the era of greedy services like Spotify, omnipresent AI slop and other bs it is very difficult, especially for younger, less recognizable creators to make money off of their creations. There are a lot of talented people who struggle with that (and their number is growing).
+If you like certain artists and value their content please show them your support.
+Thank You!

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "yt-grabber",
-  "version": "1.8.6",
+  "version": "1.8.8",
   "description": "Youtube Grabber - robust desktop application designed to retrieve multimedia from YouTube and YouTube Music services",
   "keywords": [
     "youtube",
@@ -121,6 +121,7 @@
     "react-router-dom": "^7.9.4",
     "usehooks-ts": "^3.1.1",
     "win-version-info": "^6.0.1",
+    "winston": "^3.18.3",
     "yt-dlp-wrap": "^2.3.12"
   },
   "devDependencies": {

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

@@ -1,10 +1,11 @@
 import ElectronStore from "electron-store";
 
+import {ILogger} from "../common/Logger";
 import {IStore} from "../common/Store";
 
 declare global {
     var store: ElectronStore<IStore>;
-
+    var logger: ILogger;
     interface Global {
     [key: string]: any;
   }

package/src/common/Helpers.ts

@@ -1,4 +1,6 @@
-import {groupBy, includes, indexOf, isNumber, keys, map, replace} from "lodash-es";
+import {App} from "electron";
+import {forEach, groupBy, includes, indexOf, isNumber, keys, map, replace} from "lodash-es";
+import moment from "moment";
 
 import {VideoType} from "./Media";
 import {TrackInfo, UrlType, YoutubeInfoResult} from "./Youtube";
@@ -11,6 +13,65 @@ type NonDataAttributes<T> = Omit<T, keyof DataAttributes<T>>;
 
 export const isDev = () => process.env.NODE_ENV === "development";
 
+export const isDevApplication = (app: App) => !app.isPackaged;
+
+export const isDebugMode = () => {
+    const args = getProcessArgs();
+    
+    return args["debug-mode"] === true;
+};
+
+export const getProcessArgs = () => {
+    const args = process.argv.slice(1);
+    const filteredArgs: Record<string, string | boolean> = {};
+    
+    forEach(args, (arg) => {
+        if (arg.startsWith("--")) {
+            const argWithoutPrefix = arg.slice(2);
+            const [key, value] = argWithoutPrefix.split("=");
+            
+            filteredArgs[key] = value !== undefined ? value : true;
+        }
+    });
+
+    return filteredArgs;
+};
+
+export const formatTime = (value: string) => {
+    const formatted = moment.duration(value, "seconds").format("HH:mm:ss", {trim: "left"});
+    const onlyTwoDigitsRegex = /^\d{2}$/;
+    
+    if (onlyTwoDigitsRegex.test(formatted)) {
+        return `00:${formatted}`;
+    }
+
+    return formatted;
+};
+
+export const unformatTime = (value: string) => {
+    const onlyTwoDigitsRegex = /^\d{2}$/;
+    const atLeastTwoColonsRegex = /^([^:]*:){2}/;
+
+    if (onlyTwoDigitsRegex.test(value)) {
+        return moment.duration(`00:00:${value}`).asSeconds() + "";
+    }
+    if (atLeastTwoColonsRegex.test(value)) {
+        return moment.duration(`${value}`).asSeconds() + "";
+    }
+
+    return moment.duration(`00:${value}`).asSeconds() + "";
+};
+
+export const timeStringToNumber = (value: string) => {
+    const atLeastTwoColonsRegex = /^([^:]*:){2}/;
+
+    if (atLeastTwoColonsRegex.test(value)) {
+        return moment.duration(`${value}`).asSeconds();
+    }
+
+    return moment.duration(`00:${value}`).asSeconds();
+};
+
 export const formatFileSize = (sizeInBytes: number, decimals = 2) => {
     if (!isNumber(sizeInBytes)) return "";
     if (sizeInBytes === 0) return "0 Bytes";

package/src/common/Logger.ts

@@ -0,0 +1,73 @@
+import {
+    createLogger as createWinston, format, LeveledLogMethod, Logger, LoggerOptions, transport,
+    transports
+} from "winston";
+
+export interface ILoggerOptions extends LoggerOptions {
+    logFile?: boolean;
+    logFilePath?: string;
+};
+
+export interface ILogger extends Logger {
+    success: LeveledLogMethod;
+};
+
+const levels = {
+    error: 0,
+    warn: 1,
+    success: 1,
+    info: 3,
+    verbose: 4,
+    debug: 5,
+};
+
+const colorizer = format.colorize({
+    colors: {
+        error: "red",
+        warn: "yellow",
+        success: "green",
+        info: "blue",
+        verbose: "grey",
+        debug: "magenta",
+    },
+});
+
+const timeFormat = format.timestamp({format: "HH:mm:ss:SSS"});
+const fileFormat = format.printf(({level, message, timestamp, ...meta}) => {
+    const metaString = Object.keys(meta).length ? ` ${JSON.stringify(meta)}` : "";
+    
+    return `${timestamp} [${level.toUpperCase()}]: ${message} ${metaString}`;
+});
+const consoleFormat = format.printf(({level, message, timestamp, ...meta}) => {
+    const metaString = Object.keys(meta).length ? ` ${JSON.stringify(meta)}` : "";
+    const symbols = Object.getOwnPropertySymbols(meta);
+    const splatSymbol = symbols.find(sym => sym.description === "splat");
+
+    if (splatSymbol && typeof message === "string") {
+        const splat = meta[splatSymbol] as any[];
+
+        for (const item of splat) {
+            message = (message as string).replace(item, (match) => colorizer.colorize("verbose", match));
+        }
+    }
+    
+    return `${timestamp} [${colorizer.colorize(level, level.toUpperCase())}]: ${message}${colorizer.colorize("verbose", metaString)}`;
+});
+
+export const createLogger = (options: ILoggerOptions): ILogger => {
+    const {level = "error", logFile, logFilePath = "log.log"} = options;
+    const transportsArray: transport[] = [
+        new transports.Console({format: format.combine(format.splat(), timeFormat, consoleFormat), level})
+    ];
+
+    if (logFile) {
+        transportsArray.push(new transports.File({filename: logFilePath, level, format: format.combine(format.splat(), timeFormat, fileFormat)}));
+    }
+
+    return createWinston({
+        level,
+        levels,
+        format: format.combine(timeFormat, format.json()),
+        transports: transportsArray,
+    }) as ILogger;
+};

package/src/common/YtdplUtils.ts

@@ -69,7 +69,7 @@ const getPostProcessorArgs = (track: TrackInfo, album: AlbumInfo) => {
         const title = track.title.replace(/"/g, "\\\"");
         const artist = album.artist.replace(/"/g, "\\\"");
         const albumTitle = album.title.replace(/"/g, "\\\"");
-        return getCutsPostProcessorArgs() + `-metadata title="${title}" -metadata artist="${artist}" -metadata album="${albumTitle}" -metadata track="${track.playlist_autonumber}" -metadata date="${album.releaseYear}" -metadata release_year="${album.releaseYear}"`;
+        return getCutsPostProcessorArgs() + `-metadata title="${title}" -metadata artist="${artist}" -metadata album="${albumTitle}" -metadata track="${track.playlist_autonumber}/${album.tracksNumber}" -metadata date="${album.releaseYear}" -metadata release_year="${album.releaseYear}"`;
     }
 
     return getCutsPostProcessorArgs() + `-metadata title="${track.title}"`;

package/src/components/languagePicker/LanguagePicker.tsx

@@ -1,5 +1,5 @@
 import classnames from "classnames";
-import $_ from "lodash";
+import {defaultTo, get, isEqual, map, without} from "lodash-es";
 import moment from "moment";
 import path from "path";
 import React, {HTMLAttributes, useState} from "react";
@@ -38,9 +38,9 @@ export const LanguagePicker = (props: LanguagePickerProps) => {
     const { i18n } = useTranslation();
     const [loading, setLoading] = useState(false);
     const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
-    const langs = $_.get(i18n, "options.supportedLngs");
-    const availableLocales: string[] = !langs ? [] : $_.without(langs, "cimode").sort();
-    const displayMode = $_.defaultTo(
+    const langs = get(i18n, "options.supportedLngs");
+    const availableLocales: string[] = !langs ? [] : without(langs, "cimode").sort();
+    const displayMode = defaultTo(
         mode,
         useMediaQuery((theme: Theme) => theme.breakpoints.down("md"))
             ? ComponentDisplayMode.Minimal
@@ -58,7 +58,7 @@ export const LanguagePicker = (props: LanguagePickerProps) => {
     const onTriggerClick = (event: React.MouseEvent<HTMLButtonElement>) => setAnchorEl(event.currentTarget);
 
     const onItemClick = async (lang: string) => {
-        if (!$_.isEqual(lang, i18n.language)) {
+        if (!isEqual(lang, i18n.language)) {
             setLoading(true);
             i18n.changeLanguage(lang, () => setLoading(false));
             moment.locale(lang);
@@ -81,7 +81,7 @@ export const LanguagePicker = (props: LanguagePickerProps) => {
                     open={Boolean(anchorEl)}
                     onClose={onClose}
                 >
-                    {$_.map(availableLocales, (item) => (
+                    {map(availableLocales, (item) => (
                         <LanguagePickerItem
                             key={item}
                             lang={item}

package/src/components/modals/cutModal/CutModal.styl

@@ -0,0 +1,21 @@
+@import "../../../styles/mixins.styl"
+
+.cut-modal {
+    .content {
+        justify-content: flex-start;
+
+        .add-button {
+            min-width: 0;
+        }
+
+        .delete-button {
+            min-width: 0;
+        }
+
+        .entry-content {
+            width: 100%;
+            justify-content: center;
+            align-items: center;
+        }
+    }
+}

package/src/components/modals/cutModal/CutModal.tsx

@@ -0,0 +1,200 @@
+import {filter, isEmpty, last, map, some, uniqueId} from "lodash-es";
+import React, {KeyboardEvent, useState} from "react";
+import {useTranslation} from "react-i18next";
+import {NumberFormatBase} from "react-number-format";
+
+import AddIcon from "@mui/icons-material/Add";
+import DeleteForeverIcon from "@mui/icons-material/DeleteForever";
+import {
+    Avatar, Grid, IconButton, List, ListItem, ListItemAvatar, ListItemText, Stack, TextField,
+    useTheme
+} from "@mui/material";
+import Button from "@mui/material/Button";
+import Dialog from "@mui/material/Dialog";
+import DialogActions from "@mui/material/DialogActions";
+import DialogContent from "@mui/material/DialogContent";
+import DialogTitle from "@mui/material/DialogTitle";
+
+import {formatTime, timeStringToNumber, unformatTime} from "../../../common/Helpers";
+import Styles from "./CutModal.styl";
+
+export type TrackCut = {
+    id: string;
+    title: string;
+    startTime: number;
+    endTime: number;
+};
+
+export type CutModalProps = {
+    id: string;
+    duration: number;
+    open?: boolean;
+    onClose?: (data: TrackCut[]) => void;
+    onCancel?: () => void;
+};
+
+export const CutModal: React.FC<CutModalProps> = (props: CutModalProps) => {
+    const {onClose, onCancel, duration, open, ...other} = props;
+    const {t} = useTranslation();
+    const theme = useTheme();
+    const [entries, setEntries] = useState<TrackCut[]>([
+        {
+            id: uniqueId(),
+            title: "",
+            startTime: 0,
+            endTime: duration,
+        }
+    ]);
+
+    const onCutStartTimeChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        const id = event.target.dataset.id;
+        
+        setEntries((prev) => map(prev, (entry) => {
+            if (entry.id === id) {
+                return {...entry, startTime: timeStringToNumber(event.target.value)};
+            }
+
+            return entry;
+        }));
+    };
+
+    const onCutEndTimeChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        const id = event.target.dataset.id;
+        
+        setEntries((prev) => map(prev, (entry) => {
+            if (entry.id === id) {
+                return {...entry, endTime: timeStringToNumber(event.target.value)};
+            }
+
+            return entry;
+        }));
+    };
+
+    const onAddClick = () => {
+        setEntries((prev) => {
+            const lastEntry = last(prev);
+            const updated = [...prev, {
+                id: uniqueId(),
+                title: "",
+                startTime: lastEntry ? lastEntry.endTime + 1 : 0,
+                endTime: duration,
+            }];
+
+            return updated;
+        });
+    };
+
+    const onTitleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        const id = event.target.dataset.id;
+        
+        setEntries((prev) => map(prev, (entry) => {
+            if (entry.id === id) {
+                return {...entry, title: event.target.value};
+            }
+
+            return entry;
+        }));
+    };
+
+    const onDeleteClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+        const id = event.currentTarget.dataset.id;
+
+        setEntries((prev) => filter(prev, (entry) => entry.id !== id));
+    };
+
+    const handleClose = () => {
+        if (onClose) {
+            onClose(entries);
+        }
+    };
+
+    const handleCancel = () => {
+        if (onCancel) {
+            onCancel();
+        }
+    };
+
+    const handleKeyUp = (e: KeyboardEvent) => {
+        if (e.key === "Enter") {
+            onClose(entries);
+        }
+    };
+
+    return (
+        <Dialog
+            open={open}
+            disablePortal
+            onClose={handleCancel}
+            fullWidth
+            maxWidth="md"
+            className={Styles.cutModal}
+            onKeyUp={handleKeyUp}
+            {...other}
+        >
+            <DialogTitle textAlign="center">{t("cutModalTitle")}</DialogTitle>
+            <DialogContent dividers className={Styles.content}>
+                <Grid container display="flex" justifyItems="flex-end">
+                    <Grid size={12}>
+                        <List>
+                            {map(entries, (entry, index) => <ListItem sx={{paddingX: 0}} divider key={entry.id}>
+                                <ListItemAvatar><Avatar variant="circular" sx={{bgcolor: theme.palette.text.secondary}}>{index + 1}</Avatar></ListItemAvatar>
+                                <ListItemText disableTypography>
+                                    <Stack direction="row" spacing={2} className={Styles.entryContent}>
+                                        <NumberFormatBase
+                                            slotProps={{
+                                                htmlInput: {"data-id": entry.id}
+                                            }}
+                                            value={entry.startTime}
+                                            onChange={onCutStartTimeChange}
+                                            format={formatTime}
+                                            removeFormatting={unformatTime}
+                                            customInput={TextField}
+                                            variant="outlined"
+                                            label={t("from")}
+                                        />
+                                        <NumberFormatBase
+                                            slotProps={{
+                                                htmlInput: {"data-id": entry.id}
+                                            }}
+                                            value={entry.endTime}
+                                            onChange={onCutEndTimeChange}
+                                            format={formatTime}
+                                            removeFormatting={unformatTime}
+                                            customInput={TextField}
+                                            variant="outlined"
+                                            label={t("to")}
+                                        />
+                                        <TextField
+                                            data-id={entry.id}
+                                            value={entry.title}
+                                            fullWidth
+                                            variant="outlined"
+                                            label={t("title")}
+                                            onChange={onTitleChange}
+                                            slotProps={{
+                                                htmlInput: {"data-id": entry.id}
+                                            }}
+                                        />
+                                        <IconButton className={Styles.deleteButton} data-id={entry.id} color="inherit" onClick={onDeleteClick}>
+                                            <DeleteForeverIcon />
+                                        </IconButton>
+                                    </Stack>
+                                </ListItemText>
+                            </ListItem>)}
+                        </List>
+                    </Grid>
+                    <Grid size={12} display="flex" justifyContent="center" alignItems="stretch">
+                        <Button startIcon={<AddIcon />} className={Styles.addButton} variant="contained" disableElevation color="secondary" onClick={onAddClick}>{t("add")}</Button>
+                    </Grid>
+                </Grid>
+            </DialogContent>
+            <DialogActions sx={{justifyContent: "end"}}>
+                <Button disabled={some(entries, (entry) => isEmpty(entry.title))} variant="contained" disableElevation autoFocus color="secondary" onClick={handleClose}>
+                    {t("ok")}
+                </Button>
+            </DialogActions>
+        </Dialog>
+    );
+};
+
+export default CutModal;

package/src/components/numberField/NumberField.tsx

@@ -1,4 +1,4 @@
-import $_ from "lodash";
+import {defaultTo, isUndefined, max as _max, min as _min, toNumber} from "lodash-es";
 import React, {useEffect, useState} from "react";
 import {NumberFormatValues, NumericFormat, NumericFormatProps} from "react-number-format";
 import {useInterval} from "usehooks-ts";
@@ -53,7 +53,7 @@ export const NumberField = (props: INumberFieldProps) => {
         () => {
             if (decreasePressed) onDecreaseClick();
             if (increasePressed) onIncreaseClick();
-            setDelay($_.max([50, delay - 50]));
+            setDelay(_max([50, delay - 50]));
         },
         decreasePressed || increasePressed ? delay : null,
     );
@@ -63,15 +63,15 @@ export const NumberField = (props: INumberFieldProps) => {
     };
 
     const onDecreaseClick = () => {
-        const predicted = $_.toNumber(value) - $_.toNumber(step);
+        const predicted = toNumber(value) - toNumber(step);
 
-        setText(loop && predicted < min ? max : $_.max([predicted, min]));
+        setText(loop && predicted < min ? max : _max([predicted, min]));
     };
 
     const onIncreaseClick = () => {
-        const predicted = $_.toNumber(value) + $_.toNumber(step);
+        const predicted = toNumber(value) + toNumber(step);
         
-        setText(loop && predicted > max ? min : $_.min([predicted, max]));
+        setText(loop && predicted > max ? min : _min([predicted, max]));
     };
 
     const onDecreaseMouseDown = () => {
@@ -93,7 +93,7 @@ export const NumberField = (props: INumberFieldProps) => {
     };
 
     const isAllowed = (values: NumberFormatValues) => {        
-        if ($_.isUndefined(values.floatValue) && !allowEmpty) {
+        if (isUndefined(values.floatValue) && !allowEmpty) {
             return false;
         };
 
@@ -101,7 +101,7 @@ export const NumberField = (props: INumberFieldProps) => {
     };
 
     useEffect(() => {
-        const value = $_.toNumber(text) ?? 0;
+        const value = toNumber(text) ?? 0;
 
         if (onChange) {
             onChange(value);
@@ -146,7 +146,7 @@ export const NumberField = (props: INumberFieldProps) => {
                     label,
                     style: {textAlign: "center", width},
                 },
-                inputLabel: $_.defaultTo(inputLabelProps, {className: "upperfirst"})
+                inputLabel: defaultTo(inputLabelProps, {className: "upperfirst"})
             }}
             customInput={TextField}
             variant="outlined"
@@ -155,6 +155,7 @@ export const NumberField = (props: INumberFieldProps) => {
             decimalScale={decimalScale}
             fixedDecimalScale={fixedDecimalScale}
             isAllowed={isAllowed}
+            label={label}
             {...rest}
         />
     );

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

@@ -1,7 +1,9 @@
 import {
     compact, every, filter, isEmpty, isFunction, map, replace, truncate, uniq, without
 } from "lodash-es";
-import React, {ChangeEvent, useCallback, useEffect, useMemo, useRef, useState} from "react";
+import React, {
+    ChangeEvent, KeyboardEvent, useCallback, useEffect, useMemo, useRef, useState
+} from "react";
 import {useTranslation} from "react-i18next";
 import {useDebounceValue} from "usehooks-ts";
 
@@ -132,6 +134,12 @@ export const InputPanel: React.FC<InputPanelProps> = (props: InputPanelProps) =>
         event.target.value = "";
     };
 
+    const onTextFieldKeyUp = (event: KeyboardEvent<HTMLInputElement>) => {
+        if (event.key === "Enter" && event.ctrlKey) {
+            handleLoadInfo();
+        }
+    };
+
     const onShowAdvancedSearchOptionsChange = (e: React.SyntheticEvent<HTMLDivElement>, isExpanded: boolean) => {
         setApplicationOptions((prev) => ({...prev, showAdvancedSearchOptions: isExpanded}));
     };
@@ -229,6 +237,7 @@ export const InputPanel: React.FC<InputPanelProps> = (props: InputPanelProps) =>
                             variant="outlined"
                             label={getInputLabel()}
                             error={containsInvalidValues}
+                            onKeyUp={onTextFieldKeyUp}
                             slotProps={{
                                 input: {
                                     ...params.InputProps,

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

@@ -65,6 +65,11 @@
                 padding: 12px;
             }
 
+            .cut-track {
+                min-width: 12px;
+                padding: 12px;
+            }
+
             .remove {
                 min-width: 12px;
                 padding: 12px;

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

@@ -1,6 +1,6 @@
 import classnames from "classnames";
 import {ipcRenderer} from "electron";
-import {assign, includes, isFunction, pick, some} from "lodash-es";
+import {assign, cloneDeep, forEach, includes, isFunction, last, map, pick, some} from "lodash-es";
 import moment from "moment";
 import React, {useCallback, useState} from "react";
 import {useTranslation} from "react-i18next";
@@ -9,15 +9,17 @@ import AspectRatioIcon from "@mui/icons-material/AspectRatio";
 import CloseIcon from "@mui/icons-material/Close";
 import DownloadIcon from "@mui/icons-material/Download";
 import EditIcon from "@mui/icons-material/Edit";
+import FormatListNumberedIcon from "@mui/icons-material/FormatListNumbered";
 import LaunchIcon from "@mui/icons-material/Launch";
 import YouTubeIcon from "@mui/icons-material/YouTube";
 import {
     Box, Button, Card, CardContent, CardMedia, Grid, LinearProgress, Tooltip, Typography
 } from "@mui/material";
 
-import {AlbumInfo} from "../../../common/Youtube";
+import {AlbumInfo, PlaylistInfo} from "../../../common/Youtube";
 import {Messages} from "../../../messaging/Messages";
 import {useDataState} from "../../../react/contexts/DataContext";
+import CutModal, {TrackCut} from "../../modals/cutModal/CutModal";
 import DetailsModal from "../../modals/detailsModal/DetailsModal";
 import ImageModal from "../../modals/imageModal/ImageModal";
 import Progress from "../../progress/Progress";
@@ -25,6 +27,7 @@ import Styles from "./MediaInfoPanel.styl";
 
 export type MediaInfoPanelProps = {
     item?: AlbumInfo;
+    playlist?: PlaylistInfo;
     className?: string;
     loading?: boolean;
     progress?: number;
@@ -34,12 +37,14 @@ export type MediaInfoPanelProps = {
 }
 
 export const MediaInfoPanel: React.FC<MediaInfoPanelProps> = (props: MediaInfoPanelProps) => {
-    const {item, className, onCancel, onDownload, onOpenOutput, loading, progress = 0} = props;
-    const {trackStatus, queue} = useDataState();
+    const {item, playlist, className, onCancel, onDownload, onOpenOutput, loading, progress = 0} = props;
+    const {trackStatus, setPlaylists, setTrackCuts, queue} = useDataState();
     const [detailsModalOpen, setDetailsModalOpen] = useState(false);
+    const [cutTrackModalOpen, setCutTrackModalOpen] = useState(false);
     const [imageModalOpen, setImageModalOpen] = useState(false);
     const {t} = useTranslation();
     const [value, setValue] = useState(item);
+    const [tracksSeparated, setTracksSeparated] = useState<boolean>();
     
     const onDetailsModalClose = (data: AlbumInfo) => {
         setValue((prev) => assign(prev, data));
@@ -49,6 +54,52 @@ export const MediaInfoPanel: React.FC<MediaInfoPanelProps> = (props: MediaInfoPa
     const onImageModalClose = () => {
         setImageModalOpen(false);
     };
+    
+    const onCutTrackModalCancel = () => {
+        setCutTrackModalOpen(false);
+    };
+
+    const onCutTrackModalClose = (cuts: TrackCut[]) => {        
+        setPlaylists((prev) => {
+            const found = prev.find((p) => p.url === playlist.url);
+            const currentTrack = last(found.tracks);
+
+            return map(prev, (p) => {
+                if (p.url === playlist.url) {
+                    const newTracks = map(cuts, (cutTrack, index) => {
+                        const clonedTrack = cloneDeep(currentTrack);
+                        
+                        return assign({}, clonedTrack, {
+                            id: cutTrack.id,
+                            title: cutTrack.title,
+                            playlist: p.url,
+                            playlist_autonumber: index + 1,
+                            playlist_count: cuts.length,
+                        });
+                    });
+                    const updated = assign({}, found, {album: assign({}, found.album, {tracksNumber: cuts.length}), tracks: newTracks});
+
+                    return updated;
+                }
+
+                return p;
+            });
+        });
+
+        setTrackCuts((prev) => {
+            const newCuts: {[key: string]: [number, number][]} = {};
+            
+            forEach(cuts, (c) => {
+                newCuts[c.id] = [[c.startTime, c.endTime]];
+
+            });
+
+            return {...prev, ...newCuts};
+        });
+
+        setTracksSeparated(true);
+        setCutTrackModalOpen(false);
+    };
 
     const cancel = () => {
         if (isFunction(onCancel)) {
@@ -68,7 +119,11 @@ export const MediaInfoPanel: React.FC<MediaInfoPanelProps> = (props: MediaInfoPa
 
     const editInfo = useCallback(() => {
         setDetailsModalOpen(true);
-    }, [detailsModalOpen, setDetailsModalOpen]);
+    }, [cutTrackModalOpen, setCutTrackModalOpen]);
+
+    const cutTrack = useCallback(() => {
+        setCutTrackModalOpen(true);
+    }, [cutTrackModalOpen, setCutTrackModalOpen]);
 
     const showCoverImage = useCallback(() => {
         setImageModalOpen(true);
@@ -121,6 +176,11 @@ export const MediaInfoPanel: React.FC<MediaInfoPanelProps> = (props: MediaInfoPa
                                         <EditIcon />
                                     </Button>
                                 </Tooltip>
+                                {(tracksSeparated || playlist.tracks.length === 1) && <Tooltip title={t("cut")} arrow enterDelay={2000} leaveDelay={100} enterNextDelay={500} placement="top">
+                                    <Button data-help="cutTrack" className={Styles.cutTrack} size="large" fullWidth variant="contained" color="primary" disableElevation onClick={cutTrack}>
+                                        <FormatListNumberedIcon />
+                                    </Button>
+                                </Tooltip>}
                                 {some(trackStatus, (s) => s.completed) &&
                                     <Tooltip title={t("openOutputDirectory")} arrow enterDelay={2000} leaveDelay={100} enterNextDelay={500} placement="top">
                                         <Button data-help="openOutputDirectory" className={Styles.openOutput} size="large" fullWidth variant="contained" color="primary" disableElevation onClick={openOutputFolder}>
@@ -175,6 +235,13 @@ export const MediaInfoPanel: React.FC<MediaInfoPanelProps> = (props: MediaInfoPa
                 onClose={onImageModalClose}
                 title={value.title}
             />
+            <CutModal
+                id="cut-modal"
+                duration={value.duration}
+                open={cutTrackModalOpen}
+                onClose={onCutTrackModalClose}
+                onCancel={onCutTrackModalCancel}
+            />
         </>
     );
 };

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

@@ -220,6 +220,7 @@ export const PlaylistTabs: React.FC<PlaylistTabsProps> = (props: PlaylistTabsPro
                 {map(filter(playlists, (p) => !isEmpty(p.album)), (item) =>
                     <TabPanel className={Styles.tabPanel} value={item.url} key={item.url}>
                         <MediaInfoPanel
+                            playlist={item}
                             item={item.album}
                             loading={isPlaylistLoading(item.album.id)}
                             progress={getTotalProgress(item.album.id)}

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

@@ -21,7 +21,9 @@ import {
     Tooltip, Typography
 } from "@mui/material";
 
-import {formatFileSize} from "../../../common/Helpers";
+import {
+    formatFileSize, formatTime, timeStringToNumber, unformatTime
+} from "../../../common/Helpers";
 import {TrackInfo, TrackStatusInfo} from "../../../common/Youtube";
 import {useDataState} from "../../../react/contexts/DataContext";
 import DetailsModal from "../../modals/detailsModal/DetailsModal";
@@ -50,28 +52,6 @@ export const TrackList: React.FC<TrackListProps> = (props: TrackListProps) => {
         setValue(items ?? tracks);
     }, [items, tracks]);
 
-    const formatTime = (value: string) => {
-        const formatted = moment.duration(value, "seconds").format("HH:mm:ss", {trim: "left"});
-        
-        if (/^\d{2}$/.test(formatted)) {
-            return `00:${formatted}`;
-        }
-
-        return formatted;
-    };
-
-    const unformatTime = (value: string) => {
-        if (/^\d{2}$/.test(value)) {
-            return moment.duration(`00:00:${value}`).asSeconds() + "";
-        }
-
-        return moment.duration(`00:${value}`).asSeconds() + "";
-    };
-
-    const timeStringToNumber = (value: string) => {
-        return moment.duration(`00:${value}`).asSeconds();
-    };
-
     const sanitizeTrackCuts = (source: {[key: string]: [number, number][]}) => {
         forEach(source, (v, k) => {
             const track = find(value, ["id", k]);

package/src/hooks/useHelp.ts

@@ -40,7 +40,7 @@ const useHelp = () => {
                 try {
                     dest.style[key as any] = computedStyle.getPropertyValue(key);
                 } catch (error) {
-                    console.log(error);
+                    logger.error("Error copying style property '%s': %O", key, error);
                 }
             }
         };

package/src/index.ts

@@ -4,24 +4,32 @@ import electronReload from "electron-reload";
 import Store from "electron-store";
 import path from "path";
 
+import {isDebugMode, isDevApplication} from "./common/Helpers";
+import {createLogger} from "./common/Logger";
 import {MessagingService} from "./messaging/MessagingService";
 
-const isDev = () => !app.isPackaged;
+const logger = createLogger({
+    level: isDebugMode() ? "debug" : "error",
+    logFile: true,
+    logFilePath: "init.log",
+});
 
-if (isDev()) {
+if (isDevApplication(app)) {
     electronReload(__dirname, {
         electron: path.join(__dirname, "..", "node_modules", "electron", "dist", "electron.exe"),
         interval: 2000,
     });
-}
 
-/* Alternative reload using different electron binary */
+    /* Alternative reload using different electron binary */
 
-// require("electron-reload")(__dirname, {
-//     electron: path.join(__dirname, "..", "node_modules", ".bin", "electron.cmd"),
-//     hardReset: true,
-//     livenessThreshold: 2000,
-// });
+    // require("electron-reload")(__dirname, {
+    //     electron: path.join(__dirname, "..", "node_modules", ".bin", "electron.cmd"),
+    //     hardReset: true,
+    //     livenessThreshold: 2000,
+    // });
+
+    logger.debug("Electron reload initialized.");
+}
 
 let mainWindow: BrowserWindow | null;
 
@@ -41,9 +49,11 @@ const createWindow = async () => {
         },
     });
     mainWindow.loadFile(path.join(__dirname, "index.html"));
+    logger.debug("Main window created.");
 
-    if (isDev()) {
-        mainWindow.webContents.openDevTools({mode: "detach",});
+    if (isDevApplication(app)) {
+        mainWindow.webContents.openDevTools({mode: "detach"});
+        logger.debug("DevTools opened.");
     } else {
         mainWindow.removeMenu();
         mainWindow.setMenu(null);
@@ -51,9 +61,12 @@ const createWindow = async () => {
 
     mainWindow.on("closed", () => {
         mainWindow = null;
+        logger.debug("Main window closed.");
     });
     
+
     const messaggingService = new MessagingService(ipcMain, mainWindow);
+    logger.debug("Messaging service initialized.");
 };
 
 app.on("ready", createWindow);
@@ -77,9 +90,9 @@ app.on("before-quit", () => {
 });
 
 app.whenReady().then(() => {
-    if (isDev()) {
+    if (isDevApplication(app)) {
         installExtension(REACT_DEVELOPER_TOOLS)
-            .then((name) => console.log(`Added Extension:  ${name}`))
-            .catch((err) => console.log("An error occurred: ", err));
+            .then((name) => logger.debug("Added extension: %s", name))
+            .catch((err) => logger.error("An error occurred: %s", err));
     }
 });

package/src/renderer.tsx

@@ -3,11 +3,22 @@ import * as React from "react";
 import * as ReactDOM from "react-dom/client";
 
 import {Bootstrap} from "./bootstrap";
+import {getProcessArgs} from "./common/Helpers";
+import {createLogger} from "./common/Logger";
 import schema from "./common/Store";
 
+const args = getProcessArgs();
+
+global.logger = createLogger({
+    level: args["debug"] ? "debug" : "error",
+    logFile: true,
+    logFilePath: "application.log",
+});
 global.store = new Store({ schema, clearInvalidConfig: true });
+logger.debug("Electron store initialized.");
 
 const container = document.getElementById("root");
 const root = ReactDOM.createRoot(container!);
 
 root.render(React.createElement(Bootstrap));
+logger.debug("Application rendered.");

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

@@ -1,4 +1,5 @@
 {
+    "add": "Hinzufügen",
     "albumOrAlbums": "Albumname/Albumnamen",
     "albumOutputTemplate": "Ausgabenvorlage (Alben)",
     "albums": "Alben",
@@ -18,6 +19,7 @@
     "convertingOutput": "Ausgabedatei konvertieren",
     "customYtdlpArgs": "Benutzerdefinierte Argumente für yt-dlp",
     "cut": "Schneiden",
+    "cutModalTitle": "Track Extraktion",
     "debugMode": "Debug-Modus",
     "default": "Default",
     "detailsModalTitle": "Mediendetails bearbeiten",

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

@@ -1,4 +1,5 @@
 {
+    "add": "Add",
     "albumOrAlbums": "Album/albums",
     "albumOutputTemplate": "Output template (albums)",
     "albums": "Albums",
@@ -18,6 +19,7 @@
     "convertingOutput": "Converting output",
     "customYtdlpArgs": "Custom arguments for yt-dlp",
     "cut": "Cut",
+    "cutModalTitle": "Track Extraction",
     "debugMode": "Debug Mode",
     "default": "Default",
     "detailsModalTitle": "Edit media details",

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

@@ -1,4 +1,5 @@
 {
+    "add": "Dodaj",
     "albumOrAlbums": "Nazwa lub nazwy albumów",
     "albumOutputTemplate": "Szablon wyjściowy (albumy)",
     "albums": "Albumy",
@@ -18,6 +19,7 @@
     "convertingOutput": "Konwertowanie pliku",
     "customYtdlpArgs": "Dodatkowe argumenty dla yt-dlp",
     "cut": "Przytnij",
+    "cutModalTitle": "Wyodrębnianie ścieżek",
     "debugMode": "Tryb debugowania",
     "default": "Domyślna",
     "detailsModalTitle": "Edycja danych",

package/src/styles/MaterialThemes.ts

@@ -1,4 +1,4 @@
-import $_ from "lodash";
+import {assign, get} from "lodash-es";
 
 import {Theme} from "@mui/material";
 import {grey} from "@mui/material/colors";
@@ -325,5 +325,5 @@ const themes: Record<string, Partial<Theme | any>> = {
 export const getThemeDefinition = (name: string, mode: "light" | "dark") => {
     const theme = themes[name];
 
-    return $_.assign({}, theme, { palette: $_.get(theme, `palette.${mode}`) });
+    return assign({}, theme, { palette: get(theme, `palette.${mode}`) });
 };