u

src/components/article/ArticlePhoto.jsx

@@ -9,14 +9,17 @@ import {
 class ArticlePhoto extends Component {
   constructor(props) {
     super(props);
-    this.state = { thumbLoaded: false };
+    this.state = { thumbLoaded: false, smallThumbError: false };
     this.handleThumbLoad = this.handleThumbLoad.bind(this);
     this.handleThumbError = this.handleThumbError.bind(this);
   }
 
   componentDidUpdate(prevProps) {
-    if (prevProps.photo?.fullHash !== this.props.photo?.fullHash) {
-      this.setState({ thumbLoaded: false });
+    if (
+      prevProps.photo?.fullHash !== this.props.photo?.fullHash ||
+      prevProps.useSmallThumb !== this.props.useSmallThumb
+    ) {
+      this.setState({ thumbLoaded: false, smallThumbError: false });
     }
   }
 
@@ -25,7 +28,11 @@ class ArticlePhoto extends Component {
   }
 
   handleThumbError() {
-    this.setState({ thumbLoaded: false });
+    if (this.props.useSmallThumb && !this.state.smallThumbError) {
+      this.setState({ smallThumbError: true, thumbLoaded: false });
+    } else {
+      this.setState({ thumbLoaded: false });
+    }
   }
 
   render() {
@@ -34,9 +41,11 @@ class ArticlePhoto extends Component {
       size = 200,
       fill = false,
       objectFit = fill ? 'cover' : 'contain',
+      useSmallThumb = false,
       sx,
+      ...rest
     } = this.props;
-    const { thumbLoaded } = this.state;
+    const { thumbLoaded, smallThumbError } = this.state;
     const fullHash = photo?.fullHash;
     const hasPreview = photo?.thumbHash != null;
     const aspectRatio =
@@ -44,8 +53,15 @@ class ArticlePhoto extends Component {
         ? `${photo.thumbW} / ${photo.thumbH}`
         : '1 / 1';
 
+    const imgSrc = fullHash
+      ? useSmallThumb && !smallThumbError
+        ? thumb.smallUrl(fullHash)
+        : thumb.url(fullHash)
+      : null;
+
     return (
       <Box
+        {...rest}
         sx={{
           position: 'relative',
           ...(fill
@@ -78,10 +94,10 @@ class ArticlePhoto extends Component {
             <ThumbHashImage thumbHash={photo.thumbHash} />
           </Box>
         ) : null}
-        {fullHash ? (
+        {imgSrc ? (
           <Box
             component="img"
-            src={thumb.url(fullHash)}
+            src={imgSrc}
             alt=""
             onLoad={this.handleThumbLoad}
             onError={this.handleThumbError}