From ce4663d512624c7e21c35c7d91c16f1f23ad8dd6 Mon Sep 17 00:00:00 2001 From: Zoe Roux Date: Fri, 27 Oct 2023 00:03:54 +0200 Subject: [PATCH] Fix some aria items --- front/apps/web/src/pages/_app.tsx | 1 + front/packages/primitives/src/image/blurhash.web.tsx | 6 ++++-- front/packages/primitives/src/image/image.web.tsx | 5 +++-- front/packages/ui/src/home/header.tsx | 2 ++ front/packages/ui/src/navbar/index.tsx | 2 +- 5 files changed, 11 insertions(+), 5 deletions(-) diff --git a/front/apps/web/src/pages/_app.tsx b/front/apps/web/src/pages/_app.tsx index b1014677..96c65ed0 100755 --- a/front/apps/web/src/pages/_app.tsx +++ b/front/apps/web/src/pages/_app.tsx @@ -120,6 +120,7 @@ const App = ({ Component, pageProps }: AppProps) => { <> Kyoo + diff --git a/front/packages/primitives/src/image/blurhash.web.tsx b/front/packages/primitives/src/image/blurhash.web.tsx index ce54e181..41fed85a 100644 --- a/front/packages/primitives/src/image/blurhash.web.tsx +++ b/front/packages/primitives/src/image/blurhash.web.tsx @@ -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%", diff --git a/front/packages/primitives/src/image/image.web.tsx b/front/packages/primitives/src/image/image.web.tsx index fbfdc285..d10a42d1 100644 --- a/front/packages/primitives/src/image/image.web.tsx +++ b/front/packages/primitives/src/image/image.web.tsx @@ -55,8 +55,9 @@ export const Image = ({ ); } + const blurhashUrl = blurHashToDataURL(src.blurhash); return ( - + + );