yt-grabber 1.0.0

package/src/components/splitButton/SplitButton.tsx

@@ -0,0 +1,125 @@
+import _find from "lodash/find";
+import _first from "lodash/first";
+import _get from "lodash/get";
+import _isFunction from "lodash/isFunction";
+import _map from "lodash/map";
+import React, {useEffect} from "react";
+
+import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
+import Button from "@mui/material/Button";
+import ButtonGroup, {ButtonGroupProps} from "@mui/material/ButtonGroup";
+import ClickAwayListener from "@mui/material/ClickAwayListener";
+import Grow from "@mui/material/Grow";
+import MenuItem from "@mui/material/MenuItem";
+import MenuList from "@mui/material/MenuList";
+import Paper from "@mui/material/Paper";
+import Popper from "@mui/material/Popper";
+
+export type SplitButtonProps = ButtonGroupProps & {
+    loading?: boolean;
+    actions?: SplitButtonAction[];
+    selectedAction?: string;
+    onSelectedActionChange?: (action: string) => void;
+}
+
+export type SplitButtonAction = {
+    id: string;
+    label: string;
+    handler: (...args: any[]) => void;
+}
+
+export const SplitButton = (props: SplitButtonProps) => {
+    const {loading, selectedAction, actions, onSelectedActionChange, ...rest} = props;
+    const [open, setOpen] = React.useState(false);
+    const anchorRef = React.useRef<HTMLDivElement>(null);
+    
+    const handleMenuItemClick = (action: SplitButtonAction) => {
+        if (_isFunction(onSelectedActionChange)) {
+            onSelectedActionChange(action.id);
+        }
+        setOpen(false);
+        action.handler();
+    };
+
+    const handleSelectedActionClick = () => {
+        const action = _find(actions, ["id", selectedAction]);
+
+        action.handler();
+    };
+
+    const handleToggle = () => {
+        setOpen((prevOpen) => !prevOpen);
+    };
+
+    const handleClose = (event: Event) => {
+        if (anchorRef.current && anchorRef.current.contains(event.target as HTMLElement)) {
+            return;
+        }
+
+        setOpen(false);
+    };
+
+    useEffect(() => {
+        if (selectedAction) return;
+        if (!actions) return;
+
+        onSelectedActionChange(_get(_first(actions), "id"));
+    }, [actions]);
+
+    const getSelectedActionLabel = () => {
+        const action = _find(actions, ["id", selectedAction]);
+
+        return action?.label;
+    };
+
+    return (
+        <>
+            <ButtonGroup
+                variant="contained"
+                ref={anchorRef}
+                {...rest}
+            >
+                <Button loading={loading} onClick={handleSelectedActionClick}>{getSelectedActionLabel()}</Button>
+                <Button disabled={loading} size="small" onClick={handleToggle} sx={{width: "auto"}}>
+                    <ArrowDropDownIcon />
+                </Button>
+            </ButtonGroup>
+            <Popper
+                sx={{zIndex: 1, width: anchorRef.current?.clientWidth ?? "auto"}}
+                open={open}
+                anchorEl={anchorRef.current}
+                role={undefined}
+                transition
+                disablePortal
+            >
+                {({TransitionProps, placement}) => (
+                    <Grow
+                        {...TransitionProps}
+                        style={{
+                            transformOrigin:
+                                placement === "bottom" ? "center top" : "center bottom",
+                        }}
+                    >
+                        <Paper>
+                            <ClickAwayListener onClickAway={handleClose}>
+                                <MenuList autoFocusItem>
+                                    {_map(actions, (action) => (
+                                        <MenuItem
+                                            key={action.id}
+                                            selected={action.id === selectedAction}
+                                            onClick={() => handleMenuItemClick(action)}
+                                        >
+                                            {action.label}
+                                        </MenuItem>
+                                    ))}
+                                </MenuList>
+                            </ClickAwayListener>
+                        </Paper>
+                    </Grow>
+                )}
+            </Popper>
+        </>
+    );
+};
+
+export default SplitButton;

package/src/components/themePicker/ThemePicker.styl

