yt-grabber 1.8.3 → 1.8.5

package/.swcrc

@@ -0,0 +1,20 @@
+{
+  "jsc": {
+    "target": "es2020",
+    "parser": {
+      "syntax": "typescript",
+      "tsx": true,
+      "decorators": false
+    },
+    "transform": {
+      "react": {
+        "runtime": "automatic",
+        "development": true
+      }
+    }
+  },
+  "module": {
+    "type": "commonjs"
+  },
+  "sourceMaps": true
+}

package/eslint.config.ts

@@ -1,61 +1,62 @@
-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: ["warn", 4],
-        "linebreak-style": ["warn", "windows"],
-        quotes: ["warn", "double"],
-        semi: ["warn", "always"],
-        "@typescript-eslint/no-unused-vars": ["warn"],
-        "@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,
-    },
+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: ["warn", 4],
+        "linebreak-style": ["warn", "windows"],
+        quotes: ["warn", "double"],
+        semi: ["warn", "always"],
+        "@typescript-eslint/no-unused-vars": ["warn"],
+        "@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,
+        "react/react-in-jsx-scope": 0,
+    },
 }]);

package/jest.config.ts

@@ -0,0 +1,21 @@
+import type {Config} from "jest";
+
+const config: Config = {
+    rootDir: ".",
+    testEnvironment: "jsdom",
+    transform: {
+        "^.+\\.(t|j)sx?$": ["@swc/jest", {}],
+    },
+    moduleNameMapper: {
+        "\\.(css|less|scss|sass|styl)$": "identity-obj-proxy",
+        "\\.(jpg|jpeg|png|gif|svg)$": "<rootDir>/tests/FileMock.ts",
+        "^@tests/(.*)$": "<rootDir>/tests/$1"
+    },
+    setupFilesAfterEnv: [
+        "@testing-library/jest-dom",
+        "<rootDir>/jest.setup.ts",
+    ],
+    testPathIgnorePatterns: ["/node_modules/", "/dist/", "/out/", "/e2e/"],
+};
+
+export default config;

package/jest.setup.ts

