yt-grabber 1.0.0

package/src/common/Helpers.ts

@@ -0,0 +1,270 @@
+import $_ from "lodash";
+import {setTimeout} from "node:timers/promises";
+import path from "path";
+import {Browser, ElementHandle, Frame, Page} from "puppeteer";
+import puppeteer from "puppeteer-extra";
+import pluginStealth from "puppeteer-extra-plugin-stealth";
+
+export const setTitle = async (title: string, page: Page) => {
+    return page.evaluate((data) => (document.title = data), title);
+};
+
+export const isHeadless = async (browser: Browser) => {
+    return $_.includes(await browser.version(), "Headless");
+};
+
+export const decode = (value: string) => {
+    return Buffer.from(value, "base64").toString("ascii");
+};
+
+export const encode = (value: string) => {
+    return Buffer.from(value).toString("base64");
+};
+
+export const getOutputDir = (config: any) => {
+    return path.normalize(path.resolve(config.outputDir));
+};
+
+export const doubleClick = async (selector: string, page: Page) => {
+    await page.click(selector);
+    await page.click(selector, { count: 2 });
+};
+
+export const dbClickSlow = async (selector: string, page: Page) => {
+    const element = await page.$(selector);
+
+    if (!element) return;
+
+    await element.click();
+    await setTimeout(200);
+    await element.click({ count: 2 });
+};
+
+export const tripleClick = async (selector: string | ElementHandle<Element>, page: Page) => {
+    const input = typeof selector === "string" ? await page.$(selector) : selector;
+
+    if (!input) return;
+
+    await input.click({ count: 3 });
+};
+
+export const clickOutOfView = async (selector: string, page: Page) => {
+    const link = await page.$(selector);
+    if (link) return clickOnPage(selector, page);
+};
+
+export const clickOnPage = async (selector: string, page: Page) => {
+    return page.evaluate((value) => document.querySelector<HTMLElement>(value)?.click(), selector);
+};
+
+export const clickXPathOutOfView = async (xpath: string, page: Page) => {
+    const element = await page.waitForSelector(xpath);
+    if (element) {
+        await page.evaluate<any>((item) => item.click(), (await page.$$(xpath))[0]);
+    }
+};
+
+export const clearInput = async (selector: string | ElementHandle<Element>, page: Page) => {
+    await tripleClick(selector, page);
+    await page.keyboard.press("Delete");
+};
+
+export const getElementTextContent = async (xPath: string, page: Page) => {
+    const element = await page.$$(xPath);
+
+    return page.evaluate((el: any) => el.textContent, $_.first(element));
+};
+
+export const clickInShadowRoot = async (xpath: string, page: Page) => {
+    try {
+        const element = await page.waitForSelector(xpath, { timeout: 8000 });
+
+        if (element) {
+            return page.evaluate((item) => {
+                return item.shadowRoot
+                    ?.querySelector<HTMLButtonElement>("button[slot='action-slot'].second-button")
+                    ?.click();
+            }, (await page.$$(xpath))[0]);
+        }
+
+        return Promise.resolve();
+    } catch (error) {
+        return Promise.resolve(error);
+    }
+};
+
+export const getElementFromShadowRoot = async (xpath: string, page: Page) => {
+    try {
+        const element = await page.waitForSelector(xpath, { timeout: 8000 });
+
+        if (element) {
+            return page.evaluate((item) => {
+                return item.shadowRoot
+                    ?.querySelector<HTMLButtonElement>("button[slot='action-slot'].second-button")
+                    ?.click();
+            }, (await page.$$(xpath))[0]);
+        }
+
+        return;
+    } catch (error) {
+        return error;
+    }
+};
+
+export const setRequestInterceptors = async (page: Page, filters: any[]) => {
+    if ($_.isEmpty(filters)) return;
+
+    await page.setRequestInterception(true);
+
+    page.on("request", (req) => {
+        if ($_.includes(filters, req.resourceType())) {
+            return req.abort();
+        }
+
+        return req.continue();
+    });
+};
+
+export const useStealth = async () => {
+    const shouldUseStealth = $_.get(global, "config.useStealth");
+
+    if (!shouldUseStealth) {
+        return;
+    }
+
+    puppeteer.use(pluginStealth());
+};
+
+export const runScript = async (content: string, page: Page) => {
+    return page.evaluate((data) => Promise.resolve(eval(data)), content);
+};
+
+export const waitUntilSelectorTextContains = async (selector: string, text: string, page: Page) =>
+    page.waitForFunction(
+        (selectorString: any, textString: any) => {
+            const item = document.querySelector(selectorString);
+
+            return item && item.textContent && item.textContent.indexOf(textString) !== -1;
+        },
+        { polling: "mutation" },
+        selector,
+        text,
+    );
+
+export const waitUntilSelectorTextEquals = async (selector: string, text: string, page: Page) =>
+    page.waitForFunction(
+        (selectorString: any, textString: any) => {
+            const item = document.querySelector(selectorString);
+
+            return item && item.textContent === textString;
+        },
+        { polling: "mutation" },
+        selector,
+        text,
+    );
+
+export const waitForBufferResponse = async (
+    url: string,
+    reqMethod: string,
+    status: number,
+    size: { min: number },
+    expectedHeaders: any,
+    page: Page,
+) =>
+    new Promise((resolve: any, reject: any) => {
+        page.on("response", async (response: any) => {
+            if (!$_.includes(response.url(), url) || response.request().method() !== reqMethod) return response;
+
+            const buffer = await response.buffer();
+            const statusOk = response.status() === status;
+            const sizeOk = buffer.length >= size.min;
+
+            if (!statusOk || !sizeOk) return reject();
+
+            $_.forEach(expectedHeaders, (value: string, key: string) => {
+                if (!$_.includes($_.lowerCase(response.headers()[key]), $_.lowerCase(value))) return reject();
+            });
+
+            return resolve(buffer);
+        });
+    });
+
+export const waitForFileContentResponse = async (
+    url: string,
+    reqMethod: string,
+    status: number,
+    expectedHeaders: any,
+    page: Page,
+): Promise<any> =>
+    new Promise((resolve: any, reject: any) => {
+        page.on("response", async (response: any) => {
+            if (!$_.includes(response.url(), url) || response.request().method() !== reqMethod) {
+                return response;
+            }
+            const statusOk = response.status() === status;
+
+            if (!statusOk) return reject();
+
+            $_.forEach(expectedHeaders, (value: string, key: string) => {
+                if (!$_.includes($_.lowerCase(response.headers()[key]), $_.lowerCase(value))) {
+                    return reject();
+                }
+            });
+            // const parsed = contentDisposition.parse(response.headers()["content-disposition"]);
+            return resolve(response.buffer());
+            // return resolve($_.get(parsed, "parameters.filename"));
+        });
+    });
+
+export const count = async (selector: string, frame: Frame) => {
+    return (await frame.$$(selector)).length;
+};
+
+export const exists = async (selector: string, frame: Frame) => {
+    return !!(await frame.$(selector));
+};
+
+export const clickLink = async (selector: string, page: Page) =>
+    Promise.all([page.waitForNavigation(), page.click(selector)]);
+
+export const getXPathElement = async (xpath: string, page: Page) => $_.first(await page.$$(xpath));
+
+export const queryShadowDom = async (page: Page, selector: string) => {
+    return page.evaluateHandle((input) => {
+        const shadowSeparator = "::shadow";
+        const parts = input.split(shadowSeparator).map((item: string) => item.trim());
+        const endsWithShadow = input.endsWith(shadowSeparator);
+
+        const element = parts.reduce((total: any, current: any, index: number, arr: string[]) => {
+            const selected = total.querySelector(current);
+            if (index < arr.length - 1 || endsWithShadow) {
+                return selected.shadowRoot;
+            }
+
+            return selected;
+        }, document);
+
+        return element;
+    }, selector);
+};
+
+export const retry = async (handler: any, params: any[], attempts = 5): Promise<any> => {
+    try {
+        return await handler(...params);
+    } catch (error) {
+        if (attempts <= 1) {
+            throw error;
+        }
+        return retry(handler, params, attempts - 1);
+    }
+};
+
+export const formatFileSize = (sizeInBytes: number, decimals = 2) => {
+    if (sizeInBytes === 0) return "0 Bytes";
+    
+    const k = 1024;
+    const sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB"];
+    const i = Math.floor(Math.log(sizeInBytes) / Math.log(k));
+  
+    return parseFloat((sizeInBytes / Math.pow(k, i)).toFixed(decimals)) + " " + sizes[i];
+};

