diff --git a/front/apps/web/src/components/navbar.tsx b/front/apps/web/src/components/navbar.tsx deleted file mode 100644 index eb3543bb..00000000 --- a/front/apps/web/src/components/navbar.tsx +++ /dev/null @@ -1,123 +0,0 @@ -/* - * Kyoo - A portable and vast media library solution. - * Copyright (c) Kyoo. - * - * See AUTHORS.md and LICENSE file in the project root for full license information. - * - * Kyoo is free software: you can redistribute it and/or modify - * it under the terms of the GNU General Public License as published by - * the Free Software Foundation, either version 3 of the License, or - * any later version. - * - * Kyoo is distributed in the hope that it will be useful, - * but WITHOUT ANY WARRANTY; without even the implied warranty of - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - * GNU General Public License for more details. - * - * You should have received a copy of the GNU General Public License - * along with Kyoo. If not, see . - */ - -import { - AppBar, - Toolbar, - Typography, - Avatar, - IconButton, - Tooltip, - Box, - Skeleton, - AppBarProps, -} from "@mui/material"; -import MenuIcon from "@mui/icons-material/Menu"; -import useTranslation from "next-translate/useTranslation"; -import { ButtonLink } from "~/utils/link"; -import { Library, LibraryP, Page, Paged } from "~/models"; -import { QueryIdentifier, useFetch } from "~/utils/query"; -import { ErrorSnackbar } from "./errors"; - -const KyooTitle = () => { - const { t } = useTranslation("common"); - - return ( - - - - - Kyoo - - - - ); -}; - -export const Navbar = (barProps: AppBarProps) => { - const { t } = useTranslation("common"); - const { data, error, isSuccess, isError } = useFetch(Navbar.query()); - - return ( - - - - - - - - - - {isSuccess - ? data.items.map((library) => ( - - {library.name} - - )) - : [...Array(4)].map((_, i) => ( - - - - ))} - - - - - - - - {isError && } - - ); -}; - -Navbar.query = (): QueryIdentifier> => ({ - parser: Paged(LibraryP), - path: ["libraries"], -}); diff --git a/front/apps/web/src/components/poster.tsx b/front/apps/web/src/components/poster.tsx deleted file mode 100644 index 0c6b9f67..00000000 --- a/front/apps/web/src/components/poster.tsx +++ /dev/null @@ -1,129 +0,0 @@ -/* - * Kyoo - A portable and vast media library solution. - * Copyright (c) Kyoo. - * - * See AUTHORS.md and LICENSE file in the project root for full license information. - * - * Kyoo is free software: you can redistribute it and/or modify - * it under the terms of the GNU General Public License as published by - * the Free Software Foundation, either version 3 of the License, or - * any later version. - * - * Kyoo is distributed in the hope that it will be useful, - * but WITHOUT ANY WARRANTY; without even the implied warranty of - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - * GNU General Public License for more details. - * - * You should have received a copy of the GNU General Public License - * along with Kyoo. If not, see . - */ - -import { Box, Skeleton, styled } from "@mui/material"; -import { SyntheticEvent, useEffect, useLayoutEffect, useRef, useState } from "react"; -import { ComponentsOverrides, ComponentsProps, ComponentsVariants } from "@mui/material"; -import { withThemeProps } from "~/utils/with-theme"; -import type { Property } from "csstype"; -import { ResponsiveStyleValue } from "@mui/system"; - -type ImageOptions = { - radius?: string; - fallback?: string; -}; - -type ImageProps = { - img?: string | null; - alt?: string; -} & ImageOptions; - -type ImagePropsWithLoading = - | (ImageProps & { loading?: boolean }) - | (Partial & { loading: true }); - -type Width = ResponsiveStyleValue>; -type Height = ResponsiveStyleValue>; - -const _Image = ({ - img, - alt, - radius, - fallback, - loading = false, - aspectRatio = undefined, - width = undefined, - height = undefined, - ...others -}: ImagePropsWithLoading & - ( - | { aspectRatio?: string; width: Width; height: Height } - | { aspectRatio: string; width?: Width; height?: Height } - )) => { - const [showLoading, setLoading] = useState(loading); - const imgRef = useRef(null); - - // This allow the loading bool to be false with SSR but still be on client-side - useLayoutEffect(() => { - if (!imgRef.current?.complete && img) setLoading(true); - if (!img && !loading) setLoading(false); - }, [img, loading]); - - return ( - *": { width: "100%", height: "100%" }, - }} - {...others} - > - {showLoading && } - {!loading && img && ( - setLoading(false)} - onError={({ currentTarget }: SyntheticEvent) => { - if (fallback && currentTarget.src !== fallback) currentTarget.src = fallback; - else setLoading(false); - }} - sx={{ objectFit: "cover", display: showLoading ? "hidden" : undefined }} - /> - )} - - ); -}; - -export const Image = styled(_Image)({}); - -// eslint-disable-next-line jsx-a11y/alt-text -const _Poster = (props: ImagePropsWithLoading & { width?: Width; height?: Height }) => ( - <_Image aspectRatio="2 / 3" {...props} /> -); - -declare module "@mui/material/styles" { - interface ComponentsPropsList { - Poster: ImageOptions; - } - - interface ComponentNameToClassKey { - Poster: Record; - } - - interface Components { - Poster?: { - defaultProps?: ComponentsProps["Poster"]; - styleOverrides?: ComponentsOverrides["Poster"]; - variants?: ComponentsVariants["Poster"]; - }; - } -} - -export const Poster = withThemeProps(_Poster, { - name: "Poster", - slot: "Root", -}); diff --git a/front/apps/web/src/components/primitives/text.tsx b/front/apps/web/src/components/primitives/text.tsx deleted file mode 100644 index 3c26a657..00000000 --- a/front/apps/web/src/components/primitives/text.tsx +++ /dev/null @@ -1,67 +0,0 @@ -/* - * Kyoo - A portable and vast media library solution. - * Copyright (c) Kyoo. - * - * See AUTHORS.md and LICENSE file in the project root for full license information. - * - * Kyoo is free software: you can redistribute it and/or modify - * it under the terms of the GNU General Public License as published by - * the Free Software Foundation, either version 3 of the License, or - * any later version. - * - * Kyoo is distributed in the hope that it will be useful, - * but WITHOUT ANY WARRANTY; without even the implied warranty of - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - * GNU General Public License for more details. - * - * You should have received a copy of the GNU General Public License - * along with Kyoo. If not, see . - */ - -import { forwardRef } from "react"; - -export const Heading = forwardRef< - HTMLHeadingElement, - { - variant: "h1" | "h2" | "h3" | "h4" | "h5" | "h6"; - children?: JSX.Element | JSX.Element[]; - } ->(function Heading({ variant = "h1", children, ...props }, ref) { - const H = variant; - return ( - ({ - font: theme.fonts.heading, - color: theme.heading, - })} - className={`Heading Heading-${variant}`} - > - {children} - - ); -}); - - -export const Paragraph = forwardRef< - HTMLParagraphElement, - { - variant: "normal" | "subtext"; - children?: JSX.Element | JSX.Element[]; - } ->(function Paragraph({ variant, children, ...props }, ref) { - return ( -

({ - font: theme.fonts.paragraph, - color: variant === "normal" ? theme.paragraph : theme.subtext, - })} - className={`Paragraph Paragraph-${variant}`} - > - {children} -