@@ -0,0 +1,33 @@
+import {TextDecoder, TextEncoder} from "util";
+
+global.TextEncoder = TextEncoder;
+global.TextDecoder = TextDecoder as typeof global.TextDecoder;
+
+const mockStore = {
+    get: jest.fn().mockReturnValue({language: "en"}),
+    set: jest.fn(),
+    delete: jest.fn(),
+    clear: jest.fn(),
+    has: jest.fn().mockReturnValue(true),
+    onDidAnyChange: jest.fn().mockReturnValue(jest.fn()),
+    onDidChange: jest.fn().mockReturnValue(jest.fn())
+};
+
+Object.defineProperty(process, "resourcesPath", {
+    value: "/mocked/resources/path",
+    writable: false,
+});
+
+jest.mock("electron", () => ({
+    ipcRenderer: {
+        send: jest.fn(),
+        on: jest.fn(),
+        off: jest.fn(),
+    },
+}));
+
+jest.mock("electron-store", () => {
+    return jest.fn(() => mockStore);
+});
+
+(global as any).store = mockStore;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "yt-grabber",
-  "version": "1.8.3",
+  "version": "1.8.5",
   "description": "Youtube Grabber - robust desktop application designed to retrieve multimedia from YouTube and YouTube Music services",
   "keywords": [
     "youtube",
@@ -36,9 +36,10 @@
     "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 .",
     "electron-debug": "wait-on dist/index.js && ELECTRON_DISABLE_SECURITY_WARNINGS=true electron --inspect-brk=9229 .",
+    "test": "jest",
     "watch": "webpack --watch --config webpack.config.ts",
     "pack": "yarn build:prod && electron-builder --dir",
-    "dist": "yarn build:prod && electron-builder"
+    "dist": "yarn build:prod && yarn test && electron-builder"
   },
   "build": {
     "appId": "yt.grabber",
@@ -108,7 +109,6 @@
     "moment": "^2.30.1",
     "moment-duration-format": "^2.3.2",
     "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",
@@ -123,17 +123,23 @@
   },
   "devDependencies": {
     "@playwright/test": "^1.53.1",
+    "@swc/core": "^1.13.5",
+    "@swc/jest": "^0.2.39",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "^14.6.1",
     "@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/jest": "^30.0.0",
     "@types/jsonschema": "^1.1.1",
     "@types/lodash": "^4.17.16",
     "@types/moment-duration-format": "^2.2.6",
     "@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.12",
     "@types/react-dom": "^19.0.4",
     "@types/webpack-dev-server": "^4.7.2",
@@ -156,6 +162,9 @@
     "globals": "^16.0.0",
     "html-webpack-plugin": "^5.6.3",
     "i18next-scanner-webpack": "^0.9.1",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^30.2.0",
+    "jest-environment-jsdom": "^30.2.0",
     "jiti": "^2.4.2",
     "mini-css-extract-plugin": "^2.9.2",
     "prettier": "^3.5.3",
@@ -168,6 +177,7 @@
     "ts-node": "^10.9.2",
     "ts-node-dev": "^2.0.0",
     "typescript": "^5.8.2",
+    "util": "^0.12.5",
     "wait-on": "^8.0.2",
     "webpack": "^5.98.0",
     "webpack-cli": "^6.0.1",

package/playwright.config.ts

@@ -1,79 +1,79 @@
-import {defineConfig, devices} from "@playwright/test";
-
-/**
- * Read environment variables from file.
- * https://github.com/motdotla/dotenv
- */
-// import dotenv from "dotenv";
-// import path from "path";
-// dotenv.config({ path: path.resolve(__dirname, ".env") });
-
-/**
- * See https://playwright.dev/docs/test-configuration.
- */
-export default defineConfig({
-    testDir: "./e2e",
-    /* Run tests in files in parallel */
-    fullyParallel: true,
-    /* Fail the build on CI if you accidentally left test.only in the source code. */
-    forbidOnly: !!process.env.CI,
-    /* Retry on CI only */
-    retries: process.env.CI ? 2 : 0,
-    /* Opt out of parallel tests on CI. */
-    workers: process.env.CI ? 1 : undefined,
-    /* Reporter to use. See https://playwright.dev/docs/test-reporters */
-    reporter: "html",
-    /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
-    use: {
-        /* Base URL to use in actions like `await page.goto("/")`. */
-        // baseURL: "http://localhost:3000",
-
-        /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
-        trace: "on-first-retry",
-    },
-
-    /* Configure projects for major browsers */
-    projects: [
-        {
-            name: "chromium",
-            use: {...devices["Desktop Chrome"]},
-        },
-
-        // {
-        //   name: "firefox",
-        //   use: { ...devices["Desktop Firefox"] },
-        // },
-
-        // {
-        //   name: "webkit",
-        //   use: { ...devices["Desktop Safari"] },
-        // },
-
-        /* Test against mobile viewports. */
-        // {
-        //   name: "Mobile Chrome",
-        //   use: { ...devices["Pixel 5"] },
-        // },
-        // {
-        //   name: "Mobile Safari",
-        //   use: { ...devices["iPhone 12"] },
-        // },
-
-        /* Test against branded browsers. */
-        // {
-        //   name: "Microsoft Edge",
-        //   use: { ...devices["Desktop Edge"], channel: "msedge" },
-        // },
-        // {
-        //   name: "Google Chrome",
-        //   use: { ...devices["Desktop Chrome"], channel: "chrome" },
-        // },
-    ],
-
-    /* Run your local dev server before starting the tests */
-    // webServer: {
-    //   command: "npm run start",
-    //   url: "http://localhost:3000",
-    //   reuseExistingServer: !process.env.CI,
-    // },
-});
+import {defineConfig, devices} from "@playwright/test";
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// import dotenv from "dotenv";
+// import path from "path";
+// dotenv.config({ path: path.resolve(__dirname, ".env") });
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+    testDir: "./e2e",
+    /* Run tests in files in parallel */
+    fullyParallel: true,
+    /* Fail the build on CI if you accidentally left test.only in the source code. */
+    forbidOnly: !!process.env.CI,
+    /* Retry on CI only */
+    retries: process.env.CI ? 2 : 0,
+    /* Opt out of parallel tests on CI. */
+    workers: process.env.CI ? 1 : undefined,
+    /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+    reporter: "html",
+    /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+    use: {
+        /* Base URL to use in actions like `await page.goto("/")`. */
+        // baseURL: "http://localhost:3000",
+
+        /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+        trace: "on-first-retry",
+    },
+
+    /* Configure projects for major browsers */
+    projects: [
+        {
+            name: "chromium",
+            use: {...devices["Desktop Chrome"]},
+        },
+
+        // {
+        //   name: "firefox",
+        //   use: { ...devices["Desktop Firefox"] },
+        // },
+
+        // {
+        //   name: "webkit",
+        //   use: { ...devices["Desktop Safari"] },
+        // },
+
+        /* Test against mobile viewports. */
+        // {
+        //   name: "Mobile Chrome",
+        //   use: { ...devices["Pixel 5"] },
+        // },
+        // {
+        //   name: "Mobile Safari",
+        //   use: { ...devices["iPhone 12"] },
+        // },
+
+        /* Test against branded browsers. */
+        // {
+        //   name: "Microsoft Edge",
+        //   use: { ...devices["Desktop Edge"], channel: "msedge" },
+        // },
+        // {
+        //   name: "Google Chrome",
+        //   use: { ...devices["Desktop Chrome"], channel: "chrome" },
+        // },
+    ],
+
+    /* Run your local dev server before starting the tests */
+    // webServer: {
+    //   command: "npm run start",
+    //   url: "http://localhost:3000",
+    //   reuseExistingServer: !process.env.CI,
+    // },
+});

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

