Cutlery/Kyoo
1
0
Fork 0
mirror of https://github.com/zoriya/Kyoo.git synced 2025-06-02 13:14:29 -04:00
Code Issues Packages Projects Releases Wiki Activity

Fix some aria items

Browse Source
This commit is contained in:
Zoe Roux 2023-10-27 00:03:54 +02:00
parent 97de98b89a
commit ce4663d512
5 changed files with 11 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
front/apps/web/src/pages/_app.tsx
View File

@ -120,6 +120,7 @@ const App = ({ Component, pageProps }: AppProps) => {
<> <>
<Head> <Head>
<title>Kyoo</title> <title>Kyoo</title>
<meta name="description" content="A portable and vast media library solution." />
</Head> </Head>
<QueryClientProvider client={queryClient}> <QueryClientProvider client={queryClient}>
<Hydrate state={queryState}> <Hydrate state={queryState}>

6
front/packages/primitives/src/image/blurhash.web.tsx
View File

@ -193,10 +193,12 @@ function generatePng(width: number, height: number, rgbaString: string) {
export const BlurhashContainer = ({ export const BlurhashContainer = ({
blurhash, blurhash,
blurhashUrl,
children, children,
...props ...props
}: { }: {
blurhash: string; blurhash?: string;
blurhashUrl?: string;
children?: ReactElement | ReactElement[]; children?: ReactElement | ReactElement[];
}) => { }) => {
const { css } = useYoshiki(); const { css } = useYoshiki();
@ -206,7 +208,7 @@ export const BlurhashContainer = ({
style={{ style={{
// Use a blurhash here to nicely fade the NextImage when it is loaded completly // Use a blurhash here to nicely fade the NextImage when it is loaded completly
// (this prevents loading the image line by line which is ugly and buggy on firefox) // (this prevents loading the image line by line which is ugly and buggy on firefox)
backgroundImage: `url(${blurHashToDataURL(blurhash)})`, backgroundImage: `url(${blurhashUrl ?? blurHashToDataURL(blurhash)})`,
backgroundSize: "cover", backgroundSize: "cover",
backgroundRepeat: "no-repeat", backgroundRepeat: "no-repeat",
backgroundPosition: "50% 50%", backgroundPosition: "50% 50%",

5
front/packages/primitives/src/image/image.web.tsx
View File

@ -55,8 +55,9 @@ export const Image = ({
); );
} }
const blurhashUrl = blurHashToDataURL(src.blurhash);
return ( return (
<BlurhashContainer blurhash={src.blurhash} {...css([layout, border], props)}> <BlurhashContainer blurhashUrl={blurhashUrl} {...css([layout, border], props)}>
<NextImage <NextImage
src={src[quality ?? "high"]} src={src[quality ?? "high"]}
priority={quality === "high"} priority={quality === "high"}
@ -67,7 +68,7 @@ export const Image = ({
opacity: state === "loading" ? 0 : 1, opacity: state === "loading" ? 0 : 1,
transition: "opacity .2s ease-out", transition: "opacity .2s ease-out",
}} }}
blurDataURL={blurHashToDataURL(src.blurhash)} blurDataURL={blurhashUrl}
placeholder="blur" placeholder="blur"
// Don't use next's server to reprocess images, they are already optimized by kyoo. // Don't use next's server to reprocess images, they are already optimized by kyoo.
unoptimized={true} unoptimized={true}

2
front/packages/ui/src/home/header.tsx
View File

@ -72,6 +72,7 @@ export const Header = ({
<View {...css({ flexDirection: "row" })}> <View {...css({ flexDirection: "row" })}>
<IconFab <IconFab
icon={PlayArrow} icon={PlayArrow}
aria-label={t("show.play")}
as={Link} as={Link}
href={link ?? "#"} href={link ?? "#"}
{...tooltip(t("show.play"))} {...tooltip(t("show.play"))}
@ -79,6 +80,7 @@ export const Header = ({
/> />
<IconButton <IconButton
icon={Info} icon={Info}
aria-label={t("home.info")}
href={infoLink ?? "#"} href={infoLink ?? "#"}
{...tooltip(t("home.info"))} {...tooltip(t("home.info"))}
{...css({ marginRight: ts(2) })} {...css({ marginRight: ts(2) })}

2
front/packages/ui/src/navbar/index.tsx
View File

@ -50,7 +50,7 @@ export const NavbarTitle = (props: Stylable & { onLayout?: ViewProps["onLayout"]
const { t } = useTranslation(); const { t } = useTranslation();
return ( return (
<A href="/" {...tooltip(t("navbar.home"))} {...props}> <A href="/" aria-label={t("navbar.home")} {...tooltip(t("navbar.home"))} {...props}>
<KyooLongLogo /> <KyooLongLogo />
</A> </A>
); );