Fix display of failed-to-load image attachments in web UI (#34217)
This commit is contained in:
parent
a2981a0997
commit
1960aac90b
3 changed files with 23 additions and 2 deletions
|
@ -26,11 +26,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) {
|
||||
|
@ -98,6 +103,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'>
|
||||
|
@ -118,6 +124,7 @@ export const MediaItem: React.FC<{
|
|||
lang={lang}
|
||||
style={{ objectPosition: `${x}% ${y}%` }}
|
||||
onLoad={handleImageLoad}
|
||||
onError={handleImageError}
|
||||
/>
|
||||
);
|
||||
} else if (['video', 'gifv'].includes(type)) {
|
||||
|
@ -173,7 +180,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', {
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue