dbf-mirador 4.2.3

package/src/components/IIIFDropTarget.jsx

@@ -0,0 +1,168 @@
+import PropTypes from 'prop-types';
+import Backdrop from '@mui/material/Backdrop';
+import InsertDriveFileSharpIcon from '@mui/icons-material/InsertDriveFileSharp';
+import { grey } from '@mui/material/colors';
+import { v4 as uuid } from 'uuid';
+import { NativeTypes } from 'react-dnd-html5-backend';
+import { useDrop } from 'react-dnd';
+import { readImageMetadata } from '../lib/readImageMetadata';
+
+/** */
+const safeParseURL = (str) => {
+  try {
+    return new URL(str);
+  } catch (e) {
+    console.warn('Invalid URL:', str);
+    return null;
+  }
+};
+
+/** */
+export const handleDrop = (item, monitor, props) => {
+  const { onDrop } = props;
+
+  if (item.html) {
+    const doc = new DOMParser().parseFromString(item.html, 'text/html');
+
+    // Try to find a link tag
+    const link = doc.querySelector('a[href]');
+    if (link) {
+      const url = safeParseURL(link.href);
+      if (url) {
+        // Recursively call the method again with the extracted URL
+        return handleDrop({ urls: [url.toString()] }, monitor, props);
+      }
+    }
+  }
+
+  if (item.urls) {
+    item.urls.forEach((str) => {
+      const url = safeParseURL(str);
+      if (!url) return;
+
+      const manifestId = url.searchParams.get('manifest');
+      const canvasId = url.searchParams.get('canvas');
+
+      if (manifestId) onDrop({ canvasId, manifestId }, props, monitor);
+    });
+  }
+
+  if (item.files) {
+    const manifestFiles = item.files.filter((f) => f.type === 'application/json');
+    const manifestPromises = manifestFiles.map(
+      (file) =>
+        new Promise((resolve, reject) => {
+          const reader = new FileReader();
+          reader.addEventListener('load', () => {
+            const manifestJson = reader.result;
+            const manifestId = uuid();
+
+            if (manifestJson) onDrop({ manifestId, manifestJson }, props, monitor);
+            resolve();
+          });
+          reader.readAsText(file);
+        }),
+    );
+
+    const imageFiles = item.files.filter(({ type }) => type.startsWith('image/'));
+
+    let imagePromise;
+
+    if (imageFiles.length > 0) {
+      const id = uuid();
+      const imageData = imageFiles.map((file) => readImageMetadata(file));
+
+      imagePromise = Promise.all(imageData).then((images) => {
+        const manifestJson = {
+          '@context': 'http://iiif.io/api/presentation/3/context.json',
+          id,
+          items: images.map(({ name, type, width, height, url }, index) => ({
+            height,
+            id: `${id}/canvas/${index}`,
+            items: [
+              {
+                id: `${id}/canvas/${index}/1`,
+                items: [
+                  {
+                    body: {
+                      format: type,
+                      id: url,
+                      type: 'Image',
+                    },
+                    height,
+                    id: `${id}/canvas/${index}/1/image`,
+                    motivation: 'painting',
+                    target: `${id}/canvas/${index}/1`,
+                    type: 'Annotation',
+                    width,
+                  },
+                ],
+                type: 'AnnotationPage',
+              },
+            ],
+            label: name,
+            type: 'Canvas',
+            width,
+          })),
+          label: images[0].name,
+          type: 'Manifest',
+        };
+
+        const manifestId = uuid();
+        if (manifestJson) onDrop({ manifestId, manifestJson }, props, monitor);
+      });
+    }
+
+    return Promise.all([...manifestPromises, imagePromise]);
+  }
+
+  return undefined;
+};
+
+/** */
+export const IIIFDropTarget = (props) => {
+  const { children, onDrop } = props;
+  const [{ canDrop, isOver }, drop] = useDrop({
+    accept: [NativeTypes.URL, NativeTypes.FILE, NativeTypes.HTML],
+    collect: (monitor) => ({
+      canDrop: monitor.canDrop(),
+      isOver: monitor.isOver(),
+    }),
+    /** */
+    drop(item, monitor) {
+      if (!onDrop) return;
+      handleDrop(item, monitor, props);
+    },
+  });
+
+  /**
+   * Safari reports drag+drop'ed urls as both a file and uri-list
+   * which gets mis-classified by react-dnd.
+   */
+  const hackForSafari = (e) => {
+    if (!window.safari || !onDrop || !e.dataTransfer) return;
+
+    if (e.dataTransfer.types.includes('Files') && e.dataTransfer.types.includes('text/uri-list')) {
+      const url = e.dataTransfer.getData('text/uri-list');
+
+      if (!url) return;
+      handleDrop({ urls: [url] }, null, props);
+    }
+  };
+
+  const isActive = canDrop && isOver;
+
+  return (
+    <div ref={drop} onDrop={hackForSafari} style={{ height: '100%', width: '100%' }}>
+      {children}
+      <Backdrop open={isActive} style={{ zIndex: 9999 }}>
+        <InsertDriveFileSharpIcon style={{ color: grey[400], fontSize: 256 }} />
+      </Backdrop>
+    </div>
+  );
+};
+
+IIIFDropTarget.propTypes = {
+  children: PropTypes.node.isRequired,
+  onDrop: PropTypes.func.isRequired,
+};

