yt-grabber 1.0.0

package/src/theme/ColorThemes.ts

@@ -0,0 +1,190 @@
+import {alpha, ColorSystemOptions, PaletteMode} from "@mui/material";
+
+import {Blue, Color, Gray, Green, Orange, Red} from "./Colors";
+
+export type ThemeColorScheme = {
+    primary: Color;
+    secondary: Color;
+}
+
+export type ColorTheme = {
+    primary: {
+        light: string;
+        main: string;
+        dark: string;
+        contrastText: string;
+    },
+    secondary: {
+        light: string;
+        main: string;
+        dark: string;
+        contrastText: string;
+    },
+    background: {
+        default: string;
+        paper: string;
+    },
+    divider: string;
+    text: {
+        primary: string;
+        secondary: string;
+        disabled: string;
+    }
+}
+
+export const SlateBlue: Color = {
+    50: "hsl(231, 35%, 95%)",
+    100: "hsl(231, 35%, 85%)",
+    200: "hsl(231, 35%, 75%)",
+    300: "hsl(232, 25%, 65%)",
+    400: "hsl(232, 25%, 55%)",
+    500: "hsl(232, 25%, 50%)",
+    600: "hsl(232, 25%, 40%)",
+    700: "hsl(233, 35%, 30%)",
+    800: "hsl(233, 35%, 20%)",
+    900: "hsl(233, 35%, 15%)",
+};
+
+export const Purple: Color = {
+    50: "hsl(337, 75%, 95%)",
+    100: "hsl(337, 75%, 85%)",
+    200: "hsl(337, 75%, 75%)",
+    300: "hsl(338, 85%, 65%)",
+    400: "hsl(338, 85%, 55%)",
+    500: "hsl(338, 85%, 50%)",
+    600: "hsl(338, 85%, 40%)",
+    700: "hsl(339, 75%, 30%)",
+    800: "hsl(339, 75%, 20%)",
+    900: "hsl(339, 75%, 15%)",
+};
+
+export const getThemeColorSystem = (name: string, mode: PaletteMode): ColorSystemOptions => {
+    const colorScheme = ThemeColorSchemes[name];
+
+    return {
+        palette: {
+            mode,
+            primary: {
+                light: colorScheme.primary[200],
+                main: colorScheme.primary[400],
+                dark: colorScheme.primary[700],
+                contrastText: colorScheme.primary[50],
+                ...(mode === "dark" && {
+                    light: colorScheme.primary[300],
+                    main: colorScheme.primary[500],
+                    dark: colorScheme.primary[800],
+                    contrastText: colorScheme.primary[50],
+                }),
+            },
+            secondary: {
+                light: colorScheme.secondary[200],
+                main: colorScheme.secondary[400],
+                dark: colorScheme.secondary[700],
+                contrastText: colorScheme.secondary[50],
+                ...(mode === "dark" && {
+                    light: colorScheme.secondary[300],
+                    main: colorScheme.secondary[600],
+                    dark: colorScheme.secondary[900],
+                    contrastText: colorScheme.secondary[50],
+                }),
+            },
+            info: {
+                light: Blue[100],
+                main: Blue[300],
+                dark: Blue[600],
+                contrastText: Gray[50],
+                ...(mode === "dark" && {
+                    contrastText: Blue[300],
+                    light: Blue[500],
+                    main: Blue[700],
+                    dark: Blue[900],
+                }),
+            },
+            warning: {
+                light: Orange[300],
+                main: Orange[400],
+                dark: Orange[800],
+                ...(mode === "dark" && {
+                    light: Orange[400],
+                    main: Orange[500],
+                    dark: Orange[700],
+                }),
+            },
+            error: {
+                light: Red[300],
+                main: Red[400],
+                dark: Red[800],
+                ...(mode === "dark" && {
+                    light: Red[400],
+                    main: Red[500],
+                    dark: Red[700],
+                }),
+            },
+            success: {
+                light: Green[300],
+                main: Green[400],
+                dark: Green[800],
+                ...(mode === "dark" && {
+                    light: Green[400],
+                    main: Green[500],
+                    dark: Green[700],
+                }),
+            },
+            grey: Gray,
+            divider: mode === "dark" ? alpha(colorScheme.primary[700], 0.6) : alpha(colorScheme.primary[300], 0.4),
+            background: {
+                default: Gray[200],
+                paper: Gray[50],
+                ...(mode === "dark" && {
+                    default: Gray.A700,
+                    paper: colorScheme.primary[900],
+                }),
+            },
+            text: {
+                primary: colorScheme.primary[600],
+                secondary: colorScheme.primary[300],
+                disabled: colorScheme.primary[100],
+                ...(mode === "dark" && {
+                    primary: colorScheme.primary[100],
+                    secondary: colorScheme.primary[400],
+                    disabled: colorScheme.primary[700]
+                }),
+            },
+            // AppBar: {
+            //     darkBg: colorScheme.primary[300],
+            //     defaultBg: colorScheme.primary[300],
+            //     darkColor: colorScheme.primary[900],
+            //     ...(mode === "dark" && {
+            //         darkBg: colorScheme.primary[900],
+            //         defaultBg: colorScheme.primary[900],
+            //         darkColor: colorScheme.primary[100],
+            //     }),
+            // },
+
+            action: {
+                hover: alpha(Gray[200], 0.2),
+                selected: alpha(Gray[200], 0.3),
+                // active: Gray.A200,
+                focus: Gray.A200,
+                ...(mode === "dark" && {
+                    hover: alpha(Gray[600], 0.2),
+                    selected: alpha(Gray[600], 0.3),
+                    active: Gray[200],
+                    focus: Gray[200],
+                }),
+            },
+        },
+        
+    };
+};
+
+export const ThemeColorSchemes: { [key: string]: ThemeColorScheme } = {
+    Sky: {
+        primary: SlateBlue,
+        secondary: Purple
+    }
+};
+
+// export const ColorThemes: { [key: string]: ColorTheme } = {
+//     Sky: getTheme,
+// };

