yt-grabber 1.0.0

package/src/hooks/useMultiClickHandler.ts

@@ -0,0 +1,41 @@
+import cancellablePromise from "../common/CancellablePromise";
+import delay from "../common/Delay";
+import useCancellablePromises from "./useCancellablePromises";
+
+export interface IUseMultiClickHandlerProps {
+    timeout?: number;
+    onClick?: (data?: any) => void;
+    onDoubleClick?: (data?: any) => void;
+}
+
+const useMultiClickHandler = (props: IUseMultiClickHandlerProps) => {
+    const { timeout = 300, onClick, onDoubleClick } = props;
+    const api = useCancellablePromises();
+
+    const handleClick = (data?: any) => {
+        api.clearPendingPromises();
+        const waitForClick = cancellablePromise(delay(timeout));
+        api.appendPendingPromise(waitForClick);
+
+        return waitForClick.promise
+            .then(() => {
+                api.removePendingPromise(waitForClick);
+                onClick(data);
+            })
+            .catch((errorInfo: any) => {
+                api.removePendingPromise(waitForClick);
+                if (!errorInfo.isCanceled) {
+                    throw errorInfo.error;
+                }
+            });
+    };
+
+    const handleDoubleClick = (data?: any) => {
+        api.clearPendingPromises();
+        onDoubleClick(data);
+    };
+
+    return [handleClick, handleDoubleClick];
+};
+
+export default useMultiClickHandler;

package/src/i18next.ts

@@ -0,0 +1,33 @@
+import i18next from "i18next";
+import i18nextBackend from "i18next-node-fs-backend";
+import $_ from "lodash";
+import path from "path";
+import {initReactI18next} from "react-i18next";
+
+const isMac = process.platform === "darwin";
+const isDev = process.env.NODE_ENV === "development";
+const prependPath = isMac && !isDev ? path.join(process.resourcesPath, "..") :  ".";
+const localePath = $_.replace(!isDev ? path.join(process.resourcesPath, "locales") : path.join(__dirname, "resources", "locales"), /\\/g, "/");
+
+i18next.use(i18nextBackend).use(initReactI18next).init({
+    backend: {
+        loadPath: localePath + "/{{lng}}/{{ns}}.json",
+        addPath: prependPath + "/src/resources/locales/{{lng}}/{{ns}}.missing.json",
+    },
+    lng: "en-GB",
+    preload: ["en-GB", "de-DE", "pl-PL"],
+    debug: false, // process.env.NODE_ENV === "development",
+    saveMissing: false,
+    saveMissingTo: "all",
+    load: "currentOnly",
+    returnEmptyString: false,
+    fallbackLng: false,
+    defaultNS: "translation",
+    ns: "translation",
+    interpolation: {
+        escapeValue: false,
+    },
+    supportedLngs: ["en-GB", "de-DE", "pl-PL"],
+});
+
+export default i18next;

package/src/index.ts

@@ -0,0 +1,65 @@
+import {app, BrowserWindow} from "electron";
+import installExtension, {REACT_DEVELOPER_TOOLS} from "electron-devtools-installer";
+import Store from "electron-store";
+import path from "path";
+
+import i18n from "./i18next";
+
+let mainWindow: BrowserWindow | null;
+
+process.traceProcessWarnings = true;
+Store.initRenderer();
+
+const isDev = () => !app.isPackaged;
+
+const createWindow = async () => {
+    mainWindow = new BrowserWindow({
+        width: 1000,
+        height: 900,
+        frame: true,
+        roundedCorners: true,
+        title: "YT Grabber",
+        webPreferences: {
+            nodeIntegration: true,
+            contextIsolation: false,
+        },
+    });
+    mainWindow.loadFile(path.join(__dirname, "index.html"));
+
+    if (isDev()) {
+        mainWindow.webContents.openDevTools({mode: "detach"});
+    } else {
+        mainWindow.removeMenu();
+        mainWindow.setMenu(null);
+    }
+
+    mainWindow.on("closed", () => {
+        mainWindow = null;
+    });
+};
+
+app.on("ready", createWindow);
+
+app.on("window-all-closed", () => {
+    if (process.platform !== "darwin") {
+        app.quit();
+    }
+});
+
+app.on("activate", () => {
+    if (mainWindow === null) {
+        createWindow();
+    }
+});
+
+app.on("before-quit", () => {
+    if (mainWindow !== null) {
+        mainWindow.removeAllListeners("closed");
+    }
+});
+
+app.whenReady().then(() => {
+    installExtension(REACT_DEVELOPER_TOOLS)
+        .then((name) => console.log(`Added Extension:  ${name}`))
+        .catch((err) => console.log("An error occurred: ", err));
+});

package/src/react/actions/Action.ts

@@ -0,0 +1,3 @@
+export interface IAction<T> {
+    type: T;
+}

package/src/react/actions/AppActions.ts

@@ -0,0 +1,41 @@
+import {Dispatch} from "react";
+
+import {ColorMode} from "../../common/Theme";
+import {MediaFormat} from "../../enums/Media";
+import {IAction} from "./Action";
+
+export enum AppActions {
+    SetLocation = "SET_LOCATION",
+    SetTheme = "SET_THEME",
+    SetMode = "SET_MODE",
+    SetUrls = "SET_URLS",
+    SetSelectedAction = "SET_SELECTED_ACTION",
+    SetFormat = "SET_FORMAT",
+    SetLoading = "SET_LOADING",
+    SetQueue = "SET_QUEUE",
+    SetControllers = "SET_CONTROLLERS",
+}
+
+export interface IAppAction extends IAction<AppActions> {
+    location?: string;
+    theme?: string;
+    mode?: ColorMode;
+    urls?: string[];
+    selectedAction?: string;
+    format?: MediaFormat;
+    loading?: boolean;
+    queue?: string[];
+    controllers?: AbortController[];
+}
+
+export const actions = (dispatch: Dispatch<IAppAction>) => ({
+    setLocation: (location: string) => dispatch({ type: AppActions.SetLocation, location }),
+    setTheme: (theme: string) => dispatch({ type: AppActions.SetTheme, theme }),
+    setMode: (mode: ColorMode) => dispatch({ type: AppActions.SetMode, mode }),
+    setUrls: (urls: string[]) => dispatch({ type: AppActions.SetUrls, urls }),
+    setSelectedAction: (selectedAction: string) => dispatch({ type: AppActions.SetSelectedAction, selectedAction }),
+    setFormat: (format: MediaFormat) => dispatch({ type: AppActions.SetFormat, format }),
+    setLoading: (loading: boolean) => dispatch({ type: AppActions.SetLoading, loading }),
+    setQueue: (queue: string[]) => dispatch({ type: AppActions.SetQueue, queue }),
+    setControllers: (controllers: AbortController[]) => dispatch({ type: AppActions.SetControllers, controllers }),
+});

package/src/react/contexts/AppContext.tsx

@@ -0,0 +1,51 @@
+import React, {createContext, FC, ReactNode, useReducer} from "react";
+
+import {ColorMode} from "../../common/Theme";
+import {MediaFormat} from "../../enums/Media";
+import {actions} from "../actions/AppActions";
+import reducer from "../reducers/AppReducer";
+import {createDefaultState, IAppState} from "../states/AppState";
+
+interface IAppContext {
+    state: IAppState;
+    actions: {
+        setLocation: (location: string) => void;
+        setTheme: (theme: string) => void;
+        setMode: (mode: ColorMode) => void;
+        setUrls: (urls: string[]) => void;
+        setSelectedAction: (selectedAction: string) => void;
+        setFormat: (format: MediaFormat) => void;
+        setLoading: (loading: boolean) => void;
+        setQueue: (queue: string[]) => void;
+        setControllers: (controllers: AbortController[]) => void;
+    };
+}
+
+interface IAppContextProviderProps {
+    children: ReactNode;
+}
+
+const AppContext = createContext<IAppContext | undefined>(undefined);
+
+export const AppContextProvider: FC<IAppContextProviderProps> = (props: any) => {
+    const [reducerState, dispatch] = useReducer(reducer, createDefaultState());
+    const reducerActions = actions(dispatch);
+    const context: IAppContext = {
+        state: { ...reducerState },
+        actions: { ...reducerActions },
+    };
+
+    return <AppContext.Provider value={context}>{props.children}</AppContext.Provider>;
+};
+
+export const useAppContext = (): IAppContext => {
+    const context = React.useContext(AppContext);
+
+    if (!context) {
+        throw new Error("useAppContext must be used within AppContextProvider");
+    }
+
+    return context;
+};
+
+export default AppContext;

package/src/react/contexts/AppThemeContext.tsx

@@ -0,0 +1,38 @@
+import _merge from "lodash/merge";
+import React, {createContext, FC, PropsWithChildren, useContext, useState} from "react";
+
+import {createTheme, ThemeProvider} from "@mui/material/styles";
+
+import {getThemeDefinition} from "../../theme/Theme";
+
+export interface IAppThemeProps {
+    mode?: "light" | "dark";
+}
+
+export interface IAppThemeProviderProps extends IAppThemeProps, PropsWithChildren {}
+
+const defaultState = {};
+
+export const AppThemeContext = createContext<IAppThemeProps>(defaultState);
+
+export const AppThemeProvider: FC<IAppThemeProviderProps> = (props: IAppThemeProviderProps) => {
+    const {children, ...rest} = props;
+    const mergedState = _merge(defaultState, rest);
+    const [mode] = useState(mergedState.mode);
+
+    const theme = React.useMemo(() => {
+        return createTheme({
+            cssVariables: {
+                colorSchemeSelector: "data-theme-mode",
+                cssVarPrefix: "theme",
+            },
+            ...getThemeDefinition("Sky"),
+        });
+    }, [mode]);
+
+    return <ThemeProvider theme={theme} defaultMode={mode} disableTransitionOnChange>{children}</ThemeProvider>;
+};
+
+export const useAppThemeContext = () => useContext(AppThemeContext);
+
+export default AppThemeContext;

package/src/react/contexts/DataContext copy.tsx

@@ -0,0 +1,76 @@
+import _includes from "lodash/includes";
+import _isNil from "lodash/isNil";
+import _merge from "lodash/merge";
+import _union from "lodash/union";
+import React, {createContext, useContext, useEffect, useRef, useState} from "react";
+
+import {AlbumInfo, TrackInfo, TrackStatusInfo} from "../../common/Youtube";
+
+export type DataState = {[key: string]: DataStateItem}
+
+export type DataStateItem = {
+    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;
+}
+
+export type DataContextState = {
+    data: DataState;
+    setData: React.Dispatch<React.SetStateAction<DataState>>
+    getData: (id: string) => DataStateItem;
+}
+
+const DataContext = createContext<DataContextState | null>(null);
+
+export function DataProvider(props: any) {
+    const [data, setData] = useState<DataState>({});
+    const dataRef = useRef<DataState>({});
+
+    const getData = (id: string): DataStateItem => {
+        if (id && !_isNil(data[id])) {
+            return data[id];
+        } else if (id && _isNil(data[id])) {
+            _merge(data,
+                {
+                    [id]: {
+                        album: undefined,
+                        tracks: [],
+                        trackStatus: [],
+                    }
+                }
+            );
+            // setData((prev) => {
+            //     return {
+            //         ...prev,
+            //         [id]: {
+            //             album: undefined,
+            //             tracks: [],
+            //             trackStatus: [],
+            //         }
+            //     };
+            // })
+
+            return data[id];  //dataRef.current[id];
+        }
+    }
+    
+
+    useEffect(() => {
+        dataRef.current = data;
+    }, [data])
+
+    return (
+        // <DataContext.Provider value={{album, tracks, trackStatus, setAlbum, setTracks, setTrackStatus, clear}}>
+        <DataContext.Provider value={{data, setData, getData}}>
+            {props.children}
+        </DataContext.Provider>
+    );
+}
+
+export function useDataState() {
+    return useContext(DataContext);
+}

package/src/react/contexts/DataContext.tsx

@@ -0,0 +1,41 @@
+import React, {createContext, useContext, useState} from "react";
+
+import {AlbumInfo, TrackInfo, TrackStatusInfo} from "../../common/Youtube";
+
+export type DataState = {
+    album?: AlbumInfo; 
+    tracks: TrackInfo[]; 
+    trackStatus: TrackStatusInfo[]; 
+    trackCuts: {[key: string]: number[]};
+    setAlbum: React.Dispatch<React.SetStateAction<AlbumInfo>>;
+    setTracks: React.Dispatch<React.SetStateAction<TrackInfo[]>>;
+    setTrackStatus: React.Dispatch<React.SetStateAction<TrackStatusInfo[]>>;
+    setTrackCuts: React.Dispatch<React.SetStateAction<{[key: string]: number[]}>>;
+    clear: () => void;
+}
+
+const DataContext = createContext<DataState | null>(null);
+
+export function DataProvider(props: any) {
+    const [album, setAlbum] = useState<AlbumInfo | undefined>();
+    const [tracks, setTracks] = useState<TrackInfo[]>([]);
+    const [trackStatus, setTrackStatus] = useState<TrackStatusInfo[]>([]);
+    const [trackCuts, setTrackCuts] = useState<{[key: string]: number[]}>({});
+    
+    const clear = () => {
+        setAlbum(undefined);
+        setTracks([]);
+        setTrackStatus([]);
+        setTrackCuts({});
+    };
+
+    return (
+        <DataContext.Provider value={{album, tracks, trackStatus, trackCuts, setAlbum, setTracks, setTrackStatus, setTrackCuts, clear}}>
+            {props.children}
+        </DataContext.Provider>
+    );
+}
+
+export function useDataState() {
+    return useContext(DataContext);
+}

