u

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);
   }

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,
           }}
         >
-          <ThumbHashImage
+          {thumbHash ? (
-            thumbHash={thumbHash}
+            <ThumbHashImage
-            width={innerW}
+              thumbHash={thumbHash}
-            height={innerH}
+              width={innerW}
-            sx={{ width: innerW, height: innerH, flexShrink: 0 }}
+              height={innerH}
-          />
+              sx={{ width: innerW, height: innerH, flexShrink: 0 }}
+            />
+          ) : null}
+          {fullHash ? (
+            <Box
+              component="img"
+              src={`/api/smallthumb/${encodeURIComponent(fullHash)}`}
+              alt=""
+              draggable={false}
+              sx={{
+                position: 'absolute',
+                inset: 0,
+                width: '100%',
+                height: '100%',
+                display: 'block',
+              }}
+            />
+          ) : null}
         </Box>
       </Box>
     );

src/routes/artikel/marken.jsx

@@ -79,10 +79,6 @@ class ArtikelMarkenPage extends PureComponent {
 
           <ArtikelMarkeNew rowRef={this.createRowRef} />
         </PanelTile>
-        <PanelTile wide={2} minHeight={0} title="Test">
-          {brands[0] ? <ArtikelMarke brand={brands[0]}/> : null}
-          <ArtikelMarke disabled />
-        </PanelTile>
       </PanelTileGrid>
     );
   }