package/src/theme/Colors.ts

@@ -0,0 +1,92 @@
+import {CommonColors} from "@mui/material";
+
+export interface Color {
+    50: string;
+    100: string;
+    200: string;
+    300: string;
+    400: string;
+    500: string;
+    600: string;
+    700: string;
+    800: string;
+    900: string;
+    A100?: string;
+    A200?: string;
+    A400?: string;
+    A700?: string;
+}
+  
+export const Common: CommonColors = {
+    black: "hsl(0, 0%, 100%)",
+    white: "hsl(0, 0%, 0%)",
+};
+
+export const Blue: Color = {
+    50: "hsl(210, 100%, 95%)",
+    100: "hsl(210, 100%, 92%)",
+    200: "hsl(210, 100%, 80%)",
+    300: "hsl(210, 100%, 65%)",
+    400: "hsl(210, 98%, 55%)",
+    500: "hsl(210, 98%, 48%)",
+    600: "hsl(210, 98%, 42%)",
+    700: "hsl(210, 100%, 35%)",
+    800: "hsl(210, 100%, 21%)",
+    900: "hsl(210, 100%, 16%)",
+};
+
+export const Green: Color = {
+    50: "hsl(120, 80%, 98%)",
+    100: "hsl(120, 75%, 94%)",
+    200: "hsl(120, 75%, 87%)",
+    300: "hsl(120, 61%, 77%)",
+    400: "hsl(120, 44%, 53%)",
+    500: "hsl(120, 59%, 30%)",
+    600: "hsl(120, 70%, 25%)",
+    700: "hsl(120, 75%, 16%)",
+    800: "hsl(120, 84%, 10%)",
+    900: "hsl(120, 87%, 6%)",
+};
+
+export const Orange: Color = {
+    50: "hsl(45, 100%, 97%)",
+    100: "hsl(45, 92%, 90%)",
+    200: "hsl(45, 94%, 80%)",
+    300: "hsl(45, 90%, 65%)",
+    400: "hsl(45, 90%, 40%)",
+    500: "hsl(45, 90%, 35%)",
+    600: "hsl(45, 91%, 25%)",
+    700: "hsl(45, 94%, 20%)",
+    800: "hsl(45, 95%, 16%)",
+    900: "hsl(45, 93%, 12%)",
+};
+
+export const Red: Color = {
+    50: "hsl(0, 100%, 97%)",
+    100: "hsl(0, 92%, 90%)",
+    200: "hsl(0, 94%, 80%)",
+    300: "hsl(0, 90%, 65%)",
+    400: "hsl(0, 90%, 40%)",
+    500: "hsl(0, 90%, 30%)",
+    600: "hsl(0, 91%, 25%)",
+    700: "hsl(0, 94%, 18%)",
+    800: "hsl(0, 95%, 12%)",
+    900: "hsl(0, 93%, 6%)",
+};
+
+export const Gray: Color = {
+    50: "hsl(220, 35%, 97%)",
+    100: "hsl(220, 30%, 94%)",
+    200: "hsl(220, 20%, 88%)",
+    300: "hsl(220, 20%, 80%)",
+    400: "hsl(220, 20%, 65%)",
+    500: "hsl(220, 20%, 42%)",
+    600: "hsl(220, 20%, 35%)",
+    700: "hsl(220, 20%, 25%)",
+    800: "hsl(220, 20%, 22%)",
+    900: "hsl(220, 20%, 15%)",
+    A100: "hsl(220, 20%, 10%)",
+    A200: "hsl(220, 20%, 7%)",
+    A400: "hsl(220, 20%, 5%)",
+    A700: "hsl(220, 25%, 3%)",
+};

