yt-grabber 1.0.0

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

@@ -0,0 +1,80 @@
+@import "../../../styles/mixins.styl"
+
+.media-info-panel {
+    .header {
+        display: flex;
+
+        .content {
+            display: flex;
+            flex-direction: row;
+            flex-grow: 1;
+            position: relative;
+            z-index: 1;
+        }
+        
+        .info {
+            flex: 1 0 auto;
+            padding: .2rem .5rem;
+        }
+
+        .actions {
+            display: flex;
+            align-items: center;
+            flex-direction: row;
+            opacity: 0;
+            vendor("transition", all .25s ease-in-out)
+
+            .edit {
+                min-width: 12px;
+                padding: 12px;
+            }
+        }
+        
+        .loading {
+            z-index: 1;
+            align-items: center;
+            column-gap: 2rem;
+        }
+        
+        .progress-indicator {
+            display: flex;
+            align-items: center;
+            flex-direction: row;
+        }
+
+        .progress {
+            display: flex;
+            align-items: center;
+            flex-direction: row;
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            z-index: 0;
+            opacity: 0.25;
+
+            .progress-bar {
+                width: 100%;
+                height: 100%;
+            }
+        }
+
+        .row {
+            display: flex;
+
+            .label {
+                padding-right: .3rem;
+                capitalize();
+
+                & .bold {
+                    font-weight: bold;
+                }
+            }
+        }
+    }
+
+    &:hover {
+        .actions {
+            opacity: 1;
+        }
+    }
+}

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

@@ -0,0 +1,113 @@
+import classnames from "classnames";
+import _assign from "lodash/assign";
+import _isFunction from "lodash/isFunction";
+import moment from "moment";
+import React, {useCallback, useState} from "react";
+import {useTranslation} from "react-i18next";
+
+import CloseIcon from "@mui/icons-material/Close";
+import EditIcon from "@mui/icons-material/Edit";
+import {Box, Button, Card, CardContent, CardMedia, LinearProgress, Typography} from "@mui/material";
+import Grid from "@mui/material/Grid2";
+
+import {AlbumInfo} from "../../../common/Youtube";
+import {useDataState} from "../../../react/contexts/DataContext";
+import DetailsModal from "../../modals/DetailsModal";
+import Progress from "../../progress/Progress";
+import Styles from "./MediaInfoPanel.styl";
+
+export type MediaInfoPanelProps = {
+    className?: string;
+    loading?: boolean;
+    progress?: number;
+    onCancel?: () => void;
+}
+
+export const MediaInfoPanel: React.FC<MediaInfoPanelProps> = (props: MediaInfoPanelProps) => {
+    const {className, onCancel, loading, progress = 0} = props;
+    const {album, setAlbum} = useDataState();
+    const [detailsModalOpen, setDetailsModalOpen] = useState(false);
+    const {t} = useTranslation();
+    
+    const onDetailsModalClose = (data: AlbumInfo) => {
+        setAlbum((prev) => _assign(prev, data));
+        setDetailsModalOpen(false);
+    };
+
+    const cancel = () => {
+        if (_isFunction(onCancel)) {
+            onCancel();
+        }
+    };
+
+    const editInfo = useCallback(() => {
+        setDetailsModalOpen(true);
+    }, [detailsModalOpen, setDetailsModalOpen]);
+    
+    return (
+        <>
+            <Grid className={classnames(className, Styles.mediaInfoPanel)} size={12}>
+                <Card variant="outlined" className={Styles.header}>
+                    <CardMedia
+                        component="img"
+                        sx={{width: 100, height: "auto", marginRight: 1}}
+                        image={album.thumbnail}
+                        alt={album.title}
+                    />
+                    <Box className={Styles.content}>
+                        <CardContent className={Styles.info}>
+                            <div className={classnames(Styles.row, Styles, Styles.title)}>
+                                <Typography variant="subtitle2" className={Styles.label}>{t("title")}:</Typography>
+                                <Typography variant="subtitle2" sx={{color: "text.secondary"}} className={classnames(Styles.label, Styles.bold)}>{album.title}</Typography>
+                            </div>
+                            <div className={classnames(Styles.row, Styles, Styles.artist)}>
+                                <Typography variant="body1" className={Styles.label}>{t("artist")}:</Typography>
+                                <Typography variant="body1" sx={{color: "text.secondary"}}>{album.artist}</Typography>
+                            </div>
+                            <div className={Styles.row}>
+                                <Typography variant="subtitle2" className={Styles.label}>{t("releaseYear")}:</Typography>
+                                <Typography variant="subtitle2" sx={{color: "text.secondary"}}>{album.releaseYear}</Typography>
+                            </div>
+                            <div className={Styles.row}>
+                                <Typography variant="subtitle2" className={Styles.label}>{t("duration")}:</Typography>
+                                <Typography variant="subtitle2" sx={{color: "text.secondary"}}>{moment.duration(album.duration, "seconds").format("m:ss")}</Typography>
+                            </div>
+                        </CardContent>
+                        {!loading &&
+                            <Box className={Styles.actions} padding={2} gap={1}>
+                                <Button className={Styles.edit} title={t("edit")} size="large" fullWidth variant="contained" color="secondary" disableElevation onClick={editInfo}>
+                                    <EditIcon />
+                                </Button>
+                            </Box>
+                        }
+                        {loading &&
+                            <Grid container className={Styles.loading}>
+                                <Grid>
+                                    <Button variant="contained" size="large" color="secondary" disableElevation startIcon={<CloseIcon />} onClick={cancel}>{t("cancel")}</Button>
+                                </Grid>
+                                <Grid>
+                                    <Box className={Styles.progressIndicator} padding={2} gap={1}>
+                                        <Progress size={60} thickness={6.5} color="primary" value={progress} />
+                                    </Box>
+                                </Grid>
+                            </Grid>
+                        }
+                        {loading &&
+                            <Box className={Styles.progress}>
+                                <LinearProgress className={Styles.progressBar} variant="determinate" color="primary" value={progress} />
+                            </Box>
+                        }
+                    </Box>
+                </Card>
+            </Grid>
+            <DetailsModal
+                id="details-modal"
+                details={album}
+                open={detailsModalOpen}
+                onClose={onDetailsModalClose}
+            />
+        </>
+    );
+};
+
+export default MediaInfoPanel;

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

