yt-grabber 1.0.0

package/.eslintrc.json

@@ -0,0 +1,29 @@
+{
+  "env": {
+    "browser": true,
+    "es2021": true
+  },
+  "extends": ["eslint:recommended", "plugin:react/recommended", "plugin:@typescript-eslint/recommended", "prettier"],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaVersion": "latest",
+    "sourceType": "module"
+  },
+  "settings": {
+    "react": {
+        "version": "detect"
+    }
+  },
+  "plugins": ["react", "@typescript-eslint"],
+  "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/.prettierrc

@@ -0,0 +1,19 @@
+{
+  "trailingComma": "all",
+  "semi": true,
+  "tabWidth": 4,
+  "singleQuote": false,
+  "printWidth": 120,
+  "bracketSpacing": false,
+  "arrowParens": "always",
+  "tslintIntegration": true,
+  "eslintIntegration": true,
+  "overrides": [
+    {
+      "files": ["*.json", ".prettierrc"],
+      "options": {
+        "tabWidth": 4
+      }
+    }
+  ]
+}

package/.vscode/extensions.json

@@ -0,0 +1,7 @@
+{
+  "recommendations": [
+    "arcanis.vscode-zipfs",
+    "dbaeumer.vscode-eslint",
+    "esbenp.prettier-vscode"
+  ]
+}

package/.vscode/settings.json

@@ -0,0 +1,23 @@
+{
+  "files.exclude": {
+    "**/.git": true,
+    "**/.svn": true,
+    "**/.hg": true,
+    "**/CVS": true,
+    "**/.DS_Store": false,
+    "**/Thumbs.db": false,
+    "**/.yarn/*/**": true,
+    "**/node_modules": true,
+    "**/node_modules/*/**": true,
+    "node_modules/*/**": true
+  },
+  "explorerExclude.backup": {},
+  "CodeGPT.apiKey": "CodeGPT Plus",
+  "search.exclude": {
+    "**/.yarn": true,
+    "**/.pnp.*": true
+  },
+  "eslint.nodePath": ".yarn/sdks",
+  "prettier.prettierPath": ".yarn/sdks/prettier/index.cjs",
+"typescript.enablePromptUseWorkspaceTsdk": true,
+}

package/.yarnrc.yml

@@ -0,0 +1,13 @@
+compressionLevel: mixed
+
+enableGlobalCache: false
+
+nodeLinker: node-modules
+
+packageExtensions:  
+  "usehooks-ts@*":
+    dependencies:
+      "react": "^19.0.0"
+    peerDependencies:
+      "react": "^19.0.0"
+

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Marcin Karpiński
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,11 @@
+## Install:
+`yarn install`
+
+## Build:
+`yarn build`
+
+## Start:
+`yarn start`
+
+## Usage:
+Download and run latest binary release.

package/package.json

