yt-grabber 1.0.0 → 1.2.0

package/.yarnrc.yml

@@ -10,4 +10,6 @@ packageExtensions:
       "react": "^19.0.0"
     peerDependencies:
       "react": "^19.0.0"
-
+  "eslint@*":
+    dependencies:
+      "globals": "^16.0.0"

package/README.md

@@ -1,11 +1,102 @@
-## Install:
-`yarn install`
+<img src="public/banner.png" alt="YT Grabber Banner" width="800">
 
-## Build:
-`yarn build`
+---
 
-## Start:
-`yarn start`
+**YT Grabber** is a robust desktop application designed to retrieve multimedia from YouTube and YouTube Music services.
 
-## Usage:
-Download and run latest binary release.
+It provides responsive UI to manage your downloads and automation features improve and accelerate download process.
+
+It provides support for downloading:
+
+-   videos
+-   audio tracks
+-   complete playlists
+-   full discographies
+
+Various formats and quality options are available for both - audio and video.
+
+Each download can be customized to your needs for easy workflow automation.
+
+## Table of Contents
+
+- [Table of Contents](#table-of-contents)
+- [Features](#features)
+- [Screenshots](#screenshots)
+- [Usage](#usage)
+- [Development](#development)
+- [Running](#running)
+- [Packaging](#packaging)
+- [License](#license)
+- [Legal Disclaimer](#legal-disclaimer)
+
+
+## Features
+
+* Download video, audio, playlists and complete artist discographies
+
+* Multiple output formats (mp3, m4u, flac, wav, mp4, mkv)
+
+* Customizable audio and video quality
+
+* Trimming video and audio
+
+* Batch multimedia download
+
+* Metadata (tags) embedding
+
+* Configurable output
+
+* Multiple language support (English, German, Polish out of the box)
+
+* Light/Dark theme
+
+* Responsive and clean UI
+
+
+## Screenshots
+
+<img src="public/screenshots/main.png" alt="Main" width="600">
+
+*Main window*
+
+<img src="public/screenshots/main-info.png" alt="Main: Loading Info" width="600">
+
+*Displaying multimedia info*
+
+<img src="public/screenshots/main-downloading.png" alt="Main: Downloading Files" width="600">
+
+*Downloading multimedia*
+
+<img src="public/screenshots/settings.png" alt="Settings" width="600">
+
+*Settings*
+
+## Usage
+
+Download and run latest release installer from [here](https://github.com/karenpommeroy/yt-grabber/releases).
+
+## Development
+
+To build **yt-grabber** follow these steps:
+
+1. Clone this repository
+2. Install dependencies using `npm install` or `yarn install` command
+3. If using `yarn` with Visual Studio Code also run `yarn dlx @yarnpkg/sdks vscode`
+4. Run `npm build` or `yarn build` command to build
+
+## Running
+
+Run `npm start` or `yarn start` to run the app for development.
+This will start webpack development server that will watch for changes to source code and reload the application automatically.
+
+## Packaging
+
+To prepare release application package run `npm dist` or `yarn dist` command.
+
+## License
+
+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.

package/eslint.config.ts

@@ -0,0 +1,60 @@
+import react from "eslint-plugin-react";
+import {defineConfig} from "eslint/config";
+import globals from "globals";
+import path from "node:path";
+import {fileURLToPath} from "node:url";
+
+import {FlatCompat} from "@eslint/eslintrc";
+import js from "@eslint/js";
+import typescriptEslint from "@typescript-eslint/eslint-plugin";
+import tsParser from "@typescript-eslint/parser";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const compat = new FlatCompat({
+    baseDirectory: __dirname,
+    recommendedConfig: js.configs.recommended,
+    allConfig: js.configs.all
+});
+
+export default defineConfig([{
+    extends: compat.extends(
+        "eslint:recommended",
+        "plugin:react/recommended",
+        "plugin:@typescript-eslint/recommended",
+        "prettier",
+    ),
+
+    plugins: {
+        react,
+        "@typescript-eslint": typescriptEslint as any,
+    },
+
+    languageOptions: {
+        globals: {
+            ...globals.browser,
+        },
+
+        parser: tsParser,
+        ecmaVersion: "latest",
+        sourceType: "module",
+    },
+
+    settings: {
+        react: {
+            version: "detect",
+        },
+    },
+
+    rules: {
+        indent: ["error", 4],
+        "linebreak-style": ["error", "windows"],
+        quotes: ["error", "double"],
+        semi: ["error", "always"],
+        "@typescript-eslint/no-var-requires": 0,
+        "@typescript-eslint/no-explicit-any": 0,
+        "@typescript-eslint/no-empty-interface": 0,
+        "react/prop-types": 0,
+        "react/display-name": 0,
+    },
+}]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "yt-grabber",
-  "version": "1.0.0",
+  "version": "1.2.0",
   "description": "Youtube Grabber",
   "main": "./dist/index.js",
   "repository": {
@@ -9,28 +9,56 @@
   "scripts": {
     "clean": "rimraf dist",
     "start": "concurrently \"cross-env NODE_ENV=development yarn run watch\" \"yarn run electron\"",
-    "build": "cross-env NODE_ENV=development && yarn clean && webpack --config webpack.config.ts",
-    "build:prod": "cross-env NODE_ENV=production && yarn clean && webpack --config webpack.config.ts",
-    "electron": "wait-on dist/index.js && cross-env NODE_ENV=production ELECTRON_DISABLE_SECURITY_WARNINGS=true electron .",
+    "build": "yarn clean && \"cross-env NODE_ENV=development webpack\" --config webpack.config.ts",
+    "build:prod": "yarn clean && \"cross-env NODE_ENV=production webpack\" --config webpack.config.ts",
+    "electron": "wait-on dist/index.js && ELECTRON_DISABLE_SECURITY_WARNINGS=true electron .",
     "watch": "webpack --watch --config webpack.config.ts",
     "pack": "yarn build:prod && electron-builder --dir",
     "dist": "yarn build:prod && electron-builder"
   },
   "build": {
     "appId": "yt.grabber",
+    "productName": "YT Grabber",
+    "copyright": "© 2025 Marcin Karpiński",
     "files": [
       "dist/**/*",
       "package.json"
     ],
+    "asar": true,
+    "win": {
+      "target": "nsis",
+      "icon": "dist/resources/icons/logo.ico",
+      "artifactName": "${productName}-setup-${version}.${ext}"
+    },
+    "nsis": {
+      "oneClick": false,
+      "allowToChangeInstallationDirectory": true,
+      "installerIcon": "dist/resources/icons/logo.ico",
+      "uninstallerIcon": "dist/resources/icons/logo.ico",
+      "installerHeaderIcon": "dist/resources/icons/logo.ico",
+      "createDesktopShortcut": true,
+      "createStartMenuShortcut": true,
+      "shortcutName": "YT Grabber"
+    },
     "directories": {
       "output": "release"
     },
     "extraResources": [
-        {
-            "from": "dist/resources/bin",
-            "to": "bin",
-            "filter": ["*.exe"]
-        }
+      {
+        "from": "dist/resources/bin",
+        "to": "bin",
+        "filter": [
+          "*.exe"
+        ]
+      },
+      {
+        "from": "dist/resources/locales",
+        "to": "locales"
+      },
+      {
+        "from": "public/profile",
+        "to": "profile"
+      }
     ]
   },
   "author": "Marcin Karpiński <mkarpins@gmail.com>",
@@ -38,10 +66,13 @@
   "dependencies": {
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
-    "@mui/icons-material": "^6.4.2",
-    "@mui/material": "^6.4.2",
+    "@mui/icons-material": "^7.0.0",
+    "@mui/lab": "^7.0.0-beta.9",
+    "@mui/material": "^7.0.0",
+    "axios": "^1.8.4",
     "classnames": "^2.5.1",
     "electron-devtools-installer": "^4.0.0",
+    "electron-reload": "^2.0.0-alpha.1",
     "electron-store": "^8.2.0",
     "fs-extra": "^11.3.0",
     "i18next": "^24.2.2",
@@ -51,17 +82,18 @@
     "mkdirp": "^3.0.1",
     "moment": "^2.30.1",
     "moment-duration-format": "^2.3.2",
-    "puppeteer": "^24.1.1",
-    "puppeteer-core": "^24.1.1",
+    "mui-image": "^1.0.7",
+    "puppeteer": "^24.4.0",
+    "puppeteer-core": "^24.4.0",
     "puppeteer-extra": "^3.3.6",
     "puppeteer-extra-plugin-devtools": "^2.4.6",
     "puppeteer-extra-plugin-stealth": "^2.11.2",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "react-i18next": "^15.4.0",
+    "react-i18next": "^15.4.1",
     "react-number-format": "^5.4.3",
-    "react-router-dom": "^7.1.5",
-    "usehooks-ts": "^3.1.0",
+    "react-router-dom": "^7.4.0",
+    "usehooks-ts": "^3.1.1",
     "yt-dlp-wrap": "^2.3.12"
   },
   "devDependencies": {
@@ -70,32 +102,35 @@
     "@types/i18next": "^13.0.0",
     "@types/i18next-node-fs-backend": "^2.1.5",
     "@types/jsonschema": "^1.1.1",
-    "@types/lodash": "^4.17.15",
+    "@types/lodash": "^4.17.16",
     "@types/moment-duration-format": "^2.2.6",
-    "@types/node": "^22.13.1",
+    "@types/mui-image": "^1.0.5",
+    "@types/node": "^22.13.14",
     "@types/prettier": "^3.0.0",
     "@types/puppeteer-core": "^7.0.4",
-    "@types/react": "^19.0.8",
-    "@types/react-dom": "^19.0.3",
+    "@types/react": "^19.0.12",
+    "@types/react-dom": "^19.0.4",
     "@types/webpack-dev-server": "^4.7.2",
     "@types/webpack-env": "^1.18.8",
-    "@typescript-eslint/eslint-plugin": "^8.23.0",
-    "@typescript-eslint/parser": "^8.23.0",
+    "@typescript-eslint/eslint-plugin": "^8.28.0",
+    "@typescript-eslint/parser": "^8.28.0",
     "concurrently": "^9.1.2",
-    "copy-webpack-plugin": "^12.0.2",
+    "copy-webpack-plugin": "^13.0.0",
     "cross-env": "^7.0.3",
     "css-loader": "^7.1.2",
-    "electron": "^34.0.2",
-    "electron-builder": "^25.1.8",
-    "eslint": "^9.19.0",
-    "eslint-config-prettier": "^10.0.1",
+    "electron": "^35.1.2",
+    "electron-builder": "^26.0.12",
+    "eslint": "^9.23.0",
+    "eslint-config-prettier": "^10.1.1",
     "eslint-plugin-css": "^0.11.0",
     "eslint-plugin-react": "^7.37.4",
-    "eslint-webpack-plugin": "^4.2.0",
+    "eslint-webpack-plugin": "^5.0.0",
+    "globals": "^16.0.0",
     "html-webpack-plugin": "^5.6.3",
     "i18next-scanner-webpack": "^0.9.1",
+    "jiti": "^2.4.2",
     "mini-css-extract-plugin": "^2.9.2",
-    "prettier": "^3.4.2",
+    "prettier": "^3.5.3",
     "raw-loader": "^4.0.2",
     "rimraf": "^6.0.1",
     "source-map-loader": "^5.0.0",
@@ -104,11 +139,11 @@
     "ts-loader": "^9.5.2",
     "ts-node": "^10.9.2",
     "ts-node-dev": "^2.0.0",
-    "typescript": "^5.7.3",
+    "typescript": "^5.8.2",
     "wait-on": "^8.0.2",
-    "webpack": "^5.97.1",
+    "webpack": "^5.98.0",
     "webpack-cli": "^6.0.1",
-    "webpack-dev-server": "^5.2.0",
+    "webpack-dev-server": "^5.2.1",
     "webpack-node-externals": "^3.0.0"
   },
   "packageManager": "yarn@4.4.1"

package/public/profile/cookies.json

@@ -0,0 +1,18 @@
+[
+  {
+    "name": "SOCS",
+    "value": "CAISNQgREitib3FfaWRlbnRpdHlmcm9udGVuZHVpc2VydmVyXzIwMjUwMzI2LjA4X3AwGgJwbCACGgYIgKqSvwY",
+    "domain": ".youtube.com",
+    "path": "/",
+    "expires": 2298668700.829343,
+    "size": 91,
+    "httpOnly": false,
+    "secure": true,
+    "session": false,
+    "sameSite": "Lax",
+    "priority": "Medium",
+    "sameParty": false,
+    "sourceScheme": "Secure",
+    "sourcePort": 443
+  }
+]

package/src/App.styl

@@ -1,24 +1,54 @@
 @import "./styles/mixins.styl"
 @import "./styles/fonts.styl"
 
-html
-  font-size: 1rem
-  font-family: "Lato"
+html {
+    font-size: 1rem;
+    font-family: "Lato";
 
-  body
-    margin: 0
-    padding: 0
-    no-select()
+    body {
+        margin: 0;
+        padding: 0;
+        no-select();
+        
+        :global(#root) {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            overflow: hidden;
+        }
 
-    :global(#root)
-      position: absolute
-      width: 100%
-      height: 100%
-      overflow: hidden
-    
-    .app
-      background-color: var(--theme-palette-background-paper);
-      display: flex
-      flex-direction: column
-      height: 100vh
-      width:  100vw
+        .app {
+            background-color: var(--theme-palette-background-paper);
+            display: flex;
+            flex-direction: column;
+            height: 100vh;
+            width: 100vw;
+
+            &.help {
+                cursor: help !important;
+            }
+        }
+        
+        .help-popup {
+            z-index: 9999999;
+            padding: 12px;
+
+            .header {
+                font-weight: bold;
+                margin-bottom: 8px;
+            }
+
+            .content {
+                p {
+                    &:first-child {
+                        margin-top: 0;
+                    }
+
+                    &:last-child {
+                        margin-bottom: 0;
+                    }
+                }
+            } 
+        }
+    }
+}

package/src/App.tsx

@@ -1,28 +1,55 @@
+import classnames from "classnames";
+import _isArray from "lodash/isArray";
+import _map from "lodash/map";
+import _split from "lodash/split";
 import React from "react";
 import {HashRouter, Route, Routes} from "react-router-dom";
 
-import {Box, CssBaseline} from "@mui/material";
+import {Box, CssBaseline, Paper, Popper, Typography} from "@mui/material";
 
 import Styles from "./App.styl";
 import AppBar from "./components/appBar/AppBar";
+import useHelp from "./hooks/useHelp";
 import {useAppContext} from "./react/contexts/AppContext";
 import DevelopmentView from "./views/development/DevelopmentView";
 import {HomeView} from "./views/home/HomeView";
 import SettingsView from "./views/settings/SettingsView";
 
 export const App: React.FC = () => {
-    const { state } = useAppContext();
+    const {state} = useAppContext();
+    const {anchorEl, help} = useHelp();
+
+    const renderLineBreaks = (value: string) => {
+        return _map(_split(value, "\n"), (v, k) => <React.Fragment key={k}>{v}<br /></React.Fragment>);
+    };
+
+    const renderText = (value: string | string[]) => {
+        const valueArray = _isArray(value) ? value : [value];
+        
+        return _map(valueArray, (v, k) => <p key={k}>{renderLineBreaks(v)}</p>);
+    };
 
     return (
         <HashRouter>
-            <Box className={Styles.app}>
+            <Box className={classnames(Styles.app, {[Styles.help]: state.help})}>
                 <CssBaseline enableColorScheme />
-                <AppBar />
+                <AppBar disableNavigation={state.loading} />
                 <Routes location={state.location}>
                     <Route path="/" element={<HomeView />} />
                     <Route path="/settings" element={<SettingsView />} />
                     <Route path="/development" element={<DevelopmentView />} />
                 </Routes>
+                <Popper
+                    className={Styles.helpPopup}
+                    open={Boolean(anchorEl)}
+                    anchorEl={anchorEl}
+                    disablePortal
+                >
+                    <Paper sx={{p: 2}}>
+                        <Typography className={Styles.header} color="textSecondary">{help.header}</Typography>
+                        <Typography component="div" className={Styles.content}>{renderText(help.content)}</Typography>
+                    </Paper>
+                </Popper>
             </Box>
         </HashRouter>
     );

package/src/automations/Selectors.ts

@@ -0,0 +1,7 @@
+export const AlbumsHrefSelector = "//ytmusic-app-layout//div[@id='content']/ytmusic-browse-response//ytmusic-section-list-renderer//div[@id='content-group']//div[contains(@class, 'header-renderer')]/yt-formatted-string/a[contains(text(), 'Album')]";
+
+export const AlbumFilterSelector = "//ytmusic-app-layout//div[@id='content']/ytmusic-browse-response//ytmusic-section-list-renderer/div[@id='header']//iron-selector//a[contains(@title, 'Album')]";
+
+export const AlbumLinkSelector = "//ytmusic-app-layout//div[@id='content']/ytmusic-browse-response//ytmusic-section-list-renderer/div[@id='contents']/ytmusic-grid-renderer/div[@id='items']/*[contains(@class, 'ytmusic-grid-renderer')]//a[contains(@class, 'yt-simple-endpoint') and contains(@class, 'yt-formatted-string')]";
+
+export const AlbumsDirectLinkSelector = "//ytmusic-app-layout//div[@id='content']/ytmusic-browse-response//ytmusic-section-list-renderer//div[@id='content-group']//div[contains(@class, 'header-renderer')]/yt-formatted-string[contains(text(), 'Album')]//ancestor::div[contains(@class, 'ytmusic-shelf')]//div[@id='items-wrapper']/ul/*[contains(@class, 'ytmusic-carousel')]//a[contains(@class, 'yt-simple-endpoint') and contains(@class, 'yt-formatted-string')]";

package/src/automations/Youtube.ts

@@ -0,0 +1,138 @@
+import fs from "fs-extra";
+import {i18n as i18next} from "i18next";
+import _forEach from "lodash/forEach";
+import _includes from "lodash/includes";
+import _isEmpty from "lodash/isEmpty";
+import _map from "lodash/map";
+import _merge from "lodash/merge";
+import _replace from "lodash/replace";
+import {Browser, LaunchOptions, Page, TimeoutError} from "puppeteer";
+import puppeteer from "puppeteer-extra";
+import StealthPlugin from "puppeteer-extra-plugin-stealth";
+
+import {getProfilePath} from "../common/FileSystem";
+import {waitFor} from "../common/Helpers";
+import {GetYoutubeUrlParams, GetYoutubeUrlResult} from "../common/Messaging";
+import puppeteerOptions from "../common/PuppeteerOptions";
+import {IReporter, ProgressInfo, Reporter} from "../common/Reporter";
+import {
+    AlbumFilterSelector, AlbumLinkSelector, AlbumsDirectLinkSelector, AlbumsHrefSelector
+} from "./Selectors";
+
+let page: Page;
+let browser: Browser;
+let reporter: IReporter<GetYoutubeUrlResult>;
+
+puppeteer.use(StealthPlugin());
+
+const navigateToPage = async (url: string) => {
+    await page.goto(url, {
+        waitUntil: ["networkidle0", "domcontentloaded", "load"],
+        timeout: puppeteerOptions.timeout,
+    });
+};
+
+export const execute = async (
+    params: GetYoutubeUrlParams,
+    options: LaunchOptions,
+    i18n: i18next,
+    onProgress: (data: ProgressInfo<GetYoutubeUrlResult>) => void,
+) => {
+    try {
+        const result: GetYoutubeUrlResult = {warnings: [], errors: [], urls: []};
+        const userAgent = "Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Mobile Safari/537.3";
+        
+        await i18n.changeLanguage(params.lang);
+        
+        reporter = new Reporter(onProgress);
+        reporter.start(i18n.t("starting"));
+        browser = await puppeteer.launch(_merge(puppeteerOptions, options));
+        [page] = await browser.pages();
+        
+        await page.setUserAgent(userAgent);
+        
+        const cachedCookies = fs.readJSONSync(getProfilePath() + "/cookies.json", {throws: false});
+
+        if (_isEmpty(cachedCookies)) {
+            await waitFor(3000);
+            const pageCookies = await page.cookies();
+            
+            fs.writeJSONSync(getProfilePath() + "/cookies.json", pageCookies, {spaces: 2});
+
+            await page.setCookie(...pageCookies);
+        } else {
+            await page.setCookie(...cachedCookies);
+        }
+
+        await navigateToPage(params.url);
+        
+        const process = async (urlToProcess: string) => {
+            const results: string[] = [];
+            
+            try {                
+                await navigateToPage(urlToProcess);
+
+                const element = await page.waitForSelector(`::-p-xpath(${AlbumsHrefSelector})`, {timeout: 1000});
+                const albumsUrl = await element.evaluate((el) => el.getAttribute("href"));
+
+                await navigateToPage(`${params.url}/${albumsUrl}`);
+                const albumFilterButton = await page.waitForSelector(`::-p-xpath(${AlbumFilterSelector})`, {timeout: 1000});
+
+                albumFilterButton.click();
+                await page.waitForNetworkIdle();
+                
+                // await page.screenshot({path: './profile/debug.png', fullPage: true});
+                // fs.writeFileSync("./profile/debug.html", await page.content());
+                
+                const items = await page.$$eval(`xpath/${AlbumLinkSelector}`, (elements) => elements.map((el) => el.getAttribute("href")));
+
+                for (const item of items) {
+                    results.push(`${params.url}/${item}`);
+                }
+
+                return results;
+            } catch (error) {
+                const items = await page.$$eval(`xpath/${AlbumsDirectLinkSelector}`, (elements) => elements.map((el) => el.getAttribute("href")));
+
+                for (const item of items) {
+                    results.push(`${params.url}/${item}`);
+                }
+
+                return results;
+            }
+        };
+
+        for (const u of params.artistUrls) {
+            const data = await process(u);
+           
+            result.urls.push(...data);
+        }
+
+        reporter.finish("done", result);
+    } catch (error: any) {
+        const result: GetYoutubeUrlResult = {errors: []};
+        
+        if (error instanceof TimeoutError) {
+            result.errors.push({title: i18n.t("exceptionTimeout"), description: i18n.t("exceptionTimeoutText")});
+        } else {
+            result.errors.push({title: i18n.t("exceptionGetYoutubeUrls"), description: i18n.t("exceptionGetYoutubeUrlsText", {error: error.name})});
+        }
+        
+        reporter.finish("done", result);
+        console.error("Execution failed at stage: ", error.stack);
+    } finally {
+        await closeResources();
+    }
+};
+
+const closeResources = async () => {
+    if (page) await page.close();
+    if (browser) await browser.close();
+};
+
+export const cancel = async () => {
+    browser.close();
+    browser.disconnect();
+};
+
+export default execute;