yt-grabber 1.0.0

package/src/components/fileField/FileField.tsx

@@ -0,0 +1,152 @@
+import classnames from "classnames";
+// import fs from "fs-extra";
+import _first from "lodash/first";
+import _get from "lodash/get";
+import _isFunction from "lodash/isFunction";
+import _join from "lodash/join";
+import _union from "lodash/union";
+import React, {useRef} from "react";
+
+import FolderIcon from "@mui/icons-material/Folder";
+import {IconButton, InputAdornment, TextField, TextFieldProps} from "@mui/material";
+
+import Styles from "./FileField.styl";
+
+export type FileFieldProps = Omit<TextFieldProps, "onChange" | "onBlur"> & {
+    mode?: "file" | "directory";
+    value?: string;
+    multiple?: boolean;
+    fileTypes?: string[];
+    onChange?: (value: string[]) => void;
+    onBlur?: (value: string[]) => void;
+};
+
+export const FileField: React.FC<FileFieldProps> = (props) => {
+    const {mode = "file", fileTypes, value, multiple, className, onChange, onBlur, ...rest} = props;
+    const rootPath = "./";
+    const fileInputRef = useRef<HTMLInputElement>(null);
+
+    const handleValueChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        if (_isFunction(onChange)) {
+            onChange([event.target.value]);
+        }
+    };
+    
+    const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {
+        if (_isFunction(onBlur)) {
+            onBlur([event.target.value]);
+        }
+    };
+
+    const handleButtonClick = () => {
+        fileInputRef.current?.click();
+    };
+
+    const resolveDirectory = (files: FileList) => {
+        if (multiple) {
+            const paths = [];
+
+            for (const file of files) {
+                paths.push(rootPath + file.webkitRelativePath.substring(0, file.webkitRelativePath.lastIndexOf("/")));
+            }
+
+            return _union(paths);
+        } else {
+            const firstFilePath = _get(_first(files), "webkitRelativePath");
+            
+            return [rootPath + _first(firstFilePath.split("/"))];
+        }
+    };
+
+    const resolveFile = (files: FileList): string[] => {
+        if (multiple) {
+            const paths = [];
+
+            for (const file of files) {
+                paths.push(rootPath + file.webkitRelativePath);
+            }
+
+            return paths;
+        } else {
+            return [rootPath + _get(_first(files), "webkitRelativePath")];
+        }
+    };
+
+    // async function readDirectory(dirHandle: any, path: any) {
+    //     for await (const entry of dirHandle.values()) {
+    //         const fullPath = path ? `${path}/${entry.name}` : entry.name;
+            
+    //         if (entry.kind === "file") {
+    //             console.log("File:", fullPath);
+    //         } else if (entry.kind === "directory") {
+    //             console.log("Directory:", fullPath); // Logs even empty directories
+    //             await readDirectory(entry, fullPath); // Recursively read subdirectories
+    //         }
+    //     }
+    // }
+
+    const onSelectFile = async (event: React.ChangeEvent<HTMLInputElement>) => {
+        // const dirHandle = await (window as any).showDirectoryPicker();
+        // await readDirectory(dirHandle, "");
+
+        const result = mode === "directory" ? resolveDirectory(event.target.files) : resolveFile(event.target.files);
+        // const outPath = fs.realpathSync(result[0]);
+
+        // setFieldValue(result);
+        // if (_isFunction(onChange)) {
+        //     onChange(fs.existsSync(outPath) ? [outPath] : result);
+        // }
+        if (_isFunction(onChange)) {
+            onChange(result);
+        }
+        event.target.value = "";
+
+        // const reader = new FileReader();
+
+        // reader.onload = (e) => {
+        //     const content = e.target?.result as string;
+        //     const lines = content.split("\n");
+
+        // if (_isFunction(onChange)) {
+        //     onChange(lines);
+        // }
+        // setFieldValue(lines);
+        // };
+        // reader.readAsText(file);
+    };
+
+    // useEffect(() => {
+    //     if (_isFunction(onChange)) {
+    //         onChange(fieldValue);
+    //     }
+    // }, [fieldValue]);
+
+    return (
+        <>
+            <TextField
+                {...rest}
+                className={classnames(Styles.fileField, className)}
+                value={value}
+                onChange={handleValueChange}
+                onBlur={handleBlur}
+                slotProps={{
+                    input: {
+                        endAdornment: <InputAdornment position="end">
+                            <IconButton
+                                onClick={handleButtonClick}
+                                edge="end"
+                            >
+                                <FolderIcon />
+                            </IconButton>
+                        </InputAdornment>,
+                    },
+                }}
+            />
+            {/* eslint-disable react/no-unknown-property */ }
+            {/* @ts-expect-error fix for webkitdirectory */}
+            <input ref={fileInputRef} type="file" webkitdirectory="" directory="" multiple hidden onChange={onSelectFile} accept={mode === "file" ? _join(fileTypes) : undefined} />
+        </>
+    );
+};
+
+export default FileField;