package/src/common/Mappings.ts

@@ -0,0 +1,14 @@
+export interface IStringTMap<T> { [key: string]: T; }
+export interface INumberTMap<T> { [key: number]: T; }
+
+export interface IStringAnyMap extends IStringTMap<any> {}
+export interface INumberAnyMap extends INumberTMap<any> {}
+
+export interface IStringStringMap extends IStringTMap<string> {}
+export interface INumberStringMap extends INumberTMap<string> {}
+
+export interface IStringNumberMap extends IStringTMap<number> {}
+export interface INumberNumberMap extends INumberTMap<number> {}
+
+export interface IStringBooleanMap extends IStringTMap<boolean> {}
+export interface INumberBooleanMap extends INumberTMap<boolean> {}

package/src/common/PuppeteerOptions.ts

@@ -0,0 +1,45 @@
+import {LaunchOptions} from "puppeteer";
+
+const width = 1280;
+const height = 800;
+
+const options: LaunchOptions = {
+    headless: false,
+    userDataDir: "./output/user-data-dir",
+    defaultViewport: {
+        width,
+        height,
+    },
+    timeout: 15000,
+    // executablePath: "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe",
+    devtools: false,
+    args: [
+        `--disable-infobars`,
+        `--window-size=${width},${height}`,
+        `--disable-extensions`,
+        `--mute-audio`,
+        `--disable-background-timer-throttling`,
+        `--no-sandbox`,
+        `--incognito`,
+        "--disable-setuid-sandbox",
+        "--disable-autofill-keyboard-accessory-view",
+        "--disable-password-generation",
+        "--disable-save-password-bubble",
+        `--disable-backgrounding-occluded-windows`,
+        `--disable-renderer-backgrounding`,
+        `--disable-dev-shm-usage`,
+        "--disable-prompt-on-repost",
+        "--disable-notifications",
+        `--disable-accelerated-2d-canvas`,
+        "--hide-crash-restore-bubble",
+        "--no-zygote",
+        "--webview-disable-safebrowsing-support",
+        "--autoplay-policy=no-user-gesture-required",
+        "--use-fake-ui-for-media-stream",
+        "--disable-crash-reporter",
+        "--disable-site-isolation-trials",
+    ],
+    ignoreDefaultArgs: ["--enable-automation"],
+};
+
+export default options;