package/src/react/hooks/useAppTheme.ts

@@ -0,0 +1,14 @@
+import {createTheme} from "@mui/material/styles";
+
+import {getThemeDefinition} from "../../styles/MaterialThemes";
+import {useAppContext} from "../contexts/AppContext";
+
+const useAppTheme = () => {
+    const { state } = useAppContext();
+    const themeDefinition = getThemeDefinition(state.theme, state.mode);
+    const theme = createTheme(themeDefinition, {});
+
+    return { theme };
+};
+
+export default useAppTheme;

package/src/react/reducers/AppReducer.tsx

@@ -0,0 +1,45 @@
+import {AppActions, IAppAction} from "../actions/AppActions";
+import {IAppState} from "../states/AppState";
+import {reduce} from "./Reducer";
+
+const reducer = (state: IAppState, action: IAppAction): IAppState => {
+    if (action.type === AppActions.SetLocation) {
+        return reduce(state, { location: action.location });
+    }
+
+    if (action.type === AppActions.SetTheme) {
+        return reduce(state, { theme: action.theme });
+    }
+
+    if (action.type === AppActions.SetMode) {
+        return reduce(state, { mode: action.mode });
+    }
+
+    if (action.type === AppActions.SetUrls) {
+        return reduce(state, { urls: action.urls });
+    }
+
+    if (action.type === AppActions.SetSelectedAction) {
+        return reduce(state, { selectedAction: action.selectedAction });
+    }
+
+    if (action.type === AppActions.SetFormat) {
+        return reduce(state, { format: action.format });
+    }
+
+    if (action.type === AppActions.SetLoading) {
+        return reduce(state, { loading: action.loading });
+    }
+
+    if (action.type === AppActions.SetQueue) {
+        return reduce(state, { queue: action.queue });
+    }
+
+    if (action.type === AppActions.SetControllers) {
+        return reduce(state, { controllers: action.controllers });
+    }
+
+    throw new Error();
+};
+
+export default reducer;

package/src/react/reducers/Reducer.ts

@@ -0,0 +1,7 @@
+import $_ from "lodash";
+
+import {StateCreator} from "../states/State";
+
+export const reduce = <TState extends object>(state = StateCreator.create<TState>(), stateChange: Partial<TState>) => {
+    return $_.assign({}, state, stateChange);
+};

package/src/react/states/AppState.ts

@@ -0,0 +1,29 @@
+import {ColorMode} from "../../common/Theme";
+import {MediaFormat} from "../../enums/Media";
+import {StateCreator} from "./State";
+
+export interface IAppState {
+    location?: string;
+    theme?: string;
+    mode?: ColorMode;
+    urls: string[];
+    selectedAction?: string;
+    format?: MediaFormat;
+    loading?: boolean;
+    queue?: string[];
+    controllers?: AbortController[];
+}
+
+export const createDefaultState = () => {
+    return StateCreator.create<IAppState>({
+        location: "/",
+        theme: "purple-rain",
+        mode: ColorMode.Light,
+        urls: [],
+        selectedAction: undefined,
+        format: MediaFormat.Audio,
+        loading: false,
+        queue: [],
+        controllers: [],
+    });
+};

package/src/react/states/State.ts

@@ -0,0 +1,29 @@
+import $_ from "lodash";
+
+export type TPartial<T> = {
+    [P in keyof T]?: TPartial<T[P]>;
+};
+
+export const createNextState = <T>(obj: T, ...assignments: Array<TPartial<T> | T>): T => {
+    return Object.assign({}, obj, ...assignments);
+};
+
+export const createNextNamespacedState = <T>(
+    obj: T,
+    assignments: TPartial<T> | T,
+    namespace: string,
+): { [key: string]: T } => {
+    return Object.assign({}, { [namespace]: $_.assign({}, obj, assignments) });
+};
+
+export const removeFromNextState = <T extends object>(obj: T, path: string | string[]): T => {
+    return $_.omit(obj, path) as T;
+};
+
+export class StateCreator {
+    public static create<TState extends object>(state?: TState): TState {
+        const initialState: TState = new Object() as TState;
+
+        return Object.freeze($_.merge<TState, TState>(initialState, state));
+    }
+}