package/src/components/IIIFIFrameCommunication.jsx

@@ -0,0 +1,45 @@
+import { useEffect } from 'react';
+import PropTypes from 'prop-types';
+
+const IIIFIFrameCommunicationDefaultProps = {
+  'aria-hidden': true,
+  frameBorder: 0,
+  height: 1,
+  name: undefined,
+  scrolling: undefined,
+  style: { visibility: 'hidden' },
+  width: 1,
+};
+
+/**
+ *  Handle IIIF Auth token validation using iframe message events
+ */
+export function IIIFIFrameCommunication({ handleReceiveMessage = undefined, ...props }) {
+  // Attaches the 'message' event listener to the window.
+  useEffect(() => {
+    if (!handleReceiveMessage) return undefined;
+
+    window.addEventListener('message', handleReceiveMessage);
+
+    // cleanup function
+    return () => window.removeEventListener('message', handleReceiveMessage, false);
+  }, [handleReceiveMessage]);
+
+  return (
+    // iframe "title" attribute is passed in via props for accessibility
+    /* eslint-disable jsx-a11y/iframe-has-title */
+    <iframe {...IIIFIFrameCommunicationDefaultProps} {...props} />
+  );
+}
+
+IIIFIFrameCommunication.propTypes = {
+  'aria-hidden': PropTypes.bool,
+  frameBorder: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  handleReceiveMessage: PropTypes.func,
+  height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  name: PropTypes.string,
+  scrolling: PropTypes.string,
+  src: PropTypes.string.isRequired,
+  style: PropTypes.shape({}),
+  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+};

package/src/components/IIIFResourceLabel.jsx

@@ -0,0 +1,26 @@
+import { useContext } from 'react';
+import { useSelector } from 'react-redux';
+import PropTypes from 'prop-types';
+import { getLocale } from '../state/selectors';
+import LocaleContext from '../contexts/LocaleContext';
+
+/**
+ * Render the contextually appropriate label for the resource
+ */
+export function IIIFResourceLabel({ fallback, resource }) {
+  const contextLocale = useContext(LocaleContext);
+  const fallbackLocale = useSelector((state) => getLocale(state, {}));
+
+  if (!resource) return fallback;
+
+  const label = resource.getLabel();
+
+  if (!label) return fallback;
+
+  return label.getValue(contextLocale || fallbackLocale || '') ?? (fallback || resource.id);
+}
+
+IIIFResourceLabel.propTypes = {
+  fallback: PropTypes.string,
+  resource: PropTypes.object.isRequired,
+};

package/src/components/IIIFThumbnail.jsx

@@ -0,0 +1,214 @@
+import { useMemo, useEffect, useState, useContext } from 'react';
+import PropTypes from 'prop-types';
+import { styled } from '@mui/material/styles';
+import { useInView } from 'react-intersection-observer';
+import { IIIFResourceLabel } from './IIIFResourceLabel';
+import { useThumbnailService } from '../hooks';
+import FailedImageContext from '../contexts/FailedImageContext';
+
+const Root = styled('div', { name: 'IIIFThumbnail', slot: 'root' })({});
+
+const Label = styled('span', { name: 'IIIFThumbnail', slot: 'label' })(({ theme }) => ({
+  ...theme.typography.caption,
+}));
+
+const Image = styled('img', { name: 'IIIFThumbnail', slot: 'image' })(() => ({
+  height: 'auto',
+  width: 'auto',
+}));
+
+/**
+ * A lazy-loaded image that uses IntersectionObserver to determine when to
+ * try to load the image (or even calculate that the image url/height/width are)
+ */
+const LazyLoadedImage = ({
+  border = false,
+  placeholder,
+  style = {},
+  thumbnail = null,
+  resource,
+  maxHeight = null,
+  maxWidth = null,
+  ...props
+}) => {
+  const { ref, inView } = useInView();
+  const [loaded, setLoaded] = useState(false);
+  const [failed, setFailed] = useState(false);
+  const thumbnailService = useThumbnailService(maxHeight, maxWidth);
+  const { notifyFailure, fallbackImage } = useContext(FailedImageContext);
+
+  /**
+   * Handles the intersection (visibility) of a given thumbnail, by requesting
+   * the image and then updating the state.
+   */
+  useEffect(() => {
+    if (loaded || !inView) return;
+
+    setLoaded(true);
+  }, [inView, loaded]);
+
+  const image = useMemo(() => {
+    if (thumbnail) return thumbnail;
+
+    const i = thumbnailService.get(resource);
+
+    if (i && i.url) return i;
+
+    return undefined;
+  }, [resource, thumbnail, thumbnailService]);
+
+  const imageStyles = useMemo(() => {
+    const styleProps = {
+      height: undefined,
+      maxHeight: undefined,
+      maxWidth: undefined,
+      width: undefined,
+    };
+
+    // If we're using a fallback image due to failure, use object-fit to preserve aspect ratio
+    if (failed && fallbackImage) {
+      return {
+        ...styleProps,
+        ...style,
+        maxWidth,
+        maxHeight,
+        objectFit: 'contain',
+      };
+    }
+
+    if (!image) return { ...style, height: maxHeight, width: maxWidth };
+
+    const { height: thumbHeight, width: thumbWidth } = image;
+    if (thumbHeight && thumbWidth) {
+      if ((maxHeight && thumbHeight > maxHeight) || (maxWidth && thumbWidth > maxWidth)) {
+        const aspectRatio = thumbWidth / thumbHeight;
+
+        if (maxHeight && maxWidth) {
+          if (maxWidth / maxHeight < aspectRatio) {
+            styleProps.height = Math.round(maxWidth / aspectRatio);
+            styleProps.width = maxWidth;
+          } else {
+            styleProps.height = maxHeight;
+            styleProps.width = Math.round(maxHeight * aspectRatio);
+          }
+        } else if (maxHeight) {
+          styleProps.height = maxHeight;
+          styleProps.maxWidth = Math.round(maxHeight * aspectRatio);
+        } else if (maxWidth) {
+          styleProps.width = maxWidth;
+          styleProps.maxHeight = Math.round(maxWidth / aspectRatio);
+        }
+      } else {
+        styleProps.width = thumbWidth;
+        styleProps.height = thumbHeight;
+      }
+    } else if (thumbHeight && !thumbWidth) {
+      styleProps.height = maxHeight;
+    } else if (!thumbHeight && thumbWidth) {
+      styleProps.width = maxWidth;
+    } else {
+      // The thumbnail wasn't retrieved via an Image API service,
+      // and its dimensions are not specified in the JSON-LD
+      // (note that this may result in a blurry image)
+      styleProps.width = maxWidth;
+      styleProps.height = maxHeight;
+    }
+
+    return {
+      ...styleProps,
+      ...style,
+    };
+  }, [image, maxWidth, maxHeight, style, failed, fallbackImage]);
+
+  const { url: src = placeholder } = (loaded && (thumbnail || image)) || {};
+  // Decide final image source: normal, failed fallback, or placeholder
+  const finalSrc = failed ? fallbackImage || placeholder : src;
+
+  return (
+    <Image
+      ownerState={{ border }}
+      ref={ref}
+      alt={failed ? 'Thumbnail image unavailable' : ''}
+      role={failed ? undefined : 'presentation'}
+      src={finalSrc}
+      style={imageStyles}
+      onError={() => {
+        setFailed(true);
+        if (finalSrc) notifyFailure(finalSrc);
+      }}
+      {...props}
+    />
+  );
+};
+
+LazyLoadedImage.propTypes = {
+  border: PropTypes.bool,
+  maxHeight: PropTypes.number,
+  maxWidth: PropTypes.number,
+  placeholder: PropTypes.string.isRequired,
+  resource: PropTypes.object.isRequired,
+  style: PropTypes.object,
+  thumbnail: PropTypes.shape({
+    height: PropTypes.number,
+    url: PropTypes.string.isRequired,
+    width: PropTypes.number,
+  }),
+};
+
+const defaultPlaceholder =
+  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mMMDQmtBwADgwF/Op8FmAAAAABJRU5ErkJggg==';
+
+/**
+ * Uses InteractionObserver to "lazy" load canvas thumbnails that are in view.
+ */
+export function IIIFThumbnail({
+  border = false,
+  children = null,
+  imagePlaceholder = defaultPlaceholder,
+  label = undefined,
+  labelled = false,
+  maxHeight = null,
+  maxWidth = null,
+  resource,
+  style = {},
+  thumbnail = null,
+}) {
+  // eslint-disable-next-line prefer-rest-params
+  const ownerState = arguments[0];
+
+  return (
+    <Root ownerState={ownerState}>
+      <LazyLoadedImage
+        placeholder={imagePlaceholder}
+        thumbnail={thumbnail}
+        resource={resource}
+        maxHeight={maxHeight}
+        maxWidth={maxWidth}
+        style={style}
+        border={border}
+      />
+
+      {labelled && <Label ownerState={ownerState}>{label || <IIIFResourceLabel resource={resource} />}</Label>}
+      {children}
+    </Root>
+  );
+}
+
+IIIFThumbnail.propTypes = {
+  border: PropTypes.bool,
+  children: PropTypes.node,
+  imagePlaceholder: PropTypes.string,
+  label: PropTypes.string,
+  labelled: PropTypes.bool,
+  maxHeight: PropTypes.number,
+  maxWidth: PropTypes.number,
+  resource: PropTypes.object.isRequired,
+  style: PropTypes.object,
+  thumbnail: PropTypes.shape({
+    height: PropTypes.number,
+    url: PropTypes.string.isRequired,
+    width: PropTypes.number,
+  }),
+  // eslint-disable-next-line react/no-unused-prop-types
+  variant: PropTypes.oneOf(['inside', 'outside']),
+};