package/src/theme/Shadows.ts

@@ -0,0 +1,9 @@
+import {createTheme, Shadows} from "@mui/material/styles";
+
+const defaultTheme = createTheme();
+
+export const shadows: Shadows = [
+    ...defaultTheme.shadows,
+] as Shadows;
+
+export default shadows;

package/src/theme/Shape.ts

@@ -0,0 +1,7 @@
+import {Shape} from "@mui/system";
+
+export const shape: Shape = {
+    borderRadius: 8,
+};
+
+export default shape;

package/src/theme/Theme.ts

@@ -0,0 +1,24 @@
+import {ColorSystemOptions, CssVarsThemeOptions, Palette, PaletteMode} from "@mui/material/styles";
+
+import {getThemeColorSystem} from "./ColorThemes";
+import Shadows from "./Shadows";
+import Shape from "./Shape";
+import Typography from "./Typography";
+
+export type ColorScheme = {palette: Partial<Palette>};
+
+export const getThemeDefinition = (name: string): CssVarsThemeOptions => {
+    return {
+        colorSchemes: getThemeColorSchemes(name),
+        shadows: Shadows,
+        typography: Typography,
+        shape: Shape,
+    };
+}; 
+
+export const getThemeColorSchemes = (name: string): Record<PaletteMode, ColorSystemOptions> => {
+    return {
+        light: getThemeColorSystem(name, "light"),
+        dark: getThemeColorSystem(name, "dark"),
+    };
+};

package/src/theme/Typography.ts

@@ -0,0 +1,56 @@
+import {createTheme} from "@mui/material/styles";
+import {Typography} from "@mui/system";
+
+const defaultTheme = createTheme();
+
+export const typography: Typography = {
+    fontFamily: "Lato, sans-serif",
+    h1: {
+        fontSize: defaultTheme.typography.pxToRem(48),
+        fontWeight: 600,
+        lineHeight: 1.2,
+        letterSpacing: -0.5,
+    },
+    h2: {
+        fontSize: defaultTheme.typography.pxToRem(36),
+        fontWeight: 600,
+        lineHeight: 1.2,
+    },
+    h3: {
+        fontSize: defaultTheme.typography.pxToRem(30),
+        lineHeight: 1.2,
+    },
+    h4: {
+        fontSize: defaultTheme.typography.pxToRem(24),
+        fontWeight: 600,
+        lineHeight: 1.5,
+    },
+    h5: {
+        fontSize: defaultTheme.typography.pxToRem(20),
+        fontWeight: 600,
+    },
+    h6: {
+        fontSize: defaultTheme.typography.pxToRem(18),
+        fontWeight: 600,
+    },
+    subtitle1: {
+        fontSize: defaultTheme.typography.pxToRem(18),
+    },
+    subtitle2: {
+        fontSize: defaultTheme.typography.pxToRem(14),
+        fontWeight: 500,
+    },
+    body1: {
+        fontSize: defaultTheme.typography.pxToRem(14),
+    },
+    body2: {
+        fontSize: defaultTheme.typography.pxToRem(14),
+        fontWeight: 400,
+    },
+    caption: {
+        fontSize: defaultTheme.typography.pxToRem(12),
+        fontWeight: 400,
+    },
+};
+
+export default typography;

