diff --git a/src/components/article/ThumbHashImage.jsx b/src/components/article/ThumbHashImage.jsx
index a7e8d69..2938a08 100644
--- a/src/components/article/ThumbHashImage.jsx
+++ b/src/components/article/ThumbHashImage.jsx
@@ -1,10 +1,11 @@
import { PureComponent } from 'react';
import Box from '@mui/material/Box';
-import { thumbHashToDataURL } from 'thumbhash';
+import { thumbHashToDataURL, thumbHashToRGBA } from 'thumbhash';
export default class ThumbHashImage extends PureComponent {
constructor(props) {
super(props);
+ //move this to where it'S loaded
const bytes = Uint8Array.from(atob(props.thumbHash), (c) => c.charCodeAt(0));
this.url = thumbHashToDataURL(bytes);
}
diff --git a/src/components/brand/BrandThumb.jsx b/src/components/brand/BrandThumb.jsx
index 1243dde..a8ce850 100644
--- a/src/components/brand/BrandThumb.jsx
+++ b/src/components/brand/BrandThumb.jsx
@@ -16,11 +16,11 @@ export default class BrandThumb extends PureComponent {
} = this.props;
const pic = brand?.pics?.[0];
- if (!pic?.thumbHash) {
+ if (!pic?.thumbHash && !pic?.fullHash) {
return fallback;
}
- const { thumbHash, thumbW, thumbH } = pic;
+ const { thumbHash, fullHash, thumbW, thumbH } = pic;
const ratio = thumbW && thumbH ? thumbW / thumbH : 1;
// Contain-fit inside a square `size x size` box, preserving aspect ratio.
let innerW = size;
@@ -58,6 +58,7 @@ export default class BrandThumb extends PureComponent {
component="span"
sx={{
display: 'block',
+ position: 'relative',
width: innerW,
height: innerH,
borderRadius: size >= 24 ? '4px' : '3px',
@@ -69,12 +70,29 @@ export default class BrandThumb extends PureComponent {
boxShadow: SHADOW_THUMB_RING,
}}
>
-
+ {thumbHash ? (
+
+ ) : null}
+ {fullHash ? (
+
+ ) : null}
);
diff --git a/src/routes/artikel/marken.jsx b/src/routes/artikel/marken.jsx
index 22995f0..14e08bb 100644
--- a/src/routes/artikel/marken.jsx
+++ b/src/routes/artikel/marken.jsx
@@ -79,10 +79,6 @@ class ArtikelMarkenPage extends PureComponent {
-
- {brands[0] ? : null}
-
-
);
}