@@ -0,0 +1,19 @@
+@import "../../styles/mixins.styl";
+
+.theme-picker {
+    position: relative;
+    
+    .select {
+        align-items: center;
+        display: flex;
+        capitalize();
+    }
+
+    .menu-item {
+        capitalize();
+    }
+
+    .icon {
+        padding-right: .5rem;
+    }
+}

package/src/components/themePicker/ThemePicker.tsx

@@ -0,0 +1,65 @@
+import classnames from "classnames";
+import _map from "lodash/map";
+import React from "react";
+import {useTranslation} from "react-i18next";
+
+import SystemModeIcon from "@mui/icons-material/ComputerRounded";
+import DarkModeIcon from "@mui/icons-material/DarkModeRounded";
+import LightModeIcon from "@mui/icons-material/LightModeRounded";
+import {
+    FormControl, InputLabel, MenuItem, Select, SelectChangeEvent, SelectProps
+} from "@mui/material";
+import {useColorScheme} from "@mui/material/styles";
+
+import Styles from "./ThemePicker.styl";
+
+export type IThemePickerProps = SelectProps;
+
+export type ThemeMode = "dark" | "light" | "system";
+
+export const ThemePicker = (props: IThemePickerProps) => {
+    const {className, ...rest} = props;
+    const {t} = useTranslation();
+    const {mode, setMode} = useColorScheme();
+    const themeModes: ThemeMode[] = ["light", "dark", "system"];
+
+    const resolveIcon = (mode: ThemeMode) => {
+        if (mode === "dark") {
+            return <DarkModeIcon className={Styles.icon} />;
+        } else if (mode === "light") {
+            return <LightModeIcon className={Styles.icon} />;
+        }
+
+        return <SystemModeIcon className={Styles.icon} />;
+    };
+
+    const onChangeMode = (event: SelectChangeEvent<ThemeMode>) => {       
+        setMode(event.target.value as ThemeMode);
+    };
+   
+    return (
+        <FormControl fullWidth className={classnames(Styles.themePicker, className)}>
+            <InputLabel id="theme-mode-picker-label">{t("themeMode")}</InputLabel>
+            <Select
+                SelectDisplayProps={{
+                    className: Styles.select
+                }}
+                labelId="theme-mode-picker-label"
+                value={mode}
+                label={t("themeMode")}
+                onChange={onChangeMode}
+                MenuProps={{
+                    disablePortal: true
+                }}
+                {...rest}
+            >
+                {_map(themeModes, (item) => <MenuItem key={item} value={item} className={Styles.menuItem}>
+                    {resolveIcon(item)}
+                    <div>{item}</div>
+                </MenuItem>)}
+            </Select>
+        </FormControl>
+    );
+};
+
+export default ThemePicker;

package/src/components/themeSwitcher/ThemeSwitcher.styl

@@ -0,0 +1,10 @@
+.theme-switcher {
+    position: relative;
+    
+    .button {
+        padding: 0 1em;
+        border-radius: 0;
+        width: 100%;
+        height: 100%;
+    }
+}

package/src/components/themeSwitcher/ThemeSwitcher.tsx

@@ -0,0 +1,43 @@
+import classnames from "classnames";
+import React from "react";
+import {useTranslation} from "react-i18next";
+
+import DarkModeIcon from "@mui/icons-material/DarkModeRounded";
+import LightModeIcon from "@mui/icons-material/LightModeRounded";
+import {ButtonProps, IconButton} from "@mui/material";
+import {useColorScheme} from "@mui/material/styles";
+
+import Styles from "./ThemeSwitcher.styl";
+
+export type IThemeSwitcherProps = ButtonProps
+
+export const ThemeSwitcher = (props: IThemeSwitcherProps) => {
+    const {className, ...rest} = props;
+    const {t} = useTranslation();
+    const {mode, systemMode, setMode} = useColorScheme();
+    const resolvedMode = (systemMode || mode) as "light" | "dark";
+
+    const icon = {
+        dark: <LightModeIcon />,
+        light: <DarkModeIcon />,
+    }[resolvedMode];
+
+    const tooltip = {
+        light: t("dark"),
+        dark: t("light"),
+    }[resolvedMode];
+
+    const onChangeMode = () => {
+        const nextMode = mode === "dark" ? "light" : "dark";  
+       
+        setMode(nextMode);
+    };
+   
+    return (
+        <div className={classnames(Styles.themeSwitcher, className)}>
+            <IconButton size="small" color="inherit" className={Styles.button} title={tooltip} onClick={onChangeMode} {...rest}>{icon}</IconButton>
+        </div>
+    );
+};
+
+export default ThemeSwitcher;