package/src/views/development/DevelopmentView.styl

@@ -0,0 +1,22 @@
+@import "../../styles/mixins.styl"
+@import "../../styles/fonts.styl"
+
+.development
+  display: flex
+  flex-direction: column
+  flex-grow: 1
+  justify-content: space-between
+
+  .form
+    padding: 1rem
+
+    .root-column
+      display: block
+      flex-grow: 1
+
+  .footer
+    display: flex
+    justify-content: center
+    align-items: center
+    padding: 1rem
+

package/src/views/development/DevelopmentView.tsx

@@ -0,0 +1,57 @@
+import React, {useEffect, useState} from "react";
+import {useTranslation} from "react-i18next";
+import {useDebounceValue} from "usehooks-ts";
+
+import {Box, Button, Divider, FormControlLabel, Stack, Switch} from "@mui/material";
+import Grid from "@mui/material/Grid2";
+
+import {ApplicationOptions} from "../../common/Store";
+import {useAppContext} from "../../react/contexts/AppContext";
+import Styles from "./DevelopmentView.styl";
+
+export const DevelopmentView: React.FC = () => {
+    const {actions} = useAppContext();
+    const {t} = useTranslation();
+    const [options, setOptions] = useState<ApplicationOptions>(global.store.get("application"));
+    const [debouncedOptions] = useDebounceValue(options, 500);
+
+    const handleClose = async () => {
+        actions.setLocation("/");
+    };
+
+    const handleDebugModeChange = (e: React.ChangeEvent<HTMLInputElement>, checked: boolean) => {
+        setOptions((prev) => ({ ...prev, debugMode: checked }));
+    };
+
+    useEffect(() => {
+        global.store.set("application", debouncedOptions);
+    }, [debouncedOptions]);
+
+    return (
+        <Box className={Styles.development}>
+            <Stack
+                component="form"
+                className={Styles.form}
+                direction="row"
+                spacing={2}
+                divider={<Divider orientation="vertical" />}
+            >
+                <Stack direction="column" spacing={3} className={Styles.rootColumn}>
+                    <FormControlLabel
+                        control={<Switch checked={options.debugMode} onChange={handleDebugModeChange} />}
+                        label={t("debugMode")}
+                    />
+                </Stack>
+            </Stack>
+            <Grid className={Styles.footer}>
+                <Stack className={Styles.actions} direction="row" spacing={2}>
+                    <Button variant="contained" color="primary" onClick={handleClose}>
+                        {t("close")}
+                    </Button>
+                </Stack>
+            </Grid>
+        </Box>
+    );
+};
+
+export default DevelopmentView;

package/src/views/home/HomeView.styl

@@ -0,0 +1,60 @@
+@import "../../styles/mixins.styl"
+@import "../../styles/fonts.styl"
+
+.home {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    justify-content: space-between;
+    overflow: hidden;
+
+    .header {
+        > div:global(.MuiGrid2-root) {
+            display: flex;
+        }
+    }
+
+    .formats {
+        justify-content: center;
+    }
+
+    .header {
+        position: relative;
+
+        .format-info {
+            display: flex;
+            justify-content: center;
+        }
+    }
+
+    .cancel {
+        position: absolute;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 100%;
+        top: 0;
+        z-index: 999;
+        height: 100%;
+        backdrop-filter: brightness(0.6);
+    }
+
+    .content {
+        overflow: overlay;
+        flex-grow: 1;
+        align-content: flex-start;
+        justify-content: center;
+
+        .error {
+            width: 100%;
+            justify-content: center;
+        }
+    }
+
+    .footer {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding: 0.5rem 0.5rem 1rem 0.5rem;
+    }
+}