@@ -0,0 +1,115 @@
+{
+  "name": "yt-grabber",
+  "version": "1.0.0",
+  "description": "Youtube Grabber",
+  "main": "./dist/index.js",
+  "repository": {
+    "url": "https://github.com/karenpommeroy/yt-grabber.git"
+  },
+  "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 .",
+    "watch": "webpack --watch --config webpack.config.ts",
+    "pack": "yarn build:prod && electron-builder --dir",
+    "dist": "yarn build:prod && electron-builder"
+  },
+  "build": {
+    "appId": "yt.grabber",
+    "files": [
+      "dist/**/*",
+      "package.json"
+    ],
+    "directories": {
+      "output": "release"
+    },
+    "extraResources": [
+        {
+            "from": "dist/resources/bin",
+            "to": "bin",
+            "filter": ["*.exe"]
+        }
+    ]
+  },
+  "author": "Marcin Karpiński <mkarpins@gmail.com>",
+  "license": "MIT",
+  "dependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@mui/icons-material": "^6.4.2",
+    "@mui/material": "^6.4.2",
+    "classnames": "^2.5.1",
+    "electron-devtools-installer": "^4.0.0",
+    "electron-store": "^8.2.0",
+    "fs-extra": "^11.3.0",
+    "i18next": "^24.2.2",
+    "i18next-node-fs-backend": "^2.1.3",
+    "jsonschema": "^1.5.0",
+    "lodash": "^4.17.21",
+    "mkdirp": "^3.0.1",
+    "moment": "^2.30.1",
+    "moment-duration-format": "^2.3.2",
+    "puppeteer": "^24.1.1",
+    "puppeteer-core": "^24.1.1",
+    "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-number-format": "^5.4.3",
+    "react-router-dom": "^7.1.5",
+    "usehooks-ts": "^3.1.0",
+    "yt-dlp-wrap": "^2.3.12"
+  },
+  "devDependencies": {
+    "@types/eslint": "^9.6.1",
+    "@types/fs-extra": "^11.0.4",
+    "@types/i18next": "^13.0.0",
+    "@types/i18next-node-fs-backend": "^2.1.5",
+    "@types/jsonschema": "^1.1.1",
+    "@types/lodash": "^4.17.15",
+    "@types/moment-duration-format": "^2.2.6",
+    "@types/node": "^22.13.1",
+    "@types/prettier": "^3.0.0",
+    "@types/puppeteer-core": "^7.0.4",
+    "@types/react": "^19.0.8",
+    "@types/react-dom": "^19.0.3",
+    "@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",
+    "concurrently": "^9.1.2",
+    "copy-webpack-plugin": "^12.0.2",
+    "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",
+    "eslint-plugin-css": "^0.11.0",
+    "eslint-plugin-react": "^7.37.4",
+    "eslint-webpack-plugin": "^4.2.0",
+    "html-webpack-plugin": "^5.6.3",
+    "i18next-scanner-webpack": "^0.9.1",
+    "mini-css-extract-plugin": "^2.9.2",
+    "prettier": "^3.4.2",
+    "raw-loader": "^4.0.2",
+    "rimraf": "^6.0.1",
+    "source-map-loader": "^5.0.0",
+    "stylus": "^0.64.0",
+    "stylus-loader": "^8.1.1",
+    "ts-loader": "^9.5.2",
+    "ts-node": "^10.9.2",
+    "ts-node-dev": "^2.0.0",
+    "typescript": "^5.7.3",
+    "wait-on": "^8.0.2",
+    "webpack": "^5.97.1",
+    "webpack-cli": "^6.0.1",
+    "webpack-dev-server": "^5.2.0",
+    "webpack-node-externals": "^3.0.0"
+  },
+  "packageManager": "yarn@4.4.1"
+}

package/public/index.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <meta
+            http-equiv="Content-Security-Policy"
+            content="default-src 'self' 'unsafe-inline'; img-src * 'self' ; script-src 'self' 'unsafe-eval'; style-src-elem 'self' 'unsafe-inline';"
+        />
+        <title>Youtube Grabber</title>
+        <link rel="icon" type="image/png" href="/resources/icons/favicon-32x32.png" />
+
+        <!--[if IE]>
+            <link rel="SHORTCUT ICON" href="/resources/icons/favicon.ico" />
+        <![endif]-->
+    </head>
+    <body>
+        <div id="root"></div>
+    </body>
+</html>

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

@@ -0,0 +1,7 @@
+import ElectronStore from "electron-store";
+
+import {IStore} from "../common/Store";
+
+declare global {
+    var store: ElectronStore<IStore>;
+}

package/src/@types/i18next-scanner-webpack.d.ts

@@ -0,0 +1 @@
+declare module "i18next-scanner-webpack";

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

@@ -0,0 +1,4 @@
+declare module "*.styl" {
+    const styles: { [key: string]: string };
+    export default styles;
+}

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

@@ -0,0 +1 @@
+declare module "*.svg";

package/src/App.styl

@@ -0,0 +1,24 @@
+@import "./styles/mixins.styl"
+@import "./styles/fonts.styl"
+
+html
+  font-size: 1rem
+  font-family: "Lato"
+
+  body
+    margin: 0
+    padding: 0
+    no-select()
+
+    :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