package/src/components/languagePicker/LanguagePicker.styl

@@ -0,0 +1,38 @@
+@import "../../styles/mixins.styl"
+
+.language-picker
+  position: relative
+
+  .language-picker-menu
+    opacity: 1
+
+  // .language-picker-backdrop
+  //   z-index: -1
+
+  .language-picker-trigger
+    border-radius: 0
+    height: 100%
+    width: 100%
+    min-width: 5px
+    padding: 0
+    
+  .language-picker-item
+    height: 100%
+    width: 100%
+
+  .icon
+    display: inline-block
+    vertical-align: middle
+    width: 1.8em
+    height: 1.8em
+    background-size: 3em 3em
+    background-position: 50% 50%
+    border-radius: 50%
+    border-width: 0.05em
+    border-style: solid
+
+  .name
+    padding-left: .5em
+
+
+

package/src/components/languagePicker/LanguagePicker.tsx

@@ -0,0 +1,145 @@
+import classnames from "classnames";
+import $_ from "lodash";
+import moment from "moment";
+import path from "path";
+import React, {useState} from "react";
+import {useTranslation} from "react-i18next";
+
+import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
+import {
+    Button, CircularProgress, ClickAwayListener, Menu, MenuItem, Theme, useMediaQuery
+} from "@mui/material";
+
+import {ComponentDisplayMode} from "../../common/ComponentDisplayMode";
+import Styles from "./LanguagePicker.styl";
+
+const isMac = process.platform === "darwin";
+const isDev = process.env.NODE_ENV === "development";
+const prependPath = isMac && !isDev ? path.join(process.resourcesPath, "..") : ".";
+
+export interface ILanguagePickerProps {
+    className?: string;
+    mode?: ComponentDisplayMode;
+    showArrow?: boolean;
+}
+
+export interface ILanguagePickerTriggerProps extends ILanguagePickerProps {
+    loading?: boolean;
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+}
+
+export interface ILanguagePickerItemProps extends ILanguagePickerProps {
+    lang?: string;
+    onClick?: (lang: string) => void;
+}
+
+export const LanguagePicker = (props: ILanguagePickerProps) => {
+    const { mode, showArrow = true } = props;
+    const { i18n } = useTranslation();
+    const [loading, setLoading] = useState(false);
+    const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+    const langs = $_.get(i18n, "options.supportedLngs");
+    const availableLocales: string[] = !langs ? [] : $_.without(langs, "cimode").sort();
+    const displayMode = $_.defaultTo(
+        mode,
+        useMediaQuery((theme: Theme) => theme.breakpoints.down("md"))
+            ? ComponentDisplayMode.Minimal
+            : ComponentDisplayMode.Full,
+    );
+
+    const onClose = () => setAnchorEl(null);
+
+    const onClickAway = (event: any) => {
+        if (anchorEl && anchorEl.contains(event.target)) return;
+
+        onClose();
+    };
+
+    const onTriggerClick = (event: React.MouseEvent<HTMLButtonElement>) => setAnchorEl(event.currentTarget);
+
+    const onItemClick = async (lang: string) => {
+        if (!$_.isEqual(lang, i18n.language)) {
+            setLoading(true);
+            i18n.changeLanguage(lang, () => setLoading(false));
+            moment.locale(lang);
+            global.store.set("application.language", lang);
+        }
+
+        onClose();
+    };
+
+    return (
+        <div className={classnames(Styles.languagePicker, $_.get(props, "className"))}>
+            <LanguagePickerTrigger showArrow={showArrow} mode={displayMode} loading={loading} onClick={onTriggerClick} />
+            <ClickAwayListener onClickAway={onClickAway}>
+                <Menu
+                    anchorEl={anchorEl}
+                    disablePortal={true}
+                    anchorOrigin={{ vertical: "top", horizontal: "center" }}
+                    PopoverClasses={{ root: Styles.languagePickerBackdrop, paper: Styles.languagePickerMenu }}
+                    transformOrigin={{ vertical: -40, horizontal: "center" }}
+                    open={Boolean(anchorEl)}
+                    onClose={onClose}
+                >
+                    {$_.map(availableLocales, (item) => (
+                        <LanguagePickerItem
+                            key={item}
+                            lang={item}
+                            onClick={onItemClick}
+                            mode={displayMode}
+                        />
+                    ))}
+                </Menu>
+            </ClickAwayListener>
+        </div>
+    );
+};
+
+export const LanguagePickerTrigger = (props: ILanguagePickerTriggerProps) => {
+    const { loading, onClick, mode, showArrow } = props;
+    const { i18n, t } = useTranslation();
+    
+    return (
+        <Button
+            fullWidth={true}
+            onClick={onClick}
+            className={Styles.languagePickerTrigger}
+            variant="text"
+            disableElevation={true}
+            color="inherit"
+        >
+            <span
+                className={Styles.icon}
+                style={{
+                    backgroundImage: `url("${prependPath}/resources/locales/${i18n.language}/flag.svg")`,
+                }}
+            />
+            {mode > ComponentDisplayMode.Compact && (
+                <React.Fragment>
+                    <span className={classnames("uppercase", Styles.name)}>{t("langName", { lng: i18n.language })}</span>
+                    {loading && <CircularProgress />}
+                </React.Fragment>
+            )}
+            {showArrow && <ArrowDropDownIcon fontSize="medium" color="inherit" />}
+        </Button>
+    );
+};
+
+export const LanguagePickerItem = (props: ILanguagePickerItemProps) => {
+    const { lang, onClick } = props;
+    const { t } = useTranslation();
+
+    return (
+        <MenuItem key={lang} data-id={lang} onClick={() => onClick(lang)} className={Styles.languagePickerItem}>
+            <span
+                className={Styles.icon}
+                style={{
+                    backgroundImage: `url("${prependPath}/resources/locales/${lang}/flag.svg")`,
+                }}
+            />
+            <span className={classnames("capitalize", Styles.name)}>{t("langName", { lng: lang })}</span>
+        </MenuItem>
+    );
+};
+
+export default LanguagePicker;

