u

src/components/tiles/ArticleTile.jsx

@@ -1,3 +1,4 @@
+import { PureComponent } from 'react';
 import Inventory2OutlinedIcon from '@mui/icons-material/Inventory2Outlined';
 import Box from '@mui/material/Box';
 import ButtonBase from '@mui/material/ButtonBase';
@@ -5,8 +6,205 @@ import Typography from '@mui/material/Typography';
 import { Tile, tileBaseSx } from 'dashgui/tiles';
 import { formatPrice } from '../../utils/price';
 import { articleSku } from '../article/articleRoute';
-import ArticlePhoto from '../article/ArticlePhoto';
+import { decodeThumbHash } from '../article/ThumbHashImage';
 import { BrandLabel } from '../brand';
+import { thumb } from '../../api';
+
+const MIN_EDGE_STRETCH = 10;
+
+function drawContainedWithStretchedEdges(
+  ctx,
+  source,
+  srcW,
+  srcH,
+  dstW,
+  dstH,
+  minStretch = MIN_EDGE_STRETCH,
+) {
+  ctx.clearRect(0, 0, dstW, dstH);
+  ctx.imageSmoothingEnabled = true;
+  ctx.imageSmoothingQuality = 'high';
+
+  const stretch = Math.min(minStretch, Math.max(0, Math.floor(Math.min(dstW, dstH) / 4)));
+  const innerW = dstW - stretch * 2;
+  const innerH = dstH - stretch * 2;
+  const scale = Math.min(innerW / srcW, innerH / srcH);
+  const fitW = srcW * scale;
+  const fitH = srcH * scale;
+  const offsetX = (dstW - fitW) / 2;
+  const offsetY = (dstH - fitH) / 2;
+
+  const leftW = Math.ceil(offsetX);
+  const rightX = Math.floor(offsetX + fitW);
+  const rightW = dstW - rightX;
+  const topH = Math.ceil(offsetY);
+  const botY = Math.floor(offsetY + fitH);
+  const botH = dstH - botY;
+
+  // Edge fill: a strongly blurred layer, crossfaded smoothly into a lightly
+  // blurred layer near the image (masked by a blurred rect, no visible seams).
+  // Rects overdraw past the canvas and under the center so blur never fades
+  // into transparency.
+  const maxBlur = Math.max(2, stretch * 0.6);
+  const drawEdges = (c, blur) => {
+    const pad = Math.ceil(blur * 3);
+    c.filter = `blur(${blur}px)`;
+
+    // 1. Four corners (1x1 source border pixels stretched)
+    c.drawImage(source, 0, 0, 1, 1, -pad, -pad, leftW + pad * 2, topH + pad * 2);
+    c.drawImage(source, srcW - 1, 0, 1, 1, rightX - pad, -pad, rightW + pad * 2, topH + pad * 2);
+    c.drawImage(source, 0, srcH - 1, 1, 1, -pad, botY - pad, leftW + pad * 2, botH + pad * 2);
+    c.drawImage(
+      source, srcW - 1, srcH - 1, 1, 1,
+      rightX - pad, botY - pad, rightW + pad * 2, botH + pad * 2,
+    );
+
+    // 2. Four edge bars (stretched 1px border rows/columns)
+    c.drawImage(source, 0, 0, srcW, 1, offsetX, -pad, fitW, topH + pad * 2);
+    c.drawImage(source, 0, srcH - 1, srcW, 1, offsetX, botY - pad, fitW, botH + pad * 2);
+    c.drawImage(source, 0, 0, 1, srcH, -pad, offsetY, leftW + pad * 2, fitH);
+    c.drawImage(source, srcW - 1, 0, 1, srcH, rightX - pad, offsetY, rightW + pad * 2, fitH);
+
+    c.filter = 'none';
+  };
+
+  drawEdges(ctx, maxBlur);
+
+  const light = document.createElement('canvas');
+  light.width = dstW;
+  light.height = dstH;
+  const lctx = light.getContext('2d');
+  if (lctx) {
+    drawEdges(lctx, Math.max(0.5, maxBlur * 0.15));
+    // Mask: blurred rect around the image -> opaque near it, fading outward.
+    const grow = maxBlur * 0.5;
+    lctx.globalCompositeOperation = 'destination-in';
+    lctx.filter = `blur(${maxBlur}px)`;
+    lctx.fillStyle = '#000';
+    lctx.fillRect(
+      offsetX - grow,
+      offsetY - grow,
+      fitW + grow * 2,
+      fitH + grow * 2,
+    );
+    lctx.filter = 'none';
+    ctx.drawImage(light, 0, 0);
+  }
+
+  // 3. Center image (aspect ratio preserved / contained)
+  ctx.drawImage(source, 0, 0, srcW, srcH, offsetX, offsetY, fitW, fitH);
+}
+
+class ArticleTileBackdrop extends PureComponent {
+  canvasRef = null;
+  img = null;
+  observer = null;
+
+  componentDidMount() {
+    this.loadImage();
+  }
+
+  componentDidUpdate(prevProps) {
+    if (prevProps.fullHash !== this.props.fullHash) {
+      this.loadImage();
+    }
+  }
+
+  componentWillUnmount() {
+    this.observer?.disconnect();
+    this.img = null;
+  }
+
+  loadImage() {
+    const { fullHash } = this.props;
+    if (fullHash) {
+      const img = new Image();
+      img.onload = () => {
+        if (this.img === img) {
+          this.paint();
+        }
+      };
+      img.src = thumb.url(fullHash);
+      this.img = img;
+      if (img.complete && img.naturalWidth) {
+        this.paint();
+        return;
+      }
+    }
+    this.paint();
+  }
+
+  setCanvas = (canvas) => {
+    this.canvasRef = canvas;
+    if (canvas && typeof ResizeObserver !== 'undefined') {
+      this.observer?.disconnect();
+      this.observer = new ResizeObserver(() => this.paint());
+      this.observer.observe(canvas);
+    }
+    this.paint();
+  };
+
+  paint = () => {
+    const canvas = this.canvasRef;
+    if (!canvas) return;
+    const rect = canvas.getBoundingClientRect();
+    const dstW = Math.round(rect.width);
+    const dstH = Math.round(rect.height);
+    if (!dstW || !dstH) return;
+
+    canvas.width = dstW;
+    canvas.height = dstH;
+    const ctx = canvas.getContext('2d');
+    if (!ctx) return;
+
+    const img = this.img;
+    if (img && img.complete && img.naturalWidth && img.naturalHeight) {
+      drawContainedWithStretchedEdges(
+        ctx,
+        img,
+        img.naturalWidth,
+        img.naturalHeight,
+        dstW,
+        dstH,
+      );
+      return;
+    }
+
+    const { thumbHash } = this.props;
+    if (thumbHash) {
+      const decoded = decodeThumbHash(thumbHash);
+      if (decoded) {
+        const { w, h, rgba } = decoded;
+        const temp = document.createElement('canvas');
+        temp.width = w;
+        temp.height = h;
+        temp.getContext('2d').putImageData(
+          new ImageData(new Uint8ClampedArray(rgba), w, h),
+          0,
+          0,
+        );
+        drawContainedWithStretchedEdges(ctx, temp, w, h, dstW, dstH);
+      }
+    }
+  };
+
+  render() {
+    return (
+      <Box
+        component="canvas"
+        ref={this.setCanvas}
+        aria-hidden
+        sx={{
+          position: 'absolute',
+          inset: 0,
+          width: '100%',
+          height: '100%',
+          display: 'block',
+        }}
+      />
+    );
+  }
+}
 
 export class ArticleTile extends Tile {
   hasPhoto() {
@@ -81,10 +279,7 @@ export class ArticleTile extends Tile {
   }
 
   render() {
-    if (!this.hasPhoto()) {
-      return super.render();
-    }
-
+    const hasPhoto = this.hasPhoto();
     const { article, label, sx, disabled } = this.props;
     const sku = articleSku(article);
 
@@ -104,15 +299,25 @@ export class ArticleTile extends Tile {
         }}
       >
         <Box sx={{ position: 'absolute', inset: 0 }}>
-          <ArticlePhoto
-            fill
-            photo={{
-              fullHash: article.fullHash,
-              thumbW: article.thumbW,
-              thumbH: article.thumbH,
-              thumbHash: article.thumbHash,
-            }}
-          />
+          {hasPhoto ? (
+            <ArticleTileBackdrop
+              fullHash={article.fullHash}
+              thumbHash={article.thumbHash}
+            />
+          ) : (
+            <Box
+              sx={{
+                position: 'absolute',
+                inset: 0,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                pb: 4,
+              }}
+            >
+              {this.renderIcon()}
+            </Box>
+          )}
         </Box>
         {this.renderExtra()}
         <Box
@@ -125,6 +330,8 @@ export class ArticleTile extends Tile {
             py: 0.75,
             background: 'linear-gradient(transparent, rgba(0,0,0,0.65))',
             textAlign: 'left',
+            color: '#fff',
+            textShadow: '0 1px 3px rgba(0, 0, 0, 0.95), 0 0 2px rgba(0, 0, 0, 0.85)',
           }}
         >
           {article?.brand?.name ? (
@@ -136,7 +343,13 @@ export class ArticleTile extends Tile {
               typographyProps={{
                 variant: 'caption',
                 noWrap: true,
-                sx: { color: 'rgba(255,255,255,0.9)', fontWeight: 500, lineHeight: 1.1 },
+                sx: {
+                  color: '#b3e5fc',
+                  opacity: 1,
+                  fontWeight: 500,
+                  lineHeight: 1.1,
+                  textShadow: '0 1px 3px rgba(0, 0, 0, 0.95), 0 0 2px rgba(0, 0, 0, 0.85)',
+                },
               }}
               sx={{ mb: 0.25 }}
             />
@@ -146,16 +359,40 @@ export class ArticleTile extends Tile {
               variant="body2"
               fontWeight={600}
               noWrap
-              sx={{ color: '#fff', lineHeight: 1.2 }}
+              sx={{
+                color: '#111',
+                lineHeight: 1.2,
+                textShadow: '0 0 3px rgba(255, 255, 255, 1), 0 0 6px rgba(255, 255, 255, 0.9), 0 1px 2px rgba(255, 255, 255, 0.9)',
+              }}
             >
               {label}
             </Typography>
           ) : null}
           {sku ? (
-            <Typography variant="caption" noWrap sx={{ color: 'rgba(255,255,255,0.85)' }}>
+            <Typography
+              variant="caption"
+              noWrap
+              sx={{
+                color: '#ffffff',
+                textShadow: '0 1px 3px rgba(0, 0, 0, 0.95), 0 0 2px rgba(0, 0, 0, 0.85)',
+              }}
+            >
               {sku}
             </Typography>
           ) : null}
+          {article.net != null && (
+            <Typography
+              variant="caption"
+              fontWeight={600}
+              component="div"
+              sx={{
+                color: '#b9f6ca',
+                textShadow: '0 1px 3px rgba(0, 0, 0, 0.95), 0 0 2px rgba(0, 0, 0, 0.85)',
+              }}
+            >
+              {formatPrice(article.net)}
+            </Typography>
+          )}
         </Box>
       </ButtonBase>
     );