@@ -0,0 +1,64 @@
+.track-list {
+    flex-grow: 1;
+
+    .track {
+        padding-top: 0;
+        padding-bottom: 0;
+        padding-left: 5px;
+        padding-right: 5px;
+
+        &:hover {
+            background-color: var(--theme-palette-divider);
+
+            .track-action {
+                visibility: visible;
+            }
+        }
+
+        // :global(.MuiListItemSecondaryAction-root) {
+        //     padding-right: 8px;
+        // }
+
+        .track-action {
+            visibility: hidden;
+            min-width: 0;
+        }
+
+        .number-column {
+            width: 1rem;
+            align-content: center;
+            justify-items: center;
+
+            .number {
+                font-size: 1rem;
+            }
+        }
+
+        .image-column {
+            width: 4rem;
+            align-content: center;
+            justify-items: center;
+
+            .image > img {
+                width: 110%;
+                height: 110%;
+            }
+        }
+    }
+
+    .column {
+        display: flex;
+        align-self: center;
+        align-items: center;
+    }
+
+    .completed-icon {
+        width: 2.3rem;
+        height: 2.3rem;
+    }
+
+    .cut-icon {
+        font-size: 18px;
+        margin-right: 0.25rem;
+    }
+}

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

@@ -0,0 +1,258 @@
+import _filter from "lodash/filter";
+import _find from "lodash/find";
+import _get from "lodash/get";
+import _includes from "lodash/includes";
+import _isEmpty from "lodash/isEmpty";
+import _isFunction from "lodash/isFunction";
+import _map from "lodash/map";
+import _omit from "lodash/omit";
+import _toInteger from "lodash/toInteger";
+import _toString from "lodash/toString";
+import moment from "moment";
+import React, {useCallback, useState} from "react";
+import {useTranslation} from "react-i18next";
+import {NumberFormatBase} from "react-number-format";
+
+import CheckIcon from "@mui/icons-material/Check";
+import CloseIcon from "@mui/icons-material/Close";
+import ContentCutIcon from "@mui/icons-material/ContentCut";
+import DeleteForeverIcon from "@mui/icons-material/DeleteForever";
+import DownloadIcon from "@mui/icons-material/Download";
+import {
+    Avatar, Button, List, ListItem, ListItemText, Popover, Slider, Stack, TextField, Typography
+} from "@mui/material";
+import Grid from "@mui/material/Grid2";
+
+import {formatFileSize} from "../../../common/Helpers";
+import {TrackInfo, TrackStatusInfo} from "../../../common/Youtube";
+import {useDataState} from "../../../react/contexts/DataContext";
+import Progress from "../../progress/Progress";
+import Styles from "./TrackList.styl";
+
+export type TrackListProps = {
+    onDownloadTrack?: (id: string) => void;
+    onCancelTrack?: (id: string) => void;
+    queue: string[];
+};
+
+export const TrackList: React.FC<TrackListProps> = (props: TrackListProps) => {
+    const {onDownloadTrack, onCancelTrack, queue} = props;
+    const {tracks, trackStatus, trackCuts, setTrackStatus, setTrackCuts} = useDataState();
+    const [cutAnchorEl, setCutAnchorEl] = React.useState<HTMLButtonElement | null>(null);
+    const [cutOpen, setCutOpen] = useState<string>();
+    const {t} = useTranslation();
+
+    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 onDownloadTrackClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+        const trackId = event.currentTarget.getAttribute("data-id");
+        setTrackStatus((prev) => _filter(prev, (item) => item.trackId !== trackId));
+
+        if (_isFunction(onDownloadTrack)) {
+            onDownloadTrack(trackId);
+        }
+    };
+
+    const onOpenTrackCut = (event: React.MouseEvent<HTMLButtonElement>) => {
+        const trackId = event.currentTarget.getAttribute("data-id");
+        const track = _find(tracks, ["id", trackId]);
+
+        setCutAnchorEl(event.currentTarget);
+        setCutOpen(trackId);
+        setTrackCuts((prev) => ({...prev, [trackId]: prev[trackId] ?? [0, track.duration]}));
+    };
+    
+    const onDeleteTrackCut = (event: React.MouseEvent<HTMLButtonElement>) => {
+        const trackId = event.currentTarget.getAttribute("data-id");
+
+        setTrackCuts((prev) => _omit(prev, [trackId]));
+        onCloseTrackCut();
+    };
+
+    const onCloseTrackCut = () => {
+        setCutAnchorEl(null);
+        setCutOpen(null);
+    };
+
+    const onCancelTrackClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+        const trackId = event.currentTarget.getAttribute("data-id");
+
+        if (_isFunction(onCancelTrack)) {
+            onCancelTrack(trackId);
+        }
+    };
+
+    const onCutStartTimeChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setTrackCuts((prev) => ({...prev, [cutOpen]: [_toInteger(e.target.value), prev[cutOpen][1]]}));
+    };
+
+    const onCutEndTimeChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setTrackCuts((prev) => ({...prev, [cutOpen]: [prev[cutOpen][0],_toInteger(e.target.value)]}));
+    };
+
+    const onCutTimeChange = (event: Event, value: number | number[], activeThumb: number) => {
+        if (!Array.isArray(value)) {
+            return;
+        }
+    
+        if (activeThumb === 0) {
+            setTrackCuts((prev) => ({...prev, [cutOpen]: [value[0], prev[cutOpen][1]]}));
+        } else {
+            setTrackCuts((prev) => ({...prev, [cutOpen]: [prev[cutOpen][0], value[1]]}));
+        }
+    };
+
+    const getTrackStatusInfo = useCallback((track: TrackInfo): TrackStatusInfo => {
+        const trackStatusInfo = _find(trackStatus, ["trackId", track.id]);
+
+        if (!trackStatusInfo) {
+            return;
+        }
+
+        return trackStatusInfo;
+    }, [trackStatus]);
+
+
+    return (
+        <Grid size={12} className={Styles.trackList}>
+            <List className={Styles.trackList} dense>
+                {_map(tracks, (item) => {
+                    const info = getTrackStatusInfo(item);
+
+                    return (<ListItem
+                        divider
+                        dense
+                        key={item.id}
+                        className={Styles.track}
+                        // disableGutters
+                        // sx={{backgroundColor: info?.completed ? "success.main" : info?.error ? "error.main" : "inherit"}}
+                        secondaryAction={
+                            <Stack direction="row" spacing={2}>
+                                {_includes(queue, item.id) &&
+                                    <Button size="small" className={Styles.trackAction} color="secondary" disableElevation variant="contained" data-id={item.id} onClick={onCancelTrackClick}>
+                                        <CloseIcon />
+                                    </Button>
+                                }
+                                {!_includes(queue, item.id) &&
+                                    <div>
+                                        <Button size="small" className={Styles.trackAction} color="secondary" disableElevation variant="contained" data-id={item.id} onClick={onOpenTrackCut}>
+                                            <ContentCutIcon />
+                                        </Button>
+                                        <Popover
+                                            id={item.id}
+                                            open={Boolean(cutAnchorEl) && cutOpen === item.id}
+                                            anchorEl={cutAnchorEl}
+                                            onClose={onCloseTrackCut}
+                                            anchorOrigin={{
+                                                vertical: "center",
+                                                horizontal: "left",
+                                            }}
+                                            transformOrigin={{
+                                                vertical: "center",
+                                                horizontal: "right",
+                                            }}
+                                        >
+                                            <Grid container padding={2} spacing={1} className={Styles.trackCutPopup}>
+                                                <Grid size={5}>
+                                                    <NumberFormatBase
+                                                        value={_get(trackCuts, `${item.id}.0`, 0) + ""}
+                                                        onChange={onCutStartTimeChange}
+                                                        format={formatTime}
+                                                        customInput={TextField}
+                                                        variant="outlined"
+                                                        label={t("from")}
+                                                    />
+                                                </Grid>
+                                                <Grid size={5}>
+                                                    <NumberFormatBase
+                                                        value={_get(trackCuts, `${item.id}.1`, item.duration) + ""}
+                                                        onChange={onCutEndTimeChange}
+                                                        format={formatTime}
+                                                        customInput={TextField}
+                                                        variant="outlined"
+                                                        label={t("to")}
+                                                    />
+                                                </Grid>
+                                                <Grid size={2} display="flex">
+                                                    <Button data-id={item.id} disableElevation variant="contained" fullWidth color="secondary" onClick={onDeleteTrackCut}>
+                                                        <DeleteForeverIcon />
+                                                    </Button>
+                                                </Grid>
+                                                <Grid size={12} display="flex" paddingX={2}>
+                                                    <Slider
+                                                        value={trackCuts[item.id] ?? [0, item.duration]}
+                                                        onChange={onCutTimeChange}
+                                                        valueLabelDisplay="off"
+                                                        min={0}
+                                                        max={item.duration}
+                                                        step={1}
+                                                    />
+                                                </Grid>
+                                            </Grid>
+                                        </Popover>
+                                    </div>
+                                }
+                                {!_includes(queue, item.id) &&
+                                    <Button className={Styles.trackAction} size="small" color="secondary" disableElevation variant="contained" data-id={item.id} onClick={onDownloadTrackClick}>
+                                        <DownloadIcon />
+                                    </Button>
+                                }
+                            </Stack>
+                        }
+                    >
+                        <Grid container direction="row" flexGrow={1}>
+                            {item.playlist_autonumber &&
+                                <Grid size={1} className={Styles.numberColumn}>
+                                    <Typography className={Styles.number} variant="body1" color="primary.main">{item.playlist_autonumber}</Typography>
+                                </Grid>
+                            }
+                            <Grid size={1} className={Styles.imageColumn}>
+                                <Avatar className={Styles.image} src={item.thumbnail}>{item.playlist_autonumber}</Avatar>
+                            </Grid>
+                            <Grid size={4}>
+                                <ListItemText primary={item.title} secondary={moment.duration(item.duration, "seconds").format("m:ss")} />
+                            </Grid>
+                            <Grid size={2} className={Styles.column}>
+                                {!_isEmpty(trackCuts[item.id]) &&
+                                    <>
+                                        <ContentCutIcon className={Styles.cutIcon} color="action"/>
+                                        <Typography variant="caption">
+                                            {formatTime(_toString(trackCuts[item.id][0]))} - {formatTime(_toString(trackCuts[item.id][1]))}
+                                        </Typography>
+                                    </>
+                                }
+                            </Grid>
+                            {info && <>
+                                <Grid size={1} className={Styles.column}>
+                                    <Typography variant="body1">{formatFileSize(info.totalSize ?? item.filesize_approx)}</Typography>
+                                </Grid>
+                                <Grid size={1} className={Styles.column}>
+                                    {info.completed ?
+                                        <CheckIcon className={Styles.completedIcon} color="success" />
+                                        : info.error ?
+                                            <CloseIcon className={Styles.completedIcon} color="error" />
+                                            : <Progress color="primary" value={info.percent} />
+                                    }
+                                </Grid>
+                                <Grid size={2} className={Styles.column}>
+                                    <Typography variant="body1">{info.status}</Typography>
+                                </Grid>
+                            </>
+                            }
+                        </Grid>
+                    </ListItem>);
+                })}
+            </List>
+        </Grid>
+    );
+};
+
+export default TrackList;

package/src/enums/DataResponse.ts

@@ -0,0 +1,5 @@
+export enum DataResponse {
+    File = "file",
+    Buffer = "buffer",
+    Stream = "stream",
+}

package/src/enums/Media.ts

@@ -0,0 +1,16 @@
+export enum MediaFormat {
+    Audio = "audio",
+    Video = "video",
+};
+
+export enum AudioType {
+    Mp3 = "mp3",
+    Wav = "wav",
+    Flac = "flac",
+    M4a = "m4a"
+};
+
+export enum VideoType {
+    Mp4 = "mp4",
+    Mkv = "mkv"
+};

package/src/enums/MediaFormat.ts

@@ -0,0 +1,10 @@
+export enum MediaFormat {
+    Audio = "audio",
+    Video = "video",
+}
+
+export enum ModeFormat {
+    Best = "best",
+    BestAudio = "bestaudio",
+    Custom = "custom",
+}

package/src/enums/MimeTypes.ts

@@ -0,0 +1,14 @@
+export enum MimeTypes {
+    Jpg = ".jpg,image/jpg",
+    Bin = ".bin,application/octet-stream",
+    Jpeg = ".jpeg,image/jpeg",
+    Json = ".json,application/json",
+    Png = ".png,image/png",
+    Svg = ".svg,image/svg+xml",
+    Pdf = ".pdf,application/pdf",
+    Word = ".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+    Excel = ".xls,.xlsx,application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+    Zip = ".zip",
+    Midi = ".mid",
+    Text = ".txt,text/plain",
+}

