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 (
-
+
+
);