package/src/App.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+import {HashRouter, Route, Routes} from "react-router-dom";
+
+import {Box, CssBaseline} from "@mui/material";
+
+import Styles from "./App.styl";
+import AppBar from "./components/appBar/AppBar";
+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();
+
+    return (
+        <HashRouter>
+            <Box className={Styles.app}>
+                <CssBaseline enableColorScheme />
+                <AppBar />
+                <Routes location={state.location}>
+                    <Route path="/" element={<HomeView />} />
+                    <Route path="/settings" element={<SettingsView />} />
+                    <Route path="/development" element={<DevelopmentView />} />
+                </Routes>
+            </Box>
+        </HashRouter>
+    );
+};
+
+export default App;

package/src/bootstrap.tsx

@@ -0,0 +1,30 @@
+import moment from "moment";
+import momentDurationFormat from "moment-duration-format";
+import React from "react";
+import {I18nextProvider} from "react-i18next";
+
+import App from "./App";
+import i18n from "./i18next";
+import {AppContextProvider} from "./react/contexts/AppContext";
+import {AppThemeProvider} from "./react/contexts/AppThemeContext";
+import {DataProvider} from "./react/contexts/DataContext";
+
+export const Bootstrap: React.FC = () => {
+    momentDurationFormat(moment as any);
+    moment.updateLocale("en", {week: {dow: 1}});
+    i18n.changeLanguage(global.store.get("application").language);
+
+    return (
+        <AppContextProvider>
+            <DataProvider>
+                <I18nextProvider i18n={i18n}>
+                    <AppThemeProvider>
+                        <App />
+                    </AppThemeProvider>
+                </I18nextProvider>
+            </DataProvider>
+        </AppContextProvider>
+    );
+};
+
+export default App;

package/src/common/CancellablePromise.ts

@@ -0,0 +1,22 @@
+export interface ICancelablePromise {
+    promise: Promise<any>;
+    cancel: () => void;
+}
+
+export const cancellablePromise = (promise: Promise<any>): ICancelablePromise => {
+    let isCanceled = false;
+
+    const wrappedPromise = new Promise((resolve, reject) => {
+        promise.then(
+            (value) => (isCanceled ? reject({ isCanceled, value }) : resolve(value)),
+            (error) => reject({ isCanceled, error }),
+        );
+    });
+
+    return {
+        promise: wrappedPromise,
+        cancel: () => (isCanceled = true),
+    };
+};
+
+export default cancellablePromise;

package/src/common/ComponentDisplayMode.ts

@@ -0,0 +1,8 @@
+export enum ComponentDisplayMode {
+    Minimal = 0,
+    Compact = 1,
+    Extended = 2,
+    Full = 3,
+}
+
+export default ComponentDisplayMode;

package/src/common/Delay.ts

@@ -0,0 +1,3 @@
+export const delay = (miliseconds: number) => new Promise((resolve) => setTimeout(resolve, miliseconds));
+
+export default delay;

package/src/common/FileSystem.ts