package/src/hooks/useCancellablePromises.ts

@@ -0,0 +1,25 @@
+import React, {useRef} from "react";
+
+import {ICancelablePromise} from "../common/CancellablePromise";
+
+const useCancellablePromises = () => {
+    const pendingPromises = useRef([]);
+
+    const appendPendingPromise = (promise: ICancelablePromise) =>
+        (pendingPromises.current = [...pendingPromises.current, promise]);
+
+    const removePendingPromise = (promise: ICancelablePromise) =>
+        (pendingPromises.current = pendingPromises.current.filter((p) => p !== promise));
+
+    const clearPendingPromises = () => pendingPromises.current.map((p) => p.cancel());
+
+    const api = {
+        appendPendingPromise,
+        removePendingPromise,
+        clearPendingPromises,
+    };
+
+    return api;
+};
+
+export default useCancellablePromises;

package/src/hooks/useClickCounter.ts

@@ -0,0 +1,24 @@
+import $_ from "lodash";
+import { useCallback, useEffect, useRef, useState } from "react";
+
+export const useClickCounter = (callback: () => void, clicks = 3, timeout = 500) => {
+    const [clickCounter, setClickCount] = useState(0);
+
+    const onReset = useRef($_.debounce(() => setClickCount(0), timeout, { leading: false, trailing: true }));
+
+    const onClick = useCallback(() => {
+        setClickCount(clickCounter + 1);
+        onReset.current();
+    }, [callback]);
+
+    useEffect(() => {
+        if (clickCounter >= clicks) {
+            onReset.current.flush();
+            callback();
+        }
+    }, [clickCounter]);
+
+    return { clickCounter, onClick };
+};
+
+export default useClickCounter;

