mirador/src/components/ImageFailureMessage.jsx

An open-source, web-based 'multi-up' viewer that supports zoom-pan-rotate functionality, ability to display/compare simple images, and images with annotations.

import { useContext } from 'react';
import { useTranslation } from 'react-i18next';
import { styled } from '@mui/material/styles';
import Typography from '@mui/material/Typography';
import Box from '@mui/material/Box';
import PropTypes from 'prop-types';
import FailedImageContext from '../contexts/FailedImageContext';

const MessageContainer = styled(Box)(({ theme }) => ({
  position: 'absolute',
  top: theme.spacing(2),
  left: '50%',
  transform: 'translateX(-50%)',
  backgroundColor: theme.palette.primary.main,
  color: theme.palette.common.white,
  padding: theme.spacing(1, 2),
  borderRadius: theme.shape.borderRadius,
  zIndex: 1000,
  pointerEvents: 'none',
}));

/**
 * Displays an accessible message when images fail to load in the OSD viewer
 */
export function ImageFailureMessage({ imageUrls = [] }) {
  const { failedImages } = useContext(FailedImageContext);
  const { t } = useTranslation();

  const hasFailedImage = imageUrls.some((url) => failedImages.has(url));

  if (!hasFailedImage) return null;

  return (
    <MessageContainer role="status" aria-live="polite">
      <Typography variant="body2">{t('imageFailedToLoad')}</Typography>
    </MessageContainer>
  );
}

ImageFailureMessage.propTypes = {
  imageUrls: PropTypes.arrayOf(PropTypes.string),
};