- ); -}); diff --git a/front/apps/web/src/pages/browse/index.tsx b/front/apps/web/src/pages/browse/index.tsx index c7069108..b6d62b0e 100644 --- a/front/apps/web/src/pages/browse/index.tsx +++ b/front/apps/web/src/pages/browse/index.tsx @@ -37,13 +37,14 @@ import { useRouter } from "next/router"; import { useState } from "react"; import { ErrorPage } from "~/components/errors"; import { Navbar } from "@kyoo/ui"; -import { Poster, Image } from "~/components/poster"; +import { Poster, Image } from "@kyoo/primitives"; import { ItemType, LibraryItem, LibraryItemP } from "~/models"; import { getDisplayDate } from "~/models/utils"; import { InfiniteScroll } from "~/utils/infinite-scroll"; import { Link } from "~/utils/link"; import { withRoute } from "~/utils/router"; import { QueryIdentifier, QueryPage, useInfiniteFetch } from "~/utils/query"; +import { px } from "yoshiki/native"; enum SortBy { Name = "name", @@ -89,7 +90,7 @@ const ItemGrid = ({ m: [1, 2], }} > - + {name ?? } {(loading || subtitle) && ( @@ -136,12 +137,12 @@ const ItemList = ({ }} > {name} diff --git a/front/packages/primitives/src/avatar.tsx b/front/packages/primitives/src/avatar.tsx new file mode 100644 index 00000000..d9329db0 --- /dev/null +++ b/front/packages/primitives/src/avatar.tsx @@ -0,0 +1,33 @@ +/* + * Kyoo - A portable and vast media library solution. + * Copyright (c) Kyoo. + * + * See AUTHORS.md and LICENSE file in the project root for full license information. + * + * Kyoo is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * any later version. + * + * Kyoo is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with Kyoo. If not, see . + */ + +import { View, ViewStyle } from "react-native"; +import { Image } from "./"; +import { useYoshiki, px } from "yoshiki/native"; + +export const Avatar = ({ src, alt, size = px(24) }: { src: string; alt: string; size: number }) => { + const { css } = useYoshiki(); + + return ( + + {alt} + + ); +}; diff --git a/front/packages/primitives/src/image.tsx b/front/packages/primitives/src/image.tsx new file mode 100644 index 00000000..d29a4eb1 --- /dev/null +++ b/front/packages/primitives/src/image.tsx @@ -0,0 +1,103 @@ +/* + * Kyoo - A portable and vast media library solution. + * Copyright (c) Kyoo. + * + * See AUTHORS.md and LICENSE file in the project root for full license information. + * + * Kyoo is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * any later version. + * + * Kyoo is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with Kyoo. If not, see . + */ + +import { useState } from "react"; +import { + View, + Image as Img, + ImageSourcePropType, +} from "react-native"; +import type { Property } from "csstype"; + +type ImageOptions = { + radius?: string; + fallback?: string | ImageSourcePropType; +}; + +type ImageProps = { + src?: string | ImageSourcePropType | null; + alt?: string; +} & ImageOptions; + +type ImagePropsWithLoading = + | (ImageProps & { loading?: boolean }) + | (Partial & { loading: true }); + +type Width = Property.Width<(string & {}) | 0>; +type Height = Property.Height<(string & {}) | 0>; + +export const Image = ({ + src, + alt, + radius, + fallback, + loading = false, + aspectRatio = undefined, + width = undefined, + height = undefined, + ...others +}: ImagePropsWithLoading & + ( + | { aspectRatio?: string; width: Width; height: Height } + | { aspectRatio: string; width?: Width; height?: Height } + )) => { + const [showLoading, setLoading] = useState(loading); + const [source, setSource] = useState(src); + /* const imgRef = useRef(null); */ + + // This allow the loading bool to be false with SSR but still be on client-side + /* useLayoutEffect(() => { */ + /* if (!imgRef.current?.complete && src) setLoading(true); */ + /* if (!src && !loading) setLoading(false); */ + /* }, [src, loading]); */ + + return ( + *": { width: "100%", height: "100%" }, + }} + {...others} + > + {/* {showLoading && } */} + {!loading && source && ( + setLoading(false)} + onError={() => { + if (fallback) setSource(fallback); + else setLoading(false); + }} + css={{ objectFit: "cover", display: showLoading ? "hidden" : undefined }} + /> + )} + + ); +}; + +export const Poster = (props: ImagePropsWithLoading & { width?: Width; height?: Height }) => ( + +); diff --git a/front/packages/primitives/src/index.ts b/front/packages/primitives/src/index.ts index 796b8739..42e47476 100644 --- a/front/packages/primitives/src/index.ts +++ b/front/packages/primitives/src/index.ts @@ -23,6 +23,8 @@ export * from "./text"; export * from "./themes"; export * from "./icons"; export * from "./links"; +export * from "./avatar"; +export * from "./image"; import { px } from "yoshiki/native"; diff --git a/front/packages/ui/src/navbar/icon.tsx b/front/packages/ui/src/navbar/icon.tsx new file mode 100644 index 00000000..a5ead79b --- /dev/null +++ b/front/packages/ui/src/navbar/icon.tsx @@ -0,0 +1,74 @@ +/* + * Kyoo - A portable and vast media library solution. + * Copyright (c) Kyoo. + * + * See AUTHORS.md and LICENSE file in the project root for full license information. + * + * Kyoo is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * any later version. + * + * Kyoo is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with Kyoo. If not, see . + */ + +import Svg, { SvgProps, Path } from "react-native-svg"; + +/* export const KyooLogo = (props: SvgProps) => ( */ +/* */ +/* */ +/* */ +/* */ +/* ); */ + +export const KyooLongLogo = (props: SvgProps) => + ( + + + + + + + + +); diff --git a/front/packages/ui/src/navbar/navbar.tsx b/front/packages/ui/src/navbar/navbar.tsx new file mode 100644 index 00000000..6924b06e --- /dev/null +++ b/front/packages/ui/src/navbar/navbar.tsx @@ -0,0 +1,59 @@ +/* + * Kyoo - A portable and vast media library solution. + * Copyright (c) Kyoo. + * + * See AUTHORS.md and LICENSE file in the project root for full license information. + * + * Kyoo is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * any later version. + * + * Kyoo is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with Kyoo. If not, see . + */ + +import { Paragraph } from "@kyoo/primitives"; +import { View } from "react-native"; +import { KyooLongLogo } from "./icon"; + +export const Navbar = () => { + /* const { t } = useTranslation("common"); */ + /* const { data, error, isSuccess, isError } = useFetch(Navbar.query()); */ + + return ( + ({ backgroundColor: theme.appbar })}> + + Toto + {/* */} + {/* {isSuccess */} + {/* ? data.items.map((library) => ( */} + {/* */} + {/* {library.name} */} + {/* */} + {/* )) */} + {/* : [...Array(4)].map((_, i) => ( */} + {/* */} + {/* */} + {/* */} + {/* ))} */} + {/* */} + {/* */} + {/* {isError && } */} + + ); +}; + +/* Navbar.query = (): QueryIdentifier> => ({ */ +/* parser: Paged(LibraryP), */ +/* path: ["libraries"], */ +/* }); */