package/src/hooks/useData.ts

@@ -0,0 +1,61 @@
+
+
+import _assign from "lodash/assign";
+import _merge from "lodash/merge";
+
+import {AlbumInfo, TrackInfo, TrackStatusInfo} from "../common/Youtube";
+
+export type useDataType = {
+    album?: AlbumInfo; 
+    tracks: TrackInfo[]; 
+    trackStatus: TrackStatusInfo[]; 
+    setAlbum: React.Dispatch<React.SetStateAction<AlbumInfo>>;
+    setTracks: React.Dispatch<React.SetStateAction<TrackInfo[]>>;
+    setTrackStatus: React.Dispatch<React.SetStateAction<TrackStatusInfo[]>>;
+    clear: () => void;
+}
+
+const useData = (id?: string): any => {
+    // const {data, getData, setData} = useDataState();
+    // const state = getData(id);
+    
+    // const [album, setAlbum] = useState<AlbumInfo>();
+    // const [tracks, setTracks] = useState<TrackInfo[]>();
+    // const [trackStatus, setTrackStatus] = useState<TrackStatusInfo[]>();
+    
+    // useEffect(() => {
+    //     setData((prev) => {
+    //         return {...prev, [id]: _merge({}, prev[id], {album})};
+    //     });
+    // }, [album]);
+
+    // useEffect(() => {
+    //     setData((prev) => {
+    //         return {...prev, [id]: _assign({}, prev[id], {tracks})};
+    //     });
+    // }, [tracks]);
+
+    // useEffect(() => {
+    //     setData((prev) => {
+    //         return {...prev, [id]: _assign({}, prev[id], {trackStatus})};
+    //     });
+    // }, [trackStatus]);
+
+    // const clear = () => {
+    //     setAlbum(null);
+    //     setTracks(null);
+    //     setTrackStatus(null);
+    // };
+
+    return {
+        // album: state.album,
+        // tracks: state.tracks,
+        // trackStatus: state.trackStatus,
+        // setAlbum,
+        // setTracks,
+        // setTrackStatus,
+        // clear
+    };
+};
+
+export default useData;