mirror of
https://github.com/zoriya/Kyoo.git
synced 2025-05-24 02:02:36 -04:00
Merge branch 'feat/native-navbar' into feat/style
This commit is contained in:
Zoe Roux
commit
ca50b53bae
@ -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 <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
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 (
|
||||
<Tooltip title={t("navbar.home")}>
|
||||
<ButtonLink
|
||||
css={{
|
||||
alignItems: "center",
|
||||
color: "inherit",
|
||||
textDecoration: "inherit",
|
||||
display: "flex",
|
||||
}}
|
||||
href="/"
|
||||
>
|
||||
<img src={"/icon.svg"} width="24px" height="24px" alt="" />
|
||||
<Typography
|
||||
variant="h6"
|
||||
noWrap
|
||||
css={{
|
||||
ml: 8,
|
||||
mr: 16,
|
||||
fontFamily: "monospace",
|
||||
fontWeight: 700,
|
||||
color: "white",
|
||||
}}
|
||||
>
|
||||
Kyoo
|
||||
</Typography>
|
||||
</ButtonLink>
|
||||
</Tooltip>
|
||||
);
|
||||
};
|
||||
|
||||
export const Navbar = (barProps: AppBarProps) => {
|
||||
const { t } = useTranslation("common");
|
||||
const { data, error, isSuccess, isError } = useFetch(Navbar.query());
|
||||
|
||||
return (
|
||||
<AppBar position="sticky" {...barProps}>
|
||||
<Toolbar>
|
||||
<IconButton
|
||||
size="large"
|
||||
aria-label="more"
|
||||
aria-controls="menu-appbar"
|
||||
aria-haspopup="true"
|
||||
color="inherit"
|
||||
sx={{ display: { sx: "flex", sm: "none" } }}
|
||||
>
|
||||
<MenuIcon />
|
||||
</IconButton>
|
||||
<Box sx={{ flexGrow: 1, display: { sx: "flex", sm: "none" } }} />
|
||||
<KyooTitle css={{ mr: 1 }} />
|
||||
<Box sx={{ flexGrow: 1, display: { sx: "flex", sm: "none" } }} />
|
||||
<Box sx={{ flexGrow: 1, display: { xs: "none", sm: "flex" } }}>
|
||||
{isSuccess
|
||||
? data.items.map((library) => (
|
||||
<ButtonLink
|
||||
href={`/browse/${library.slug}`}
|
||||
key={library.slug}
|
||||
sx={{ color: "white" }}
|
||||
>
|
||||
{library.name}
|
||||
</ButtonLink>
|
||||
))
|
||||
: [...Array(4)].map((_, i) => (
|
||||
<Typography key={i} variant="button" px=".25rem">
|
||||
<Skeleton width="5rem" />
|
||||
</Typography>
|
||||
))}
|
||||
</Box>
|
||||
<Tooltip title={t("navbar.login")}>
|
||||
<IconButton css={{ p: 0 }} href="/auth/login">
|
||||
<Avatar alt={t("navbar.login")} />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
</Toolbar>
|
||||
{isError && <ErrorSnackbar error={error} />}
|
||||
</AppBar>
|
||||
);
|
||||
};
|
||||
|
||||
Navbar.query = (): QueryIdentifier<Page<Library>> => ({
|
||||
parser: Paged(LibraryP),
|
||||
path: ["libraries"],
|
||||
});
|
||||
@ -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 <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
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<ImageProps> & { loading: true });
|
||||
|
||||
type Width = ResponsiveStyleValue<Property.Width<(string & {}) | 0>>;
|
||||
type Height = ResponsiveStyleValue<Property.Height<(string & {}) | 0>>;
|
||||
|
||||
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<boolean>(loading);
|
||||
const imgRef = useRef<HTMLImageElement>(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 (
|
||||
<Box
|
||||
borderRadius={radius}
|
||||
overflow={"hidden"}
|
||||
sx={{
|
||||
aspectRatio,
|
||||
width,
|
||||
height,
|
||||
backgroundColor: "grey.300",
|
||||
"& > *": { width: "100%", height: "100%" },
|
||||
}}
|
||||
{...others}
|
||||
>
|
||||
{showLoading && <Skeleton variant="rectangular" height="100%" />}
|
||||
{!loading && img && (
|
||||
<Box
|
||||
component="img"
|
||||
ref={imgRef}
|
||||
src={img}
|
||||
alt={alt}
|
||||
onLoad={() => setLoading(false)}
|
||||
onError={({ currentTarget }: SyntheticEvent<HTMLImageElement>) => {
|
||||
if (fallback && currentTarget.src !== fallback) currentTarget.src = fallback;
|
||||
else setLoading(false);
|
||||
}}
|
||||
sx={{ objectFit: "cover", display: showLoading ? "hidden" : undefined }}
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
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<string, never>;
|
||||
}
|
||||
|
||||
interface Components<Theme = unknown> {
|
||||
Poster?: {
|
||||
defaultProps?: ComponentsProps["Poster"];
|
||||
styleOverrides?: ComponentsOverrides<Theme>["Poster"];
|
||||
variants?: ComponentsVariants["Poster"];
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
export const Poster = withThemeProps(_Poster, {
|
||||
name: "Poster",
|
||||
slot: "Root",
|
||||
});
|
||||
@ -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 <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
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 (
|
||||
<H
|
||||
ref={ref}
|
||||
{...props}
|
||||
css={(theme) => ({
|
||||
font: theme.fonts.heading,
|
||||
color: theme.heading,
|
||||
})}
|
||||
className={`Heading Heading-${variant}`}
|
||||
>
|
||||
{children}
|
||||
</H>
|
||||
);
|
||||
});
|
||||
|
||||
|
||||
export const Paragraph = forwardRef<
|
||||
HTMLParagraphElement,
|
||||
{
|
||||
variant: "normal" | "subtext";
|
||||
children?: JSX.Element | JSX.Element[];
|
||||
}
|
||||
>(function Paragraph({ variant, children, ...props }, ref) {
|
||||
return (
|
||||
<p
|
||||
ref={ref}
|
||||
{...props}
|
||||
css={(theme) => ({
|
||||
font: theme.fonts.paragraph,
|
||||
color: variant === "normal" ? theme.paragraph : theme.subtext,
|
||||
})}
|
||||
className={`Paragraph Paragraph-${variant}`}
|
||||
>
|
||||
{children}
|
||||
</p>
|
||||
);
|
||||
});
|
||||
@ -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],
|
||||
}}
|
||||
>
|
||||
<Poster img={poster} alt={name} width="100%" />
|
||||
<Poster src={poster} alt={name} width="100%" />
|
||||
<Typography minWidth="80%">{name ?? <Skeleton />}</Typography>
|
||||
{(loading || subtitle) && (
|
||||
<Typography variant="caption" minWidth="50%">
|
||||
@ -136,12 +137,12 @@ const ItemList = ({
|
||||
}}
|
||||
>
|
||||
<Image
|
||||
img={thumbnail}
|
||||
src={thumbnail}
|
||||
alt={name}
|
||||
width="100%"
|
||||
height="100%"
|
||||
radius="5px"
|
||||
sx={{
|
||||
radius={px(5)}
|
||||
css={{
|
||||
position: "absolute",
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
@ -185,11 +186,10 @@ const ItemList = ({
|
||||
)}
|
||||
</Box>
|
||||
<Poster
|
||||
img={poster}
|
||||
src={poster}
|
||||
alt=""
|
||||
height="80%"
|
||||
className="poster"
|
||||
sx={{
|
||||
css={{
|
||||
transition: "transform .2s",
|
||||
}}
|
||||
/>
|
||||
|
||||
33
front/packages/primitives/src/avatar.tsx
Normal file
33
front/packages/primitives/src/avatar.tsx
Normal file
@ -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 <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
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 (
|
||||
<View {...css({ borderRadius: size / 2, width: size, height: size })}>
|
||||
<Image src={src} alt={alt} width={size} height={size} />
|
||||
</View>
|
||||
);
|
||||
};
|
||||
103
front/packages/primitives/src/image.tsx
Normal file
103
front/packages/primitives/src/image.tsx
Normal file
@ -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 <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
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<ImageProps> & { 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<boolean>(loading);
|
||||
const [source, setSource] = useState(src);
|
||||
/* const imgRef = useRef<Img>(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 (
|
||||
<View
|
||||
css={{
|
||||
aspectRatio,
|
||||
width,
|
||||
height,
|
||||
/* backgroundColor: "grey.300", */
|
||||
borderRadius: radius,
|
||||
overflow: "hidden",
|
||||
"& > *": { width: "100%", height: "100%" },
|
||||
}}
|
||||
{...others}
|
||||
>
|
||||
{/* {showLoading && <Skeleton variant="rectangular" height="100%" />} */}
|
||||
{!loading && source && (
|
||||
<Img
|
||||
source={typeof source === "string" ? { uri: source } : source}
|
||||
accessibilityLabel={alt}
|
||||
onLoad={() => setLoading(false)}
|
||||
onError={() => {
|
||||
if (fallback) setSource(fallback);
|
||||
else setLoading(false);
|
||||
}}
|
||||
css={{ objectFit: "cover", display: showLoading ? "hidden" : undefined }}
|
||||
/>
|
||||
)}
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
export const Poster = (props: ImagePropsWithLoading & { width?: Width; height?: Height }) => (
|
||||
<Image aspectRatio="2 / 3" {...props} />
|
||||
);
|
||||
@ -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";
|
||||
|
||||
|
||||
74
front/packages/ui/src/navbar/icon.tsx
Normal file
74
front/packages/ui/src/navbar/icon.tsx
Normal file
@ -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 <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
import Svg, { SvgProps, Path } from "react-native-svg";
|
||||
|
||||
/* export const KyooLogo = (props: SvgProps) => ( */
|
||||
/* <Svg viewBox="0 0 128 128" {...props}> */
|
||||
/* <Path */
|
||||
/* d="M121.39 62.34 6.5 8.58v107.51z" */
|
||||
/* fill="#121327" */
|
||||
/* stroke="#010202" */
|
||||
/* strokeWidth={5} */
|
||||
/* strokeMiterlimit={10} */
|
||||
/* /> */
|
||||
/* <Path */
|
||||
/* d="M63.09 25.59c-4.59 8.24-9.01 17.92-13.23 29.04-3.65 9.52-6.53 18.78-8.64 27.78-1.42 6.05-2.06 9.83-1.91 11.32.22.58.33 1.11.33 1.59 0 .77-.31 1.15-.93 1.15-.77 0-2.01-.66-3.72-1.97-1.9-1.42-2.84-2.59-2.84-3.5 0-.58.16-1.44.49-2.57 2.99-10.54 6.71-21.69 11.16-33.47 2.92-7.29 6.09-15.24 9.52-23.84-10.43 2.55-17.88 5.61-22.37 9.19-1.64 1.28-2.46 2.5-2.46 3.66 0 .8.36 2.94 1.09 6.4.25 1.13-.15 1.7-1.2 1.7-.73 0-1.29-.35-1.7-1.04-1.24-1.97-2.52-4.83-3.83-8.59-.26-.84-.38-1.6-.38-2.3 0-2.73 2.11-4.96 6.34-6.67 1.49-.62 9.04-3.17 22.64-7.66 3.21-1.06 5.4-2.31 6.56-3.77.84-1.02 1.57-1.53 2.19-1.53.58 0 1.31.33 2.19.98 1.02.73 1.53 1.35 1.53 1.86-.01.48-.29 1.22-.83 2.24zm32.21-4.37c.73.73 1.09 1.33 1.09 1.8 0 .58-.77 1.82-2.3 3.72-4.01 4.96-9.92 11.28-17.72 18.98-7.47 7.36-12.54 11.94-15.2 13.73 3.32 4.7 6.63 9.42 9.95 14.16 5.07 7.15 9.44 11.94 13.13 14.38 1.6 1.09 3.04 1.64 4.32 1.64 1.28 0 2.77-.62 4.48-1.86.36-.25.71-.38 1.04-.38.77 0 1.15.38 1.15 1.15 0 .44-.16.89-.49 1.37-1.09 1.71-3.48 4.21-7.16 7.49-.84.77-1.66 1.15-2.46 1.15-.95 0-2.02-.49-3.23-1.48-4.48-3.57-9.52-9.28-15.09-17.12-5.83-8.2-9.88-13.29-12.14-15.26-1.17.47-2.1.71-2.79.71-1.28 0-1.99-.95-2.13-2.84-.04-.58-.05-1.08-.05-1.48 0-1.53.41-2.65 1.23-3.36s2.49-1.34 5-1.89c.91-.18 1.6.05 2.08.71 4.3-3.32 9.17-7.78 14.6-13.4 5.36-5.5 8.6-9.37 9.73-11.59-2.3-1.35-3.45-2.46-3.45-3.34 0-.69.66-1.18 1.97-1.48 1.82-1.28 3.99-3.34 6.51-6.18 1.06-1.2 2.19-1.8 3.39-1.8 1.38.01 2.9.83 4.54 2.47z" */
|
||||
/* fill="#e13e13" */
|
||||
/* /> */
|
||||
/* </Svg> */
|
||||
/* ); */
|
||||
|
||||
export const KyooLongLogo = (props: SvgProps) =>
|
||||
(
|
||||
<Svg viewBox="49.954 131.833 318.13 108.676" {...props}>
|
||||
<Path
|
||||
d="m164.844 186.759-114.89-53.76v107.51l114.89-53.75Z"
|
||||
fill="#121327"
|
||||
stroke="#010202"
|
||||
strokeWidth={5}
|
||||
strokeMiterlimit={10}
|
||||
/>
|
||||
<Path
|
||||
d="M106.544 150.009c-4.59 8.24-9.01 17.92-13.23 29.04-3.65 9.52-6.53 18.78-8.64 27.78-1.42 6.05-2.06 9.83-1.91 11.32.22.58.33 1.11.33 1.59 0 .77-.31 1.15-.93 1.15-.77 0-2.01-.66-3.72-1.97-1.9-1.42-2.84-2.59-2.84-3.5 0-.58.16-1.44.49-2.57 2.99-10.54 6.71-21.69 11.16-33.47 2.92-7.29 6.09-15.24 9.52-23.84-10.43 2.55-17.88 5.61-22.37 9.19-1.64 1.28-2.46 2.5-2.46 3.66 0 .8.36 2.94 1.09 6.4.25 1.13-.15 1.7-1.2 1.7-.73 0-1.29-.35-1.7-1.04-1.24-1.97-2.52-4.83-3.83-8.59-.26-.84-.38-1.6-.38-2.3 0-2.73 2.11-4.96 6.34-6.67 1.49-.62 9.04-3.17 22.64-7.66 3.21-1.06 5.4-2.31 6.56-3.77.84-1.02 1.57-1.53 2.19-1.53.58 0 1.31.33 2.19.98 1.02.73 1.53 1.35 1.53 1.86-.01.48-.29 1.22-.83 2.24Zm32.21-4.37c.73.73 1.09 1.33 1.09 1.8 0 .58-.77 1.82-2.3 3.72-4.01 4.96-9.92 11.28-17.72 18.98-7.47 7.36-12.54 11.94-15.2 13.73 3.32 4.7 6.63 9.42 9.95 14.16 5.07 7.15 9.44 11.94 13.13 14.38 1.6 1.09 3.04 1.64 4.32 1.64 1.28 0 2.77-.62 4.48-1.86.36-.25.71-.38 1.04-.38.77 0 1.15.38 1.15 1.15 0 .44-.16.89-.49 1.37-1.09 1.71-3.48 4.21-7.16 7.49-.84.77-1.66 1.15-2.46 1.15-.95 0-2.02-.49-3.23-1.48-4.48-3.57-9.52-9.28-15.09-17.12-5.83-8.2-9.88-13.29-12.14-15.26-1.17.47-2.1.71-2.79.71-1.28 0-1.99-.95-2.13-2.84-.04-.58-.05-1.08-.05-1.48 0-1.53.41-2.65 1.23-3.36.82-.71 2.49-1.34 5-1.89.91-.18 1.6.05 2.08.71 4.3-3.32 9.17-7.78 14.6-13.4 5.36-5.5 8.6-9.37 9.73-11.59-2.3-1.35-3.45-2.46-3.45-3.34 0-.69.66-1.18 1.97-1.48 1.82-1.28 3.99-3.34 6.51-6.18 1.06-1.2 2.19-1.8 3.39-1.8 1.38.01 2.9.83 4.54 2.47Z"
|
||||
fill="#e13e13"
|
||||
/>
|
||||
<Path
|
||||
d="m213.414 212.784-18.219-23.932v23.932h-13.202V158.59h13.202v23.777l18.064-23.777h15.518l-20.999 26.556 21.771 27.638Z"
|
||||
fill="#121327"
|
||||
strokeWidth={0}
|
||||
/>
|
||||
<Path
|
||||
d="m271.063 158.59-18.759 36.284v17.91h-13.202v-17.91l-18.759-36.284h14.977l10.499 22.696 10.422-22.696Z"
|
||||
fill="#121327"
|
||||
strokeWidth={0}
|
||||
/>
|
||||
<Path
|
||||
d="M290.814 213.324q-7.642 0-14.011-3.551-6.369-3.551-10.114-9.92-3.744-6.369-3.744-14.321 0-7.951 3.744-14.282 3.745-6.33 10.114-9.881 6.369-3.551 14.011-3.551 7.643 0 14.012 3.551 6.369 3.551 10.036 9.881 3.667 6.331 3.667 14.282 0 7.952-3.705 14.321-3.706 6.369-10.036 9.92-6.331 3.551-13.974 3.551Zm0-12.043q6.485 0 10.384-4.323 3.898-4.323 3.898-11.426 0-7.179-3.898-11.464-3.899-4.284-10.384-4.284-6.562 0-10.46 4.246-3.899 4.246-3.899 11.502 0 7.18 3.899 11.465 3.898 4.284 10.46 4.284Z"
|
||||
fill="#121327"
|
||||
strokeWidth={0}
|
||||
/>
|
||||
<Path
|
||||
d="M340.285 213.324q-7.643 0-14.012-3.551-6.369-3.551-10.113-9.92-3.744-6.369-3.744-14.321 0-7.951 3.744-14.282 3.744-6.33 10.113-9.881t14.012-3.551q7.643 0 14.012 3.551 6.369 3.551 10.036 9.881Q368 177.581 368 185.532q0 7.952-3.706 14.321-3.705 6.369-10.036 9.92-6.33 3.551-13.973 3.551Zm0-12.043q6.485 0 10.383-4.323 3.899-4.323 3.899-11.426 0-7.179-3.899-11.464-3.898-4.284-10.383-4.284-6.562 0-10.461 4.246-3.898 4.246-3.898 11.502 0 7.18 3.898 11.465 3.899 4.284 10.461 4.284Z"
|
||||
fill="#121327"
|
||||
strokeWidth={0}
|
||||
/>
|
||||
</Svg>
|
||||
);
|
||||
59
front/packages/ui/src/navbar/navbar.tsx
Normal file
59
front/packages/ui/src/navbar/navbar.tsx
Normal file
@ -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 <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
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 (
|
||||
<View css={(theme) => ({ backgroundColor: theme.appbar })}>
|
||||
<KyooLongLogo height="64px" width="auto" />
|
||||
<Paragraph>Toto</Paragraph>
|
||||
{/* <Box sx={{ flexGrow: 1, display: { xs: "none", sm: "flex" } }}> */}
|
||||
{/* {isSuccess */}
|
||||
{/* ? data.items.map((library) => ( */}
|
||||
{/* <ButtonLink */}
|
||||
{/* href={`/browse/${library.slug}`} */}
|
||||
{/* key={library.slug} */}
|
||||
{/* sx={{ color: "white" }} */}
|
||||
{/* > */}
|
||||
{/* {library.name} */}
|
||||
{/* </ButtonLink> */}
|
||||
{/* )) */}
|
||||
{/* : [...Array(4)].map((_, i) => ( */}
|
||||
{/* <Typography key={i} variant="button" px=".25rem"> */}
|
||||
{/* <Skeleton width="5rem" /> */}
|
||||
{/* </Typography> */}
|
||||
{/* ))} */}
|
||||
{/* </Box> */}
|
||||
<View>{/* <Avatar alt={t("navbar.login")} /> */}</View>
|
||||
{/* {isError && <ErrorSnackbar error={error} />} */}
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
/* Navbar.query = (): QueryIdentifier<Page<Library>> => ({ */
|
||||
/* parser: Paged(LibraryP), */
|
||||
/* path: ["libraries"], */
|
||||
/* }); */
|
||||
Loading…
x
Reference in New Issue
Block a user