package/src/components/youtube/formatSelector/FormatSelector.styl

@@ -0,0 +1,3 @@
+.format-selector {
+
+}

package/src/components/youtube/formatSelector/FormatSelector.tsx

@@ -0,0 +1,202 @@
+import _capitalize from "lodash/capitalize";
+import _filter from "lodash/filter";
+import _first from "lodash/first";
+import _get from "lodash/get";
+import _includes from "lodash/includes";
+import _isFunction from "lodash/isFunction";
+import _isNumber from "lodash/isNumber";
+import _last from "lodash/last";
+import _map from "lodash/map";
+import _uniq from "lodash/uniq";
+import _values from "lodash/values";
+import React, {useEffect, useState} from "react";
+import {useTranslation} from "react-i18next";
+
+import {FormControl, InputLabel, MenuItem, Select, SelectChangeEvent} from "@mui/material";
+import Grid from "@mui/material/Grid2";
+
+import {ApplicationOptions} from "../../../common/Store";
+import {FormatInfo} from "../../../common/Youtube";
+import {AudioType, MediaFormat, VideoType} from "../../../enums/Media";
+import {useDataState} from "../../../react/contexts/DataContext";
+import NumberField from "../../numberField/NumberField";
+import Styles from "./FormatSelector.styl";
+
+export type Format = {
+    type?: MediaFormat;
+    extension?: AudioType | VideoType;
+    videoQuality?: string;
+    audioQuality?: number;
+}
+
+export type FormatSelectorProps = {
+    value?: Format;
+    onSelected?: (format: Format) => void;
+}
+
+export const FormatSelector: React.FC<FormatSelectorProps> = (props) => {
+    const {value, onSelected} = props;
+    const [appOptions] = useState<ApplicationOptions>(global.store.get("application"));
+    const {tracks} = useDataState();
+    
+    const audioExtensions = Object.values(AudioType);
+    const videoExtensions = Object.values(VideoType);
+    const [formats, setFormats] = useState<Array<AudioType | VideoType>>(value.type === MediaFormat.Audio ? audioExtensions : videoExtensions);
+    const [resolutions, setResolutions] = useState<string[]>();
+    
+    const [selectedMediaType, setSelectedMediaType] = useState<MediaFormat>(value.type ?? MediaFormat.Audio);
+    const [selectedAudioExtension, setSelectedAudioExtension] = useState<AudioType>(value.type === MediaFormat.Audio ? value.extension as AudioType :_first(audioExtensions));
+    const [selectedVideoExtension, setSelectedVideoExtension] = useState<VideoType>(value.type === MediaFormat.Video ? value.extension as VideoType :_first(videoExtensions));
+    const [selectedFormat, setSelectedFormat] = useState<AudioType | VideoType>(value.extension ?? _first(formats));
+    const [selectedResolution, setSelectedResolution] = useState<string>(value.videoQuality);
+    const [selectedQuality, setSelectedQuality] = useState(value.audioQuality ?? appOptions.quality);
+    const [currentValue, setCurrentValue] = useState<Format>(value);
+    const {t} = useTranslation();
+
+    const isFormatValid = (val: Format) => {
+        return val && val.type && val.extension && (
+            (val.type === MediaFormat.Video && val.videoQuality && _includes(videoExtensions, val.extension)) ||
+            (val.type === MediaFormat.Audio && _isNumber(val.audioQuality) && _includes(audioExtensions, val.extension))
+        );
+    };
+    
+    const resolveResolutionText = (val: FormatInfo) => {
+        const [, height] = _map(val.resolution.match(/\d+/g), Number);
+
+        return `${val.resolution} (${height}p)`;
+    };
+
+    useEffect(() => {
+        if (!_isFunction(onSelected) || !isFormatValid(currentValue)) return;
+
+        onSelected(currentValue);
+    }, [currentValue]);
+
+    useEffect(() => {
+        setCurrentValue({
+            type: selectedMediaType,
+            extension: selectedFormat,
+            videoQuality: selectedResolution,
+            audioQuality: selectedQuality,
+        });
+    }, [selectedMediaType, selectedFormat, selectedVideoExtension, selectedResolution, selectedQuality]);
+
+    useEffect(() => {
+        const formats = _get(tracks, "0.formats");
+        const nextResolutions = _uniq(_map(_filter(formats, (f) => f.vcodec !== "none" && !!f.resolution), resolveResolutionText));
+        
+        setResolutions(nextResolutions);
+        setSelectedResolution(value.videoQuality ?? _last(nextResolutions));
+    }, [tracks]);
+
+    useEffect(() => {
+        const extensionsByMediaType = {
+            [MediaFormat.Audio]: audioExtensions,
+            [MediaFormat.Video]: videoExtensions,
+        };
+        const selectedExtensionByMediaType = {
+            [MediaFormat.Audio]: selectedAudioExtension,
+            [MediaFormat.Video]: selectedVideoExtension,
+        };
+
+        setFormats(extensionsByMediaType[selectedMediaType]);
+        setSelectedFormat(selectedExtensionByMediaType[selectedMediaType]);
+    }, [selectedMediaType]);
+
+    // useEffect(() => {
+    //     const selectedExtensionByMediaType = {
+    //         [MediaFormat.Audio]: selectedAudioExtension,
+    //         [MediaFormat.Video]: selectedVideoExtension,
+    //     };
+
+    //     setSelectedFormat(selectedExtensionByMediaType[selectedMediaType]);
+    // }, [formats]);
+
+    const handleMediaTypeChange = (event: SelectChangeEvent<MediaFormat>) => {       
+        setSelectedMediaType(event.target.value as MediaFormat);
+    };
+
+    const handleFormatChange = (event: SelectChangeEvent<AudioType | VideoType>) => {       
+        if (selectedMediaType === MediaFormat.Audio) {
+            setSelectedAudioExtension(event.target.value as AudioType);
+        }
+
+        if (selectedMediaType === MediaFormat.Video) {
+            setSelectedVideoExtension(event.target.value as VideoType);
+        }
+
+        setSelectedFormat(event.target.value as AudioType | VideoType);
+    };
+
+    const handleResolutionChange = (event: SelectChangeEvent<string>) => {       
+        setSelectedResolution(event.target.value);
+    };
+    
+    const onQualityChange = (value: number) => {       
+        setSelectedQuality(value);
+    };
+
+    return (
+        <Grid className={Styles.formatSelector} container spacing={2} padding={2}>
+            <Grid size={4}>
+                <FormControl fullWidth>
+                    <InputLabel id="media-type-label">{t("mediaType")}</InputLabel>
+                    <Select<MediaFormat>
+                        labelId="media-type-label"
+                        value={selectedMediaType}
+                        label={t("mediaType")}
+                        onChange={handleMediaTypeChange}
+                    >
+                        {_map(_values(MediaFormat), (f) => <MenuItem key={f} value={f}>{_capitalize(f)}</MenuItem>)}
+                    </Select>
+                </FormControl>
+            </Grid>
+            <Grid size={4}>
+                <FormControl fullWidth>
+                    <InputLabel id="format-label">{t("format")}</InputLabel>
+                    <Select<string>
+                        labelId="format-label"
+                        value={selectedFormat}
+                        label={t("format")}
+                        onChange={handleFormatChange}
+                    >
+                        {_map(formats, (item) => <MenuItem key={item} value={item}>{item}</MenuItem>)}
+                    </Select>
+                </FormControl>
+            </Grid>
+            {selectedMediaType === MediaFormat.Video &&
+                <Grid size={4}>
+                    <FormControl fullWidth>
+                        <InputLabel id="resolution-label">{t("resolution")}</InputLabel>
+                        <Select<string>
+                            labelId="resolution-label"
+                            value={selectedResolution}
+                            label={t("resolution")}
+                            onChange={handleResolutionChange}
+                        >
+                            {_map(resolutions, (item) => <MenuItem key={item} value={item}>{item}</MenuItem>)}
+                        </Select>
+                    </FormControl>
+                </Grid>
+            }
+            {selectedMediaType === MediaFormat.Audio &&
+                <Grid size={4}>
+                    <NumberField
+                        fullWidth
+                        label={t("audioQuality")}
+                        id="audioQuality"
+                        variant="outlined"
+                        onChange={onQualityChange}
+                        value={selectedQuality}
+                        decimalScale={0}
+                        step={1}
+                        min={0}
+                        max={10}
+                    />
+                </Grid>
+            }
+        </Grid>
+    );
+};
+
+export default FormatSelector;

package/src/components/youtube/inputPanel/InputPanel.styl

@@ -0,0 +1,7 @@
+.input-panel {
+    display: flex;
+
+    > :global(.MuiGrid2-root) {
+        display: flex;
+    }
+}

package/src/components/youtube/inputPanel/InputPanel.tsx

@@ -0,0 +1,189 @@
+import _filter from "lodash/filter";
+import _isEmpty from "lodash/isEmpty";
+import _isFunction from "lodash/isFunction";
+import _map from "lodash/map";
+import React, {useMemo, useRef, useState} from "react";
+import {useTranslation} from "react-i18next";
+
+import ClearIcon from "@mui/icons-material/Clear";
+import DownloadIcon from "@mui/icons-material/Download";
+import FolderIcon from "@mui/icons-material/Folder";
+import InfoIcon from "@mui/icons-material/Info";
+import ReplayIcon from "@mui/icons-material/Replay";
+import {
+    Autocomplete, AutocompleteRenderInputParams, Button, Chip, IconButton, Stack, TextField
+} from "@mui/material";
+import Grid from "@mui/material/Grid2";
+
+import {ApplicationOptions} from "../../../common/Store";
+import {useDataState} from "../../../react/contexts/DataContext";
+import Styles from "./InputPanel.styl";
+
+export type InputPanelProps = {
+    value?: string;
+    values?: string[];
+    mode?: "single" | "multi";
+    loading?: boolean;
+    onChange?: (value: string | string[]) => void;
+    onDownload: (...args: any[]) => void;
+    onDownloadFailed: () => void;
+    onLoadInfo: (...args: any[]) => void;
+    onClear: () => void;
+};
+
+export const InputPanel: React.FC<InputPanelProps> = (props: InputPanelProps) => {
+    const {value, values, mode = "single", loading, onChange, onDownload, onDownloadFailed, onLoadInfo, onClear} = props;
+    const [appOptions] = useState<ApplicationOptions>(global.store.get("application"));
+    const {album, trackStatus} = useDataState();
+    const [validationError, setValidationError] = useState<string>();
+    const {t} = useTranslation();
+    const fileInputRef = useRef<HTMLInputElement>(null);
+
+    const validateUrl = (value: string) => {
+        const youtubeRegex = /^(?:https?:\/\/)?(?:www\.)?(?:m\.)?(?:music\.)?(?:youtube\.com\/(?:watch\?v=|embed\/|shorts\/|live\/|playlist\?list=)|youtu\.be\/)([\w-]{11})/;
+
+        const valid = appOptions.debugMode ? true : youtubeRegex.test(value);
+       
+        if (!valid) {
+            setValidationError(t("invalidYoutubeUrl"));
+        } else {
+            setValidationError(null);
+        }
+
+        return valid;
+    };
+
+    const handleDelete = (valueToDelete: any) => {
+        if (_isFunction(onChange)) {
+            onChange(_filter(values, (v) => v !== valueToDelete));
+        }
+    };
+
+    const showDownloadFailed = useMemo(() => {
+        return !_isEmpty(_filter(trackStatus, "error"));
+    }, [trackStatus]);
+
+    const onSingleValueChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        validateUrl(event.target.value);
+
+        if (_isFunction(onChange)) {
+            onChange(event.target.value);
+        }
+    };
+
+    const onMultiValueChange = (event: React.ChangeEvent<HTMLInputElement>, newValue: string[]) => {
+        if (_isFunction(onChange)) {
+            onChange(newValue);
+        }
+    };
+
+    const onKeyUp = (event: React.KeyboardEvent<HTMLInputElement>) => {
+        if (event.key === "Enter") {
+            onDownload(value);
+        }
+    };
+
+    const handleButtonClick = () => {
+        fileInputRef.current?.click();
+    };
+
+    const onSelectFile = (event: React.ChangeEvent<HTMLInputElement>) => {
+        const file = event.target.files?.[0];
+        
+        if (!file) return;
+    
+        const reader = new FileReader();
+
+        reader.onload = (e) => {
+            const content = e.target?.result as string;
+            const lines = content.split("\n");
+            
+            if (_isFunction(onChange)) {
+                onChange(lines);
+            }
+            // setValues(lines);
+        };
+        reader.readAsText(file);
+        event.target.value = "";
+    };
+
+    return (
+        <Grid className={Styles.inputPanel} container spacing={2} padding={2}>
+            <Grid size="grow">
+                {mode === "single" && <TextField
+                    onKeyUp={onKeyUp}
+                    fullWidth
+                    label={t("youtubeUrl")}
+                    variant="outlined"
+                    value={value}
+                    onChange={onSingleValueChange}
+                    helperText={validationError}
+                    error={!!validationError}
+                />}
+                {mode === "multi" &&
+                    <Autocomplete
+                        multiple
+                        freeSolo
+                        fullWidth
+                        limitTags={2}
+                        options={[]}
+                        value={values}
+                        // onChange={(event, newValue) => setValues(newValue)}
+                        onChange={onMultiValueChange}
+                        defaultValue={[]}
+                        renderTags={(value, getTagProps) => _map(value, (option, index) => (
+                            <Chip
+                                key={index}
+                                label={option}
+                                {...getTagProps({ index })}
+                                onDelete={() => handleDelete(option)}
+                            />
+                        ))}
+                        renderInput={(params: AutocompleteRenderInputParams) => (
+                            <TextField
+                                {...params}
+                                fullWidth
+                                variant="outlined"
+                                label={t("youtubeUrl")}
+                                slotProps={{
+                                    input: {
+                                        ...params.InputProps,
+                                        startAdornment: <>
+                                            <IconButton color="primary" onClick={handleButtonClick}>
+                                                <FolderIcon />
+                                            </IconButton>
+                                            {params.InputProps.startAdornment}
+                                            <input ref={fileInputRef} type="file" hidden onChange={onSelectFile} accept=".txt" />
+                                        </>
+                                    }
+                                }}
+                            />
+                        )}
+                    />
+                }
+            </Grid>
+            <Grid>
+                <Stack direction="row" spacing={1}>
+                    {album &&
+                        <Button disabled={loading || _isEmpty(value) || !!validationError} title={t("clear")} variant="contained" disableElevation color="secondary" onClick={onClear}>
+                            <ClearIcon />
+                        </Button>
+                    }
+                    <Button disabled={loading || _isEmpty(value) || !!validationError} title={t("loadInfo")} variant="contained" disableElevation color="secondary" onClick={() => onLoadInfo(value)}>
+                        <InfoIcon/>
+                    </Button>
+                    {showDownloadFailed &&
+                        <Button disabled={loading || _isEmpty(value) || !!validationError} title={t("downloadFailed")} variant="contained" disableElevation color="secondary" onClick={onDownloadFailed}>
+                            <ReplayIcon />
+                        </Button>
+                    }
+                    <Button disabled={loading || _isEmpty(value) || !!validationError} title={t("download")} variant="contained" disableElevation color="secondary" onClick={() => onDownload(value)}>
+                        <DownloadIcon/>
+                    </Button>
+                </Stack>
+            </Grid>
+        </Grid>
+    );
+};
+
+export default InputPanel;