package/src/components/ImageFailureMessage.jsx

@@ -0,0 +1,42 @@
+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),
+};

package/src/components/LabelValueMetadata.jsx

@@ -0,0 +1,46 @@
+import PropTypes from 'prop-types';
+import Typography from '@mui/material/Typography';
+import SanitizedHtml from '../containers/SanitizedHtml';
+import ns from '../config/css-ns';
+
+/**
+ * Renders label/value pair metadata in a dl
+ * @prop {object} labelValuePair
+ */
+export function LabelValueMetadata({ defaultLabel = undefined, labelValuePairs, labelValueJoiner = ', ' }) {
+  if (labelValuePairs.length === 0) {
+    return null;
+  }
+
+  /* eslint-disable react/no-array-index-key */
+  // Disabling array index key for dt/dd elements as
+  // they are intended to display metadata that will not
+  // need to be re-rendered internally in any meaningful way
+  return (
+    <dl className={ns('label-value-metadata')}>
+      {labelValuePairs.reduce(
+        (acc, labelValuePair, i) =>
+          acc.concat([
+            <Typography component="dt" key={`label-${i}`} variant="subtitle2">
+              {labelValuePair.label || defaultLabel}
+            </Typography>,
+            <Typography style={{ marginBottom: '.5em', marginLeft: '0px' }} component="dd" key={`value-${i}`} variant="body1">
+              <SanitizedHtml htmlString={labelValuePair.values.join(labelValueJoiner)} ruleSet="iiif" />
+            </Typography>,
+          ]),
+        [],
+      )}
+    </dl>
+  );
+}
+
+LabelValueMetadata.propTypes = {
+  defaultLabel: PropTypes.string,
+  labelValueJoiner: PropTypes.string,
+  labelValuePairs: PropTypes.arrayOf(
+    PropTypes.shape({
+      label: PropTypes.string,
+      values: PropTypes.arrayOf(PropTypes.string),
+    }),
+  ).isRequired,
+};

package/src/components/LanguageSettings.jsx

