diff --git a/app/javascript/flavours/glitch/components/media_gallery.jsx b/app/javascript/flavours/glitch/components/media_gallery.jsx index e31d4c34b9..43281718e2 100644 --- a/app/javascript/flavours/glitch/components/media_gallery.jsx +++ b/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} /> ); @@ -185,7 +191,7 @@ class Item extends PureComponent { } return ( -
+
{ setLoaded(true); }, [setLoaded]); + const handleImageError = useCallback(() => { + setError(true); + }, [setError]); + const handleMouseEnter = useCallback( (e: React.MouseEvent) => { if (e.target instanceof HTMLVideoElement) { @@ -102,6 +107,7 @@ export const MediaItem: React.FC<{ alt={description} lang={lang} onLoad={handleImageLoad} + onError={handleImageError} />
@@ -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 ( -
+