package/src/renderer.tsx

@@ -0,0 +1,13 @@
+import Store from "electron-store";
+import * as React from "react";
+import * as ReactDOM from "react-dom/client";
+
+import {Bootstrap} from "./bootstrap";
+import schema from "./common/Store";
+
+global.store = new Store({ schema, clearInvalidConfig: true });
+
+const container = document.getElementById("root");
+const root = ReactDOM.createRoot(container!);
+
+root.render(React.createElement(Bootstrap));

package/src/resources/icons/logo-shape.svg

@@ -0,0 +1,59 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   id="aa_1"
+   x="0px"
+   y="0px"
+   width="200px"
+   height="222.977px"
+   viewBox="0 0 200 222.977"
+   enable-background="new 0 0 200 222.977"
+   xml:space="preserve"
+   sodipodi:docname="logo-shape.svg"
+   inkscape:version="0.92.4 (5da689c313, 2019-01-14)"><metadata
+     id="metadata13"><rdf:RDF><cc:Work
+         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1027"
+     id="namedview11"
+     showgrid="false"
+     inkscape:zoom="2.6545005"
+     inkscape:cx="-64.472767"
+     inkscape:cy="82.298866"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="aa_1" /><defs
+     class="defs"
+     id="defs2" /><path
+     d="M 98.881799,10.790587 177.01505,55.901835 98.881799,101.0121 20.748549,55.901835 98.881799,10.790587 m 0,-8.5892888 c -1.48295,0 -2.965901,0.3842861 -4.294151,1.1508876 L 16.454398,48.463436 c -2.657486,1.534188 -4.295136,4.370022 -4.295136,7.438399 0,3.068377 1.63765,5.905197 4.295136,7.439385 l 78.13325,45.11026 c 1.329236,0.7666 2.812186,1.14991 4.294151,1.14991 1.483931,0 2.965901,-0.38429 4.295141,-1.14991 l 78.13324,-45.11026 c 2.65749,-1.534188 4.29416,-4.371008 4.29416,-7.439385 0,-3.068377 -1.63667,-5.904211 -4.29416,-7.438399 L 103.17792,3.3521858 C 101.8477,2.5855843 100.36573,2.2012982 98.881799,2.2012982 Z"
+     class="color c1"
+     id="path4"
+     inkscape:connector-curvature="0"
+     style="fill:#dd5f7a;stroke-width:0.985349" /><path
+     d="m 10.056527,77.990404 78.13325,45.111246 v 90.22053 L 10.056527,168.21093 V 77.990404 m 0,-8.589287 c -1.4829508,0 -2.965901,0.3833 -4.2951368,1.149902 -2.6565009,1.534188 -4.294151,4.371008 -4.294151,7.439385 v 90.220526 c 0,3.06739 1.6376501,5.90421 4.294151,7.4384 l 78.1332508,45.11026 c 1.329235,0.76759 2.8112,1.15089 4.29415,1.15089 1.482951,0 2.965901,-0.3833 4.295137,-1.15089 2.657486,-1.53419 4.294151,-4.37002 4.294151,-7.4384 v -90.22052 c 0,-3.06838 -1.636665,-5.9052 -4.294151,-7.43939 L 14.351664,70.551019 c -1.329236,-0.766602 -2.811201,-1.149902 -4.295137,-1.149902 z"
+     class="color c2"
+     id="path6"
+     inkscape:connector-curvature="0"
+     style="fill:#a32f48;stroke-width:0.985349" /><path
+     d="M 189.94775,76.732113 V 166.95264 L 111.8145,212.0629 v -90.21954 l 78.13325,-45.111247 m 0,-8.589287 c -1.48393,0 -2.9659,0.383301 -4.29513,1.149902 l -78.13325,45.110262 c -2.65749,1.53517 -4.29415,4.37101 -4.29415,7.44037 v 90.21954 c 0,3.06936 1.63666,5.90421 4.29415,7.43939 1.32923,0.7666 2.81218,1.15088 4.29513,1.15088 1.48295,0 2.96591,-0.38428 4.29317,-1.15088 l 78.13424,-45.11125 c 2.6565,-1.53419 4.29415,-4.37002 4.29415,-7.4384 V 76.732113 c 0,-3.069362 -1.63765,-5.905196 -4.29415,-7.439385 -1.32826,-0.766601 -2.81219,-1.149902 -4.29416,-1.149902 z"
+     class="color c3"
+     id="path8"
+     inkscape:connector-curvature="0"
+     style="fill:#e23a59;stroke-width:0.985349" /></svg>