@@ -0,0 +1,171 @@
+import fs from "fs-extra";
+import http from "http";
+import https from "https";
+import $_ from "lodash";
+import {mkdirp} from "mkdirp";
+import path from "path";
+
+const getDirName = path.dirname;
+
+export const readFileAsync = (filename: string, encoding: BufferEncoding = "utf-8") => {
+    return new Promise<string>((resolve, reject) => {
+        try {
+            fs.readFile(filename, { encoding }, (error: any, buffer: any) => {
+                if (error) resolve("");
+                else resolve(buffer);
+            });
+        } catch (error) {
+            reject(error);
+        }
+    });
+};
+
+export const readFileSync = (filename: string, encoding: BufferEncoding = "utf-8") => {
+    return fs.readFileSync(filename, { encoding });
+};
+
+export const writeFileAsync = (data: any, filename: string, encoding?: BufferEncoding, mode: any = 0o775) => {
+    return new Promise(async (resolve, reject) => {
+        try {
+            const mkdirResult = await mkdirp(getDirName(filename), { mode: 0o775 });
+
+            fs.writeFile(filename, data, { encoding, mode }, (error: any, result?: any) => {
+                if (error) reject(error.message);
+                else resolve(result);
+            });
+        } catch (error) {
+            reject(error);
+        }
+    });
+};
+
+export const writeStreamAsync = (url: string, filename: string, encoding?: BufferEncoding) => {
+    return new Promise(async (resolve, reject) => {
+        try {
+            const mkdirResult = await mkdirp(getDirName(filename), { mode: 0o775 });
+
+            const file = fs.createWriteStream(filename as any, { encoding });
+            file.on("error", (error: any) => {
+                reject(error.message);
+            });
+            const action = $_.startsWith(url, "https") ? https : http;
+
+            return action.get(url, (response) => {
+                response.on("error", (error) => {
+                    fs.unlinkSync(filename);
+                    reject(error);
+                });
+
+                response.pipe(file);
+                file.on("finish", () => {
+                    resolve(file);
+                });
+            });
+        } catch (error) {
+            reject(error);
+        }
+    });
+};
+
+export const copy = async (src: string, dest: string) => {
+    const ensurePath = await fs.mkdirp(path.dirname(dest));
+
+    return fs.copyFile(src, dest);
+};
+
+export const findFiles = async (
+    pathname: string,
+    options?: { filter: string[] },
+): Promise<Array<{ id: string; name: string; path: string }>> => {
+    const fileList: Array<{ id: string; name: string; path: string }> = [];
+
+    if (!fs.existsSync(pathname)) {
+        throw new Error("Directory does not exists!");
+    }
+    const filter = $_.get(options, "filter");
+    const files = await fs.readdir(pathname);
+
+    for (const file of files) {
+        const filename = path.join(pathname, file);
+        const stat = fs.lstatSync(filename);
+
+        if (stat.isDirectory()) {
+            fileList.push(...(await findFiles(filename, options)));
+        } else if ($_.includes(filter, path.extname(filename))) {
+            fileList.push({
+                id: path.relative("public", filename),
+                name: path.parse(filename).name,
+                path: path.relative("public", filename),
+            });
+        }
+    }
+
+    return fileList;
+};
+
+export const createDirectory = (pathname: string) => {
+    return mkdirp(getDirName(pathname), { mode: 0o775 });
+};
+
+export const removeDirectory = (pathname: string) => {
+    return new Promise(async (resolve, reject) => {
+        if (!fs.existsSync(pathname)) {
+            resolve("Directory does not exists!");
+        }
+        const err = (await fs.remove(getDirName(pathname))) as any;
+
+        if (err) return reject(err);
+
+        resolve(pathname);
+    });
+};
+
+export const remove = (filename: string) => {
+    return new Promise((resolve, reject) => {
+        try {
+            if (!fs.existsSync(filename)) {
+                return resolve(filename);
+            }
+            fs.unlink(filename, (error) => {
+                if (error) reject(error);
+                else resolve(filename);
+            });
+        } catch (error) {
+            reject(error);
+        }
+    });
+};
+
+// export const getDirectorySize = (pathname: string) => {
+//     return new Promise((resolve, reject) => {
+//         try {
+//             getSize(pathname, (error: any, size: number) => {
+//                 if (error) return reject(error);
+
+//                 return resolve(size);
+//             });
+//         } catch (error) {
+//             reject(error);
+//         }
+//     });
+// };
+
+// export const getUserDirectorySize = (userId: string, host: string) => {
+//     return getDirectorySize(`${host}/data/${userId}`);
+// };
+
+// export const downloadAndSaveImage = (sourceUrl: string, targetPath: string, encoding: string = "base64") => {
+//     return writeStreamAsync(sourceUrl, targetPath, encoding);
+// };
+
+// export const downloadAndSaveFile = (sourceUrl: string, targetPath: string, encoding?: string) => {
+//     return writeStreamAsync(sourceUrl, targetPath, encoding);
+// };
+
+// export const saveImage = (imageData: string, targetPath: string, encoding: string = "base64") => {
+//     if ($_.startsWith(imageData, "http")) {
+//         return downloadAndSaveImage(imageData, targetPath, encoding);
+//     }
+
+//     return writeFileAsync(imageData, targetPath, encoding);
+// };