package/src/components/logo/Logo.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+
+import {Box, BoxProps} from "@mui/material";
+
+import IconSvg from "../../resources/icons/logo-shape.svg";
+
+const Logo: React.FC<BoxProps> = (props) => {
+    return (
+        <Box {...props}>
+            <img width="100%" height="100%" src={IconSvg} />
+        </Box>
+    );
+};
+
+export default Logo;

package/src/components/modals/DetailsModal.styl

@@ -0,0 +1,9 @@
+@import "../../styles/mixins.styl"
+
+.details-modal {
+  
+    .content {
+        justify-content: flex-start;
+    }
+
+}

package/src/components/modals/DetailsModal.tsx

@@ -0,0 +1,85 @@
+import _map from "lodash/map";
+import React, {useEffect, useState} from "react";
+import {useTranslation} from "react-i18next";
+
+import {Stack, TextField} from "@mui/material";
+import Button from "@mui/material/Button";
+import Dialog from "@mui/material/Dialog";
+import DialogActions from "@mui/material/DialogActions";
+import DialogContent from "@mui/material/DialogContent";
+import DialogTitle from "@mui/material/DialogTitle";
+
+import Styles from "./DetailsModal.styl";
+
+export type Details = {
+    [key: string]: string | number;
+}
+
+export type DetailsModalProps = {
+    id: string;
+    details?: Details;
+    open?: boolean;
+    onClose?: (data: Details) => void;
+};
+
+export const DetailsModal: React.FC<DetailsModalProps> = (props: DetailsModalProps) => {
+    const {onClose, details, open, ...other} = props;
+    const {t} = useTranslation();
+    const [value, setValue] = useState<Details>();
+
+    const onValueChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        const key = event.target.dataset.key;
+
+        setValue((prev) => ({...prev, [key]: event.target.value}));
+    };
+
+    const handleClose = () => {
+        if (onClose) {
+            onClose(value);
+        }
+    };
+
+    useEffect(() => {
+        setValue(details);
+    }, [details]);
+
+    return (
+        <Dialog
+            open={open}
+            disablePortal
+            onClose={handleClose}
+            fullWidth
+            maxWidth="md"
+            className={Styles.detailsModal}
+            {...other}
+        >
+            <DialogTitle textAlign="center">{t("detailsModalTitle")}</DialogTitle>
+            <DialogContent dividers className={Styles.content}>
+                <Stack direction="column" spacing={2}>
+                    {_map(value, (v, k) =>
+                        <TextField
+                            key={k}
+                            value={v ?? ""}
+                            fullWidth
+                            variant="outlined"
+                            label={t(k)}
+                            onChange={onValueChange}
+                            slotProps={{
+                                htmlInput: {
+                                    "data-key": k,
+                                }
+                            }}
+                        />
+                    )}
+                </Stack>
+            </DialogContent>
+            <DialogActions sx={{justifyContent: "center"}}>
+                <Button variant="contained" disableElevation color="secondary" onClick={handleClose}>
+                    {t("ok")}
+                </Button>
+            </DialogActions>
+        </Dialog>
+    );
+};
+
+export default DetailsModal;

