yt-grabber 1.8.7 → 1.8.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "yt-grabber",
-  "version": "1.8.7",
+  "version": "1.8.8",
   "description": "Youtube Grabber - robust desktop application designed to retrieve multimedia from YouTube and YouTube Music services",
   "keywords": [
     "youtube",

package/src/common/Helpers.ts

@@ -1,5 +1,6 @@
 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";
@@ -36,6 +37,41 @@ export const getProcessArgs = () => {
     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/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/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

@@ -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/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",