[Glitch] Fix display of failed-to-load image attachments in web UI

Port changes from 1960aac90b16fce1ec620ac990aa931efcf04700 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>

app/javascript/flavours/glitch/components/media_gallery.jsx

@@ -39,6 +39,7 @@ class Item extends PureComponent {
 
   state = {
     loaded: false,
+    error: false,
   };
 
   handleMouseEnter = (e) => {
@@ -82,6 +83,10 @@ class Item extends PureComponent {
     this.setState({ loaded: true });
   };
 
+  handleImageError = () => {
+    this.setState({ error: true });
+  };
+
   render () {
     const { attachment, lang, index, size, standalone, letterbox, displayWidth, visible } = this.props;
 
@@ -150,6 +155,7 @@ class Item extends PureComponent {
             lang={lang}
             style={{ objectPosition: letterbox ? null : `${x}% ${y}%` }}
             onLoad={this.handleImageLoad}
+            onError={this.handleImageError}
           />
         </a>
       );
@@ -185,7 +191,7 @@ class Item extends PureComponent {
     }
 
     return (
-      <div className={classNames('media-gallery__item', { standalone, letterbox, 'media-gallery__item--tall': height === 100, 'media-gallery__item--wide': width === 100 })} key={attachment.get('id')}>
+      <div className={classNames('media-gallery__item', { standalone, letterbox, 'media-gallery__item--error': this.state.error, 'media-gallery__item--tall': height === 100, 'media-gallery__item--wide': width === 100 })} key={attachment.get('id')}>
         <Blurhash
           hash={attachment.get('blurhash')}
           dummy={!useBlurhash}

app/javascript/flavours/glitch/features/account_gallery/components/media_item.tsx

@@ -30,11 +30,16 @@ export const MediaItem: React.FC<{
       displayMedia === 'show_all',
   );
   const [loaded, setLoaded] = useState(false);
+  const [error, setError] = useState(false);
 
   const handleImageLoad = useCallback(() => {
     setLoaded(true);
   }, [setLoaded]);
 
+  const handleImageError = useCallback(() => {
+    setError(true);
+  }, [setError]);
+
   const handleMouseEnter = useCallback(
     (e: React.MouseEvent<HTMLVideoElement>) => {
       if (e.target instanceof HTMLVideoElement) {
@@ -102,6 +107,7 @@ export const MediaItem: React.FC<{
           alt={description}
           lang={lang}
           onLoad={handleImageLoad}
+          onError={handleImageError}
         />
 
         <div className='media-gallery__item__overlay media-gallery__item__overlay--corner'>
@@ -122,6 +128,7 @@ export const MediaItem: React.FC<{
         lang={lang}
         style={{ objectPosition: `${x}% ${y}%` }}
         onLoad={handleImageLoad}
+        onError={handleImageError}
       />
     );
   } else if (['video', 'gifv'].includes(type)) {
@@ -177,7 +184,11 @@ export const MediaItem: React.FC<{
   }
 
   return (
-    <div className='media-gallery__item media-gallery__item--square'>
+    <div
+      className={classNames('media-gallery__item media-gallery__item--square', {
+        'media-gallery__item--error': error,
+      })}
+    >
       <Blurhash
         hash={blurhash}
         className={classNames('media-gallery__preview', {

app/javascript/flavours/glitch/styles/components.scss

@@ -7288,6 +7288,10 @@ img.modal-warning {
       filter: var(--overlay-icon-shadow);
     }
   }
+
+  &--error img {
+    visibility: hidden;
+  }
 }
 
 .media-gallery__item-thumbnail {