package/src/components/numberField/NumberField.styl

@@ -0,0 +1,13 @@
+.number-field
+    
+  .error
+    font-size: .9em
+    bottom: .3em
+    width: 100%
+    position: absolute
+    text-align: center
+
+  input[type=number]::-webkit-inner-spin-button
+  input[type=number]::-webkit-outer-spin-button
+    -webkit-appearance: none
+    margin: 0

package/src/components/numberField/NumberField.tsx

@@ -0,0 +1,154 @@
+import $_ from "lodash";
+import React, {useEffect, useState} from "react";
+import {NumberFormatValues, NumericFormat, NumericFormatProps} from "react-number-format";
+import {useInterval} from "usehooks-ts";
+
+import AddIcon from "@mui/icons-material/Add";
+import RemoveIcon from "@mui/icons-material/Remove";
+import {
+    IconButton, InputAdornment, InputLabelProps, TextField, TextFieldProps
+} from "@mui/material";
+
+import Styles from "./NumberField.styl";
+
+export interface INumberFieldProps extends Omit<NumericFormatProps<TextFieldProps<"outlined">>, "onChange"> {
+    label?: string;
+    readOnly?: boolean;
+    allowEmpty?: boolean;
+    showIncreaseDecreaseButtons?: boolean;
+    inputLabelProps?: Partial<InputLabelProps>;
+    initialPressedDelay?: number;
+    onChange: (value: number) => void;
+}
+
+export const NumberField = (props: INumberFieldProps) => {
+    const {
+        value = 0,
+        label,
+        readOnly,
+        inputLabelProps,
+        allowEmpty,
+        decimalScale = 2,
+        fullWidth,
+        fixedDecimalScale = true,
+        onChange,
+        initialPressedDelay = 300,
+        showIncreaseDecreaseButtons = true,
+        min,
+        max,
+        step = 0.5,
+        ...rest
+    } = props;
+    const [decreasePressed, setDecreasePressed] = useState(false);
+    const [increasePressed, setIncreasePressed] = useState(false);
+    const [delay, setDelay] = useState(initialPressedDelay);
+    const [text, setText] = useState(value);
+
+    useInterval(
+        () => {
+            if (decreasePressed) onDecreaseClick();
+            if (increasePressed) onIncreaseClick();
+            setDelay($_.max([50, delay - 50]));
+        },
+        decreasePressed || increasePressed ? delay : null,
+    );
+
+    const handleValueChange = (values: NumberFormatValues) => {
+        setText(values.floatValue);
+    };
+
+    const onDecreaseClick = () => {
+        setText($_.max([$_.toNumber(value) - $_.toNumber(step), min]));
+    };
+
+    const onIncreaseClick = () => {
+        setText($_.min([$_.toNumber(value) + $_.toNumber(step), max]));
+    };
+
+    const onDecreaseMouseDown = () => {
+        setDecreasePressed(true);
+    };
+
+    const onIncreaseMouseDown = () => {
+        setIncreasePressed(true);
+    };
+
+    const onDecreaseMouseUp = () => {
+        setDecreasePressed(false);
+        setDelay(initialPressedDelay);
+    };
+
+    const onIncreaseMouseUp = () => {
+        setIncreasePressed(false);
+        setDelay(initialPressedDelay);
+    };
+
+    const isAllowed = (values: NumberFormatValues) => {        
+        if ($_.isUndefined(values.floatValue) && !allowEmpty) {
+            return false;
+        };
+
+        return true;
+    };
+
+    useEffect(() => {
+        const value = $_.toNumber(text) ?? 0;
+
+        if (onChange) {
+            onChange(value);
+        }
+    }, [text]);
+
+    return (
+        <NumericFormat
+            value={value}
+            onValueChange={handleValueChange}
+            customInput={TextField}
+            className={Styles.numberField}
+            fullWidth={fullWidth}
+            label={label}
+            InputLabelProps={$_.defaultTo(inputLabelProps, {className: "upperfirst"})}
+            variant="outlined"
+            decimalScale={decimalScale}
+            fixedDecimalScale={fixedDecimalScale}
+            inputProps={{
+                style: {textAlign: "center"},
+            }}
+            isAllowed={isAllowed}
+            InputProps={
+                showIncreaseDecreaseButtons ? {
+                    startAdornment: (
+                        <InputAdornment position="start">
+                            <IconButton
+                                color="primary"
+                                edge="start"
+                                onClick={onDecreaseClick}
+                                onMouseDown={onDecreaseMouseDown}
+                                onMouseUp={onDecreaseMouseUp}
+                            >
+                                <RemoveIcon />
+                            </IconButton>
+                        </InputAdornment>
+                    ),
+                    endAdornment: (
+                        <InputAdornment position="end">
+                            <IconButton
+                                color="primary"
+                                edge="end"
+                                onClick={onIncreaseClick}
+                                onMouseDown={onIncreaseMouseDown}
+                                onMouseUp={onIncreaseMouseUp}
+                            >
+                                <AddIcon />
+                            </IconButton>
+                        </InputAdornment>
+                    ),
+                    readOnly,
+                } : {}
+            }
+            {...rest}
+        />
+    );
+};
+
+export default NumberField;

package/src/components/progress/Progress.styl

@@ -0,0 +1,15 @@
+.progress {
+    position: relative;
+    display: inline-flex;
+  
+    .label-wrapper {
+        position: absolute;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        right: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+}

package/src/components/progress/Progress.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+
+import {Box, CircularProgress, CircularProgressProps, Typography} from "@mui/material";
+
+import Styles from "./Progress.styl";
+
+export const Progress: React.FC<CircularProgressProps> = (props) => {
+    return (
+        <Box className={Styles.progress}>
+            <CircularProgress variant="determinate" {...props} />
+            <Box className={Styles.labelWrapper}>
+                <Typography variant="caption">{`${Math.round(props.value)}%`}</Typography>
+            </Box>
+        </Box>
+    );
+};
+
+export default Progress;