package/src/common/Selectors.ts

@@ -0,0 +1,21 @@
+import $_ from "lodash";
+
+export const Css: any = {
+    ReactAppElement: "#react-app",
+};
+
+export const XPath: any = {};
+
+export const getInput = (attribute: string, value: string) => `input[${attribute} = "${value}"]`;
+
+export const getInputByName = (name: string) => `input[name="${name}"]`;
+
+export const getInputByType = (type: string) => `input[type="${name}"]`;
+
+export const getDivByTitle = (title: string) => `div[title="${title}"]`;
+
+export const getElement = (tag: string, attributes: { [key: string]: string }) =>
+    `${tag}${$_.join(
+        $_.map(attributes, (v, k) => `[${k}="${v}"]`),
+        "",
+    )}`;

package/src/common/Store.ts

@@ -0,0 +1,108 @@
+import {Schema} from "electron-store";
+
+import {Format} from "../components/youtube/formatSelector/FormatSelector";
+
+export type ApplicationOptions = {
+    outputDirectory?: string;
+    albumOutputTemplate?: string;
+    playlistOutputTemplate?: string;
+    videoOutputTemplate?: string;
+    trackOutputTemplate?: string;
+    concurrency?: number;
+    quality?: number;
+    format?: Format;
+    debugMode?: boolean;
+    url?: string;
+    language?: string;
+    alwaysOverwrite?: boolean;
+};
+
+export interface IStore {
+    options: {
+        headless: boolean;
+    };
+    application: ApplicationOptions;
+}
+
+export const StoreSchema: Schema<IStore> = {
+    options: {
+        type: "object",
+        properties: {
+            headless: {
+                type: "boolean",
+                default: false,
+            },
+        },
+        default: {},
+    },
+    application: {
+        type: "object",
+        properties: {
+            url: {
+                type: "string",
+                default: "",
+            },
+            outputDirectory: {
+                type: "string",
+                default: "/output",
+            },
+            albumOutputTemplate: {
+                type: "string",
+                default: "{{artist}}/[{{releaseYear}}] {{albumTitle}}/{{trackNo}} - {{trackTitle}}",
+            },
+            playlistOutputTemplate: {
+                type: "string",
+                default: "{{albumTitle}}/{{trackTitle}}",
+            },
+            videoOutputTemplate: {
+                type: "string",
+                default: "{{artist}} - {{trackTitle}}",
+            },
+            trackOutputTemplate: {
+                type: "string",
+                default: "{{artist}} - {{trackTitle}}",
+            },
+            concurrency: {
+                type: "integer",
+                default: 1
+            },
+            quality: {
+                type: "integer",
+                default: 0
+            },
+            format: {
+                type: "object",
+                properties: {
+                    type: {
+                        type: "string",
+                        enum: ["video", "audio"],
+                        default: "audio",
+                    },
+                    extension: {
+                        type: "string",
+                        enum: ["mp3", "m4a", "flac", "wav", "opus", "mp4", "mkv"],
+                        default: "mp3",
+                    },
+                    audioQuality: {
+                        type: "integer",
+                        default: 0,
+                    }
+                },
+            },
+            debugMode: {
+                type: "boolean",
+                default: false
+            },
+            language: {
+                type: "string"
+            },
+            alwaysOverwrite: {
+                type: "boolean",
+                default: false
+            }
+        },
+        default: {},
+    },
+};
+
+export default StoreSchema;

