Cutlery/Kyoo
1
0
Fork 0
mirror of https://github.com/zoriya/Kyoo.git synced 2025-05-24 02:02:36 -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>
<title>Kyoo</title>
<meta name="description" content="A portable and vast media library solution." />
</Head>
<QueryClientProvider client={queryClient}>
<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 = ({
blurhash,
blurhashUrl,
children,
...props
}: {
blurhash: string;
blurhash?: string;
blurhashUrl?: string;
children?: ReactElement | ReactElement[];
}) => {
const { css } = useYoshiki();
@ -206,7 +208,7 @@ export const BlurhashContainer = ({
style={{
// 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)
backgroundImage: `url(${blurHashToDataURL(blurhash)})`,
backgroundImage: `url(${blurhashUrl ?? blurHashToDataURL(blurhash)})`,
backgroundSize: "cover",
backgroundRepeat: "no-repeat",
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 (
<BlurhashContainer blurhash={src.blurhash} {...css([layout, border], props)}>
<BlurhashContainer blurhashUrl={blurhashUrl} {...css([layout, border], props)}>
<NextImage
src={src[quality ?? "high"]}
priority={quality === "high"}
@ -67,7 +68,7 @@ export const Image = ({
opacity: state === "loading" ? 0 : 1,
transition: "opacity .2s ease-out",
}}
blurDataURL={blurHashToDataURL(src.blurhash)}
blurDataURL={blurhashUrl}
placeholder="blur"
// Don't use next's server to reprocess images, they are already optimized by kyoo.
unoptimized={true}

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

@ -72,6 +72,7 @@ export const Header = ({
<View {...css({ flexDirection: "row" })}>
<IconFab
icon={PlayArrow}
aria-label={t("show.play")}
as={Link}
href={link ?? "#"}
{...tooltip(t("show.play"))}
@ -79,6 +80,7 @@ export const Header = ({
/>
<IconButton
icon={Info}
aria-label={t("home.info")}
href={infoLink ?? "#"}
{...tooltip(t("home.info"))}
{...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();
return (
<A href="/" {...tooltip(t("navbar.home"))} {...props}>
<A href="/" aria-label={t("navbar.home")} {...tooltip(t("navbar.home"))} {...props}>
<KyooLongLogo />
</A>
);