@@ -4,4 +4,8 @@ import {IStore} from "../common/Store";
 
 declare global {
     var store: ElectronStore<IStore>;
+
+    interface Global {
+    [key: string]: any;
+  }
 }

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

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

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

@@ -0,0 +1,2 @@
+/// <reference types="@types/jest" />
+/// <reference types="@testing-library/jest-dom" />

package/src/@types/webpack-node-externals.d.ts

@@ -0,0 +1 @@
+declare module "webpack-node-externals";

package/src/App.test.tsx

@@ -0,0 +1,15 @@
+
+import {screen} from "@testing-library/react";
+import {render} from "@tests/TestRenderer";
+
+import App from "./App";
+
+describe("App component", () => {
+
+    test("renders properly", async () => {
+        await render(<App data-testid="app" />);
+       
+        expect(screen.getByTestId("app")).toBeInTheDocument();
+    });
+
+});

package/src/App.tsx

@@ -15,7 +15,7 @@ import DevelopmentView from "./views/development/DevelopmentView";
 import {HomeView} from "./views/home/HomeView";
 import SettingsView from "./views/settings/SettingsView";
 
-export const App: React.FC = () => {
+export const App: React.FC = (props: Record<string, any>) => {
     const {state} = useAppContext();
     const {anchorEl, help} = useHelp();
 
@@ -31,7 +31,7 @@ export const App: React.FC = () => {
 
     return (
         <HashRouter>
-            <Box className={classnames(Styles.app, {[Styles.help]: state.help})}>
+            <Box {...props} className={classnames(Styles.app, {[Styles.help]: state.help})}>
                 <CssBaseline enableColorScheme />
                 <AppBar disableNavigation={state.loading} />
                 <Routes location={state.location}>

package/src/common/Helpers.ts

@@ -9,16 +9,22 @@ import _replace from "lodash/replace";
 import {VideoType} from "./Media";
 import {TrackInfo, UrlType, YoutubeInfoResult} from "./Youtube";
 
+type DataAttributes<T> = {
+  [K in keyof T as K extends `data-${string}` ? K : never]: T[K];
+};
+
+type NonDataAttributes<T> = Omit<T, keyof DataAttributes<T>>;
+
 export const isDev = () => process.env.NODE_ENV === "development";
 
 export const formatFileSize = (sizeInBytes: number, decimals = 2) => {
     if (!_isNumber(sizeInBytes)) return "";
     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];
 };
 
@@ -33,7 +39,7 @@ export const escapePathString = (value: string) => {
 export const resolveMockData = (delay = 1000) => {
     const TracksMock: any[] = [];
     const groupped = _groupBy(TracksMock as unknown as TrackInfo[], (item) => item.playlist_id ?? item.id);
-    
+
     return _map(groupped, (v, k, c) => new Promise<YoutubeInfoResult>((resolve) => {
         setTimeout(() => {
             resolve({url: k, value: v});
@@ -61,7 +67,7 @@ export const isTrack = (url: string) => {
     return trackRegex.test(url);
 };
 
-export const getUrlType = (url: string) => {    
+export const getUrlType = (url: string) => {
     if (isArtist(url)) {
         return UrlType.Artist;
     } else if (isPlaylist(url)) {
@@ -74,5 +80,30 @@ export const getUrlType = (url: string) => {
 };
 
 export const getRealFileExtension = (ext: string) => {
-    return _includes([VideoType.Avi, VideoType.Mov, VideoType.Mpeg], ext) ? VideoType.Mkv : ext;
+    return _includes([VideoType.Avi, VideoType.Mov, VideoType.Mpeg, VideoType.Gif], ext) ? VideoType.Mkv : ext;
+};
+
+export const getDataAttributes = (props: Record<string, any>) => {
+    const dataAttrs: Record<string, any> = {};
+    for (const key in props) {
+        if (key.startsWith("data-")) {
+            dataAttrs[key] = props[key];
+        }
+    }
+    return dataAttrs;
+};
+
+export const splitDataAttributes = <T extends Record<string, any>>(props: T) => {
+    const dataProps: Partial<DataAttributes<T>> = {};
+    const restProps: Partial<NonDataAttributes<T>> = {};
+
+    for (const key in props) {
+        if (key.startsWith("data-")) {
+            (dataProps as any)[key] = props[key];
+        } else {
+            (restProps as any)[key] = props[key];
+        }
+    }
+
+    return [dataProps as DataAttributes<T>, restProps as NonDataAttributes<T>] as const;
 };

package/src/common/Media.ts

@@ -16,6 +16,7 @@ export enum VideoType {
     Mov = "mov",
     Avi = "avi",
     Mpeg = "mpeg",
+    Gif = "gif",
 };
 
 export type Format = {
@@ -23,6 +24,8 @@ export type Format = {
     extension?: AudioType | VideoType;
     videoQuality?: string;
     audioQuality?: number;
+    gifTopText?: string;
+    gifBottomText?: string;
 }
 
 export enum FormatScope {

package/src/common/Store.ts

@@ -8,6 +8,7 @@ export type ApplicationOptions = {
     outputDirectory?: string;
     ytdlpExecutablePath?: string;
     ffmpegExecutablePath?: string;
+    gifsicleExecutablePath?: string;
     chromeExecutablePath?: string;
     albumOutputTemplate?: string;
     playlistOutputTemplate?: string;
@@ -75,6 +76,10 @@ export const StoreSchema: Schema<IStore> = {
                 type: "string",
                 default: ""
             },
+            gifsicleExecutablePath: {
+                type: "string",
+                default: ""
+            },
             chromeExecutablePath: {
                 type: "string",
                 default: ""