package/src/common/Theme.ts

@@ -0,0 +1,4 @@
+export enum ColorMode {
+    Light = "light",
+    Dark = "dark",
+}

package/src/common/Youtube.ts

@@ -0,0 +1,80 @@
+import {MediaFormat} from "../enums/Media";
+
+export type TrackInfo = {
+    album: string;
+    artist: string;
+    channel: string;
+    creators: string[];
+    duration: number;
+    id: string;
+    original_url: string;
+    playlist: string;
+    playlist_title: string;
+    playlist_autonumber: number;
+    playlist_count: number;
+    release_year: number;
+    title: string;
+    thumbnail: string;
+    formats: FormatInfo[];
+    timestamp: number;
+    filesize_approx: number;
+    thumbnails: Thumbnail[];
+};
+
+export type AlbumInfo = {
+    artist: string;
+    title: string;
+    releaseYear: number;
+    tracksNumber: number;
+    duration: number;
+    thumbnail: string;
+};
+
+export type Thumbnail = {
+    width?: number;
+    height?: number;
+    url: string;
+    id: string;
+};
+
+export type TrackStatusInfo = {
+    trackId: string;
+    percent: number;
+    totalSize: number;
+    completed?: boolean;
+    status?: string;
+    error?: boolean;
+}
+
+export type FormatInfo = {
+    ext: string;
+    acodec: string;
+    vcodec: string;
+    audio_ext: string;
+    video_ext: string;
+    format_id: string;
+    format_note: string;
+    filesize: number;
+    fps: number;
+    quality: number;
+    has_drm: boolean;
+    width: number;
+    height: number;
+    resolution: string;
+    protocol: string;
+};
+
+export type Format = {
+    type: MediaFormat;
+    name: string;
+    extension: string;
+    protocol: string;
+    id: string;
+    width: number;
+    height: number;
+};
+
+export type TrackCut = {
+    from: number;
+    to: number;
+};

package/src/components/appBar/AppBar.styl

@@ -0,0 +1,22 @@
+.app-bar
+  padding: 0
+
+  .wrapper
+    padding: 0 12px
+
+    .logo
+      margin-right: 1em
+      width: 2em
+      height: 2em
+
+    .title
+      font-family: "Baloo"
+      font-size: 1.8rem
+      line-height: 1.8
+
+    .icon
+      margin-left: 0
+
+      svg
+        width: 1.4em
+        height: 1.4em