@@ -0,0 +1,46 @@
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
+import MenuItem from '@mui/material/MenuItem';
+import CheckIcon from '@mui/icons-material/CheckSharp';
+import PropTypes from 'prop-types';
+
+/**
+ * LanguageSettings ~ the workspace sub menu to change the language
+ * of the application
+ */
+export function LanguageSettings({ handleClick, languages }) {
+  return (
+    <>
+      {languages.map((language) => (
+        <MenuItem
+          aria-selected={language.current}
+          key={language.locale}
+          lang={language.locale}
+          onClick={() => {
+            handleClick(language.locale);
+          }}
+        >
+          <ListItemIcon>{language.current && <CheckIcon />}</ListItemIcon>
+          <ListItemText
+            slotProps={{
+              primary: { variant: 'body1' },
+            }}
+          >
+            {language.label}
+          </ListItemText>
+        </MenuItem>
+      ))}
+    </>
+  );
+}
+
+LanguageSettings.propTypes = {
+  handleClick: PropTypes.func.isRequired,
+  languages: PropTypes.arrayOf(
+    PropTypes.shape({
+      current: PropTypes.bool.isRequired,
+      label: PropTypes.string.isRequired,
+      locale: PropTypes.string.isRequired,
+    }),
+  ).isRequired,
+};

package/src/components/LayersPanel.jsx

@@ -0,0 +1,24 @@
+import PropTypes from 'prop-types';
+import { useTranslation } from 'react-i18next';
+import CompanionWindow from '../containers/CompanionWindow';
+import CanvasLayers from '../containers/CanvasLayers';
+
+/**
+ * a panel showing the canvases for a given manifest
+ */
+export function LayersPanel({ canvasIds = [], id, windowId }) {
+  const { t } = useTranslation();
+  return (
+    <CompanionWindow title={t('layers')} id={id} windowId={windowId}>
+      {canvasIds.map((canvasId, index) => (
+        <CanvasLayers canvasId={canvasId} index={index} key={canvasId} totalSize={canvasIds.length} windowId={windowId} />
+      ))}
+    </CompanionWindow>
+  );
+}
+
+LayersPanel.propTypes = {
+  canvasIds: PropTypes.arrayOf(PropTypes.string),
+  id: PropTypes.string.isRequired,
+  windowId: PropTypes.string.isRequired,
+};

package/src/components/LocalePicker.jsx

@@ -0,0 +1,56 @@
+import PropTypes from 'prop-types';
+import keyBy from 'lodash/keyBy';
+import MenuItem from '@mui/material/MenuItem';
+import InputLabel from '@mui/material/InputLabel';
+import FormControl from '@mui/material/FormControl';
+import Select from '@mui/material/Select';
+import Typography from '@mui/material/Typography';
+import { useSelector } from 'react-redux';
+import { useTranslation } from 'react-i18next';
+import { getLanguagesFromConfigWithCurrent } from '../state/selectors/config';
+
+/**
+ * Provide a locale picker
+ */
+export function LocalePicker({ availableLocales = [], locale = '', setLocale = undefined }) {
+  const languages = useSelector((state) => getLanguagesFromConfigWithCurrent(state));
+  const { t } = useTranslation();
+
+  if (!setLocale || availableLocales.length < 2) return null;
+
+  const selectedLocale = availableLocales.indexOf(locale) >= 0 ? locale : availableLocales[0];
+  const labels = keyBy(languages, (o) => o.locale);
+
+  return (
+    <FormControl variant="standard">
+      <InputLabel>{t('language')}</InputLabel>
+      <Select
+        MenuProps={{
+          anchorOrigin: {
+            horizontal: 'left',
+            vertical: 'bottom',
+          },
+        }}
+        autoWidth
+        displayEmpty
+        value={selectedLocale}
+        onChange={(e) => {
+          setLocale(e.target.value);
+        }}
+        name="locale"
+      >
+        {availableLocales.map((l) => (
+          <MenuItem key={l} value={l}>
+            <Typography variant="body2">{labels[l]?.label || l}</Typography>
+          </MenuItem>
+        ))}
+      </Select>
+    </FormControl>
+  );
+}
+
+LocalePicker.propTypes = {
+  availableLocales: PropTypes.arrayOf(PropTypes.string),
+  locale: PropTypes.string,
+  setLocale: PropTypes.func,
+};