package/src/components/appBar/AppBar.tsx

@@ -0,0 +1,73 @@
+import React from "react";
+
+import CloseIcon from "@mui/icons-material/Close";
+import SettingsIcon from "@mui/icons-material/Settings";
+import {Stack} from "@mui/material";
+import ApplicationBar from "@mui/material/AppBar";
+import Box from "@mui/material/Box";
+import Container from "@mui/material/Container";
+import IconButton from "@mui/material/IconButton";
+import Toolbar from "@mui/material/Toolbar";
+import Tooltip from "@mui/material/Tooltip";
+import Typography from "@mui/material/Typography";
+
+import ComponentDisplayMode from "../../common/ComponentDisplayMode";
+import {useClickCounter} from "../../hooks/useClickCounter";
+import {useAppContext} from "../../react/contexts/AppContext";
+import LanguagePicker from "../languagePicker/LanguagePicker";
+import Logo from "../logo/Logo";
+import Styles from "./AppBar.styl";
+
+function AppBar() {
+    const { state, actions } = useAppContext();
+    const { onClick } = useClickCounter(() => handleOpenDevelopment(), 3, 500);
+
+    const handleOpenDevelopment = () => {
+        actions.setLocation("/development");
+    };
+
+    const handleOpenSettings = () => {
+        actions.setLocation("/settings");
+    };
+
+    const handleClose = () => {
+        actions.setLocation("/");
+    };
+
+    const createSettingsButton = () => {
+        if (state.location !== "/") {
+            return (
+                <IconButton onClick={handleClose} color="inherit" className={Styles.icon}>
+                    <CloseIcon />
+                </IconButton>
+            );
+        } else {
+            return (
+                <IconButton onClick={handleOpenSettings} color="inherit" className={Styles.icon}>
+                    <SettingsIcon />
+                </IconButton>
+            );
+        }
+    };
+
+    return (
+        <ApplicationBar elevation={0} position="static" className={Styles.appBar}>
+            <Container maxWidth="xl" className={Styles.wrapper}>
+                <Toolbar disableGutters variant="dense">
+                    <Logo onClick={onClick} className={Styles.logo} />
+                    <Typography className={Styles.title} variant="h6" noWrap>
+                        YT GRABBER
+                    </Typography>
+                    <Box sx={{flexGrow: 1}}></Box>
+                    <Stack direction="row" gap={1}>
+                        <LanguagePicker showArrow={false} mode={ComponentDisplayMode.Minimal} />
+                        <Tooltip title={state.location === "/settings" ? "Close settings" : "Open settings"}>
+                            {createSettingsButton()}
+                        </Tooltip>
+                    </Stack>
+                </Toolbar>
+            </Container>
+        </ApplicationBar>
+    );
+}
+export default AppBar;

package/src/components/directoryPicker/DirectoryPicker.tsx

@@ -0,0 +1,44 @@
+import React, {useState} from "react";
+
+import {Button, TextField, TextFieldProps} from "@mui/material";
+
+const DirectoryPicker = (props: TextFieldProps<"outlined">) => {
+    const {className, value, ...rest} = props;
+    const [directoryPath, setDirectoryPath] = useState<string>("");
+
+    const handleDirectorySelect = (event: React.ChangeEvent<HTMLInputElement>) => {
+        const files = event.target.files;
+        if (files && files.length > 0) {
+            const path = files[0].webkitRelativePath.split("/")[0];
+            setDirectoryPath(path);
+        }
+    };
+
+    return (
+        <div className={className}>
+            <input
+                type="file"
+                // dir=""
+                onChange={handleDirectorySelect}
+                style={{display: "none"}}
+                id="directory-input"
+            />
+            <label htmlFor="directory-input">
+                <Button variant="contained" component="span">
+                    Select Directory
+                </Button>
+            </label>
+            <TextField
+                label="Selected Directory"
+                variant="outlined"
+                fullWidth
+                value={directoryPath}
+                InputProps={{readOnly: true}}
+                sx={{mt: 2}}
+                {...rest}
+            />
+        </div>
+    );
+};
+
+export default DirectoryPicker;

package/src/components/fileField/FileField.styl

@@ -0,0 +1,3 @@
+.file-field {
+
+}