dbf-mirador 4.2.3

package/src/components/ManifestForm.jsx

@@ -0,0 +1,79 @@
+import { useState } from 'react';
+import PropTypes from 'prop-types';
+import Button from '@mui/material/Button';
+import Grid from '@mui/material/Grid';
+import TextField from '@mui/material/TextField';
+import { useTranslation } from 'react-i18next';
+
+/**
+ * Provides a form for user input of a manifest url
+ * @prop {Function} addResource
+ */
+export function ManifestForm({ addResourcesOpen, addResource, onSubmit = () => {}, onCancel = null }) {
+  const { t } = useTranslation();
+  const [formValue, setFormValue] = useState('');
+
+  /** */
+  const handleCancel = () => {
+    onCancel();
+    setFormValue('');
+  };
+
+  /** */
+  const handleInputChange = (event) => {
+    event.preventDefault();
+    setFormValue(event.target.value);
+  };
+
+  /** */
+  const formSubmit = (event) => {
+    event.preventDefault();
+    addResource(formValue);
+    onSubmit();
+    setFormValue('');
+  };
+
+  if (!addResourcesOpen) return null;
+
+  return (
+    <form onSubmit={formSubmit}>
+      <Grid container spacing={2} columns={12} sx={{ mt: 0.5 }}>
+        <Grid size={{ sm: 'grow', xs: 12 }}>
+          <TextField
+            // eslint-disable-next-line jsx-a11y/no-autofocus
+            autoFocus
+            fullWidth
+            value={formValue}
+            id="manifestURL"
+            type="text"
+            onChange={handleInputChange}
+            variant="filled"
+            label={t('addManifestUrl')}
+            helperText={t('addManifestUrlHelp')}
+            slotProps={{
+              inputLabel: { shrink: true },
+              inputProps: { style: { typography: 'body1' } },
+            }}
+          />
+        </Grid>
+        {onCancel && (
+          <Grid size="auto">
+            <Button onClick={handleCancel}>{t('cancel')}</Button>
+          </Grid>
+        )}
+        <Grid size="auto">
+          <Button id="fetchBtn" type="submit" variant="contained" color="primary">
+            {t('fetchManifest')}
+          </Button>
+        </Grid>
+      </Grid>
+    </form>
+  );
+}
+
+ManifestForm.propTypes = {
+  addResource: PropTypes.func.isRequired,
+  addResourcesOpen: PropTypes.bool.isRequired,
+  onCancel: PropTypes.func,
+  onSubmit: PropTypes.func,
+};

package/src/components/ManifestInfo.jsx

@@ -0,0 +1,67 @@
+import { useId } from 'react';
+import PropTypes from 'prop-types';
+import Typography from '@mui/material/Typography';
+import { useTranslation } from 'react-i18next';
+import CollapsibleSection from '../containers/CollapsibleSection';
+import SanitizedHtml from '../containers/SanitizedHtml';
+import LabelValueMetadata from '../containers/LabelValueMetadata';
+import { PluginHook } from './PluginHook';
+
+/**
+ * ManifestInfo
+ */
+export function ManifestInfo({
+  manifestDescription = null,
+  manifestLabel = null,
+  manifestMetadata = [],
+  manifestSummary = null,
+  ...rest
+}) {
+  const { t } = useTranslation();
+  const id = useId();
+  const pluginProps = {
+    manifestDescription,
+    manifestLabel,
+    manifestMetadata,
+    manifestSummary,
+    ...rest,
+  };
+
+  return (
+    <CollapsibleSection id={`${id}-resource`} label={t('resource')}>
+      {manifestLabel && (
+        <Typography
+          aria-labelledby={`${id}-resource ${id}-resource-heading`}
+          id={`${id}-resource-heading`}
+          variant="h4"
+          component="h5"
+        >
+          {manifestLabel}
+        </Typography>
+      )}
+
+      {manifestDescription && (
+        <Typography variant="body1">
+          <SanitizedHtml htmlString={manifestDescription} ruleSet="iiif" />
+        </Typography>
+      )}
+
+      {manifestSummary && (
+        <Typography variant="body1">
+          <SanitizedHtml htmlString={manifestSummary} ruleSet="iiif" />
+        </Typography>
+      )}
+
+      {manifestMetadata.length > 0 && <LabelValueMetadata labelValuePairs={manifestMetadata} />}
+
+      <PluginHook targetName="ManifestInfo" {...pluginProps} />
+    </CollapsibleSection>
+  );
+}
+
+ManifestInfo.propTypes = {
+  manifestDescription: PropTypes.string,
+  manifestLabel: PropTypes.string,
+  manifestMetadata: PropTypes.array,
+  manifestSummary: PropTypes.string,
+};

package/src/components/ManifestListItem.jsx

@@ -0,0 +1,209 @@
+import { useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { styled } from '@mui/material/styles';
+import ListItem from '@mui/material/ListItem';
+import ButtonBase from '@mui/material/ButtonBase';
+import Grid from '@mui/material/Grid';
+import Typography from '@mui/material/Typography';
+import Skeleton from '@mui/material/Skeleton';
+import { useTranslation } from 'react-i18next';
+import { Img } from 'react-image';
+import ManifestListItemError from '../containers/ManifestListItemError';
+import ns from '../config/css-ns';
+
+const Root = styled(ListItem, { name: 'ManifestListItem', slot: 'root' })(({ ownerState, theme }) => ({
+  '&:hover,&:focus-within': {
+    backgroundColor: theme.palette.action.hover,
+    borderLeftColor: ownerState?.active ? theme.palette.primary.main : theme.palette.action.hover,
+  },
+  borderLeft: '4px solid',
+  borderLeftColor: ownerState?.active ? theme.palette.primary.main : 'transparent',
+  paddingLeft: theme.spacing(2),
+  paddingRight: theme.spacing(2),
+  [theme.breakpoints.up('sm')]: {
+    paddingLeft: theme.spacing(3),
+    paddingRight: theme.spacing(3),
+  },
+}));
+
+const StyledThumbnail = styled(Img, {
+  name: 'ManifestListItem',
+  slot: 'thumbnail',
+})(({ theme }) => ({
+  maxWidth: '100%',
+  objectFit: 'contain',
+}));
+
+const StyledLogo = styled(Img, { name: 'ManifestListItem', slot: 'logo' })(({ theme }) => ({
+  height: '2.5rem',
+  maxWidth: '100%',
+  objectFit: 'contain',
+  paddingRight: 1,
+}));
+
+/** */
+const Placeholder = () => (
+  <Grid container className={ns('manifest-list-item')} sx={{ alignItems: 'center', display: 'flex', width: '100%' }}>
+    <Grid size={{ sm: 5, xs: 12 }} sx={{ display: 'flex', justifyContent: 'flex-start', width: '100%', alignItems: 'center' }}>
+      <Grid container component="div" sx={{ width: '100%' }}>
+        <Grid size={3} sx={{ alignItems: 'center', display: 'flex', justifyContent: 'flex-start' }}>
+          <Skeleton variant="rectangular" sx={{ bgcolor: 'grey[300]' }} height={80} width={120} />
+        </Grid>
+        <Grid size={9} sx={{ alignContent: 'center', paddingLeft: 2 }}>
+          <Skeleton sx={{ bgcolor: 'grey[300]' }} variant="text" width={300} />
+        </Grid>
+      </Grid>
+    </Grid>
+
+    <Grid size={{ sm: 4, xs: 8 }}>
+      <Skeleton sx={{ bgcolor: 'grey[300]' }} variant="text" width={150} />
+      <Skeleton sx={{ bgcolor: 'grey[300]' }} variant="text" width={70} />
+    </Grid>
+
+    <Grid size={{ sm: 3, xs: 4 }}>
+      <Skeleton sx={{ bgcolor: 'grey[300]' }} variant="rectangular" height={60} width={60} />
+    </Grid>
+  </Grid>
+);
+
+/**
+ * Represents an item in a list of currently-loaded or loading manifests
+ * @param {object} props
+ * @param {object} [props.manifest = string]
+ */
+export function ManifestListItem({
+  fetchManifest,
+  isFetching = false,
+  addWindow,
+  handleClose = () => {},
+  active = false,
+  buttonRef = undefined,
+  manifestId,
+  ready = false,
+  title = null,
+  thumbnail = null,
+  manifestLogo = null,
+  size = 0,
+  provider = null,
+  error = null,
+  isCollection = false,
+  isMultipart = false,
+}) {
+  const { t } = useTranslation();
+  useEffect(() => {
+    if (!ready && !error && !isFetching && provider !== 'file') fetchManifest(manifestId);
+  }, [manifestId, provider, fetchManifest, ready, error, isFetching]);
+
+  // eslint-disable-next-line prefer-rest-params
+  const ownerState = arguments[0];
+
+  /** */
+  const handleOpenButtonClick = () => {
+    addWindow({ manifestId });
+    handleClose();
+  };
+
+  if (error) {
+    return (
+      <Root ownerState={ownerState} divider selected={active} className={active ? 'active' : ''} data-manifestid={manifestId}>
+        <ManifestListItemError manifestId={manifestId} />
+      </Root>
+    );
+  }
+
+  return (
+    <Root
+      ownerState={ownerState}
+      divider
+      selected={active}
+      className={active ? 'active' : ''}
+      data-manifestid={manifestId}
+      data-active={active}
+      sx={{ width: '100%' }}
+    >
+      {ready ? (
+        <Grid container className={ns('manifest-list-item')} sx={{ alignItems: 'center', width: '100%' }}>
+          <Grid size={{ sm: 5, xs: 12 }}>
+            <ButtonBase
+              ref={buttonRef}
+              className={ns('manifest-list-item-title')}
+              onClick={handleOpenButtonClick}
+              sx={{ alignItems: 'center', justifyContent: 'flex-start', width: '100%' }}
+            >
+              <Grid container component="div" sx={{ width: '100%' }}>
+                <Grid size={3} sx={{ alignItems: 'center', display: 'flex', justifyContent: 'flex-start' }}>
+                  {thumbnail ? (
+                    <StyledThumbnail
+                      className={[ns('manifest-list-item-thumb')]}
+                      src={[thumbnail]}
+                      alt=""
+                      height="80"
+                      unloader={
+                        <Skeleton variant="rectangular" animation={false} sx={{ bgcolor: 'grey[300]' }} height={80} width={120} />
+                      }
+                    />
+                  ) : (
+                    <Skeleton sx={{ bgcolor: 'grey[300]' }} variant="rectangular" height={80} width={120} />
+                  )}
+                </Grid>
+                <Grid size={9} sx={{ alignContent: 'center', paddingLeft: 2 }}>
+                  {isCollection && (
+                    <Typography component="div" variant="overline" sx={{ textAlign: 'left' }}>
+                      {t(isMultipart ? 'multipartCollection' : 'collection')}
+                    </Typography>
+                  )}
+                  <Typography component="div" variant="h6" sx={{ textAlign: 'left' }}>
+                    {title || manifestId}
+                  </Typography>
+                </Grid>
+              </Grid>
+            </ButtonBase>
+          </Grid>
+
+          <Grid size={{ sm: 4, xs: 8 }}>
+            <Typography className={ns('manifest-list-item-provider')}>{provider}</Typography>
+            <Typography>{t('numItems', { count: size, number: size })}</Typography>
+          </Grid>
+
+          <Grid size={{ sm: 3, xs: 4 }}>
+            {manifestLogo && (
+              <StyledLogo
+                src={[manifestLogo]}
+                alt=""
+                role="presentation"
+                unloader={
+                  <Skeleton variant="rectangular" animation={false} sx={{ bgcolor: 'grey[300]' }} height={60} width={60} />
+                }
+              />
+            )}
+          </Grid>
+        </Grid>
+      ) : (
+        <Placeholder />
+      )}
+    </Root>
+  );
+}
+
+ManifestListItem.propTypes = {
+  active: PropTypes.bool,
+  addWindow: PropTypes.func.isRequired,
+  buttonRef: PropTypes.elementType,
+  error: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.bool,
+    PropTypes.oneOf([null]), // for null
+  ]),
+  fetchManifest: PropTypes.func.isRequired,
+  handleClose: PropTypes.func,
+  isCollection: PropTypes.bool,
+  isFetching: PropTypes.bool,
+  isMultipart: PropTypes.bool,
+  manifestId: PropTypes.string.isRequired,
+  manifestLogo: PropTypes.string,
+  provider: PropTypes.string,
+  ready: PropTypes.bool,
+  size: PropTypes.number,
+  thumbnail: PropTypes.string,
+  title: PropTypes.string,
+};

package/src/components/ManifestListItemError.jsx

@@ -0,0 +1,53 @@
+import PropTypes from 'prop-types';
+import Button from '@mui/material/Button';
+import ErrorIcon from '@mui/icons-material/ErrorOutlineSharp';
+import Grid from '@mui/material/Grid';
+import Typography from '@mui/material/Typography';
+import { useTranslation } from 'react-i18next';
+
+/**
+ * ManifestListItemError renders a component displaying a
+ * message to the user about a problem loading a manifest
+ */
+export function ManifestListItemError({ manifestId, onDismissClick, onTryAgainClick }) {
+  const { t } = useTranslation();
+  return (
+    <Grid container sx={{ alignItems: 'center', width: '100%' }}>
+      <Grid container size={{ sm: 5, xs: 12 }} sx={{ alignItems: 'center' }}>
+        <ErrorIcon
+          sx={{
+            color: 'error.main',
+            height: '2rem',
+            marginRight: '0.5rem',
+            width: '2rem',
+          }}
+        />
+        <Typography>{t('manifestError')}</Typography>
+        <Typography sx={{ wordBreak: 'break-all' }}>{manifestId}</Typography>
+      </Grid>
+
+      <Grid container size={{ sm: 7, xs: 12 }}>
+        <Button
+          onClick={() => {
+            onDismissClick(manifestId);
+          }}
+        >
+          {t('dismiss')}
+        </Button>
+        <Button
+          onClick={() => {
+            onTryAgainClick(manifestId);
+          }}
+        >
+          {t('tryAgain')}
+        </Button>
+      </Grid>
+    </Grid>
+  );
+}
+
+ManifestListItemError.propTypes = {
+  manifestId: PropTypes.string.isRequired,
+  onDismissClick: PropTypes.func.isRequired,
+  onTryAgainClick: PropTypes.func.isRequired,
+};

package/src/components/ManifestRelatedLinks.jsx

@@ -0,0 +1,154 @@
+import { useId } from 'react';
+import PropTypes from 'prop-types';
+import { styled } from '@mui/material/styles';
+import Typography from '@mui/material/Typography';
+import Link from '@mui/material/Link';
+import classNames from 'classnames';
+import { useTranslation } from 'react-i18next';
+import CollapsibleSection from '../containers/CollapsibleSection';
+import ns from '../config/css-ns';
+import { PluginHook } from './PluginHook';
+
+const StyledDl = styled('dl')(({ theme }) => ({
+  '& dd': {
+    marginBottom: '.5em',
+    marginLeft: '0',
+  },
+}));
+
+/**
+ * ManifestRelatedLinks
+ */
+export function ManifestRelatedLinks({
+  homepage = null,
+  manifestUrl = null,
+  related = null,
+  renderings = null,
+  seeAlso = null,
+  ...rest
+}) {
+  const { t } = useTranslation();
+  const id = useId();
+  const titleId = useId();
+
+  const pluginProps = {
+    homepage,
+    manifestUrl,
+    related,
+    renderings,
+    seeAlso,
+    t,
+    ...rest,
+  };
+
+  return (
+    <CollapsibleSection aria-labelledby={titleId} id={id} label={t('related')}>
+      <Typography aria-labelledby={`${id} ${titleId}`} id={titleId} variant="h4" component="h5">
+        {t('links')}
+      </Typography>
+      <StyledDl className={classNames(ns('label-value-metadata'))}>
+        {homepage && (
+          <>
+            <Typography variant="subtitle2" component="dt">
+              {t('iiif_homepage')}
+            </Typography>
+            {homepage.map((page) => (
+              <Typography key={page.value} variant="body1" component="dd">
+                <Link target="_blank" rel="noopener noreferrer" href={page.value}>
+                  {page.label || page.value}
+                </Link>
+              </Typography>
+            ))}
+          </>
+        )}
+        {renderings && renderings.length > 0 && (
+          <>
+            <Typography variant="subtitle2" component="dt">
+              {t('iiif_renderings')}
+            </Typography>
+            {renderings.map((rendering) => (
+              <Typography key={rendering.value} variant="body1" component="dd">
+                <Link target="_blank" rel="noopener noreferrer" href={rendering.value}>
+                  {rendering.label || rendering.value}
+                </Link>
+              </Typography>
+            ))}
+          </>
+        )}
+        {related && (
+          <>
+            <Typography variant="subtitle2" component="dt">
+              {t('iiif_related')}
+            </Typography>
+            {related.map((relatedItem) => (
+              <Typography key={relatedItem.value} variant="body1" component="dd">
+                <Link target="_blank" rel="noopener noreferrer" href={relatedItem.value}>
+                  {relatedItem.label || relatedItem.value}
+                </Link>
+                {relatedItem.format && <Typography component="span">{` (${relatedItem.format})`}</Typography>}
+              </Typography>
+            ))}
+          </>
+        )}
+        {seeAlso && (
+          <>
+            <Typography variant="subtitle2" component="dt">
+              {t('iiif_seeAlso')}
+            </Typography>
+            {seeAlso.map((seeAlsoItem) => (
+              <Typography key={seeAlsoItem.value} variant="body1" component="dd">
+                <Link target="_blank" rel="noopener noreferrer" href={seeAlsoItem.value}>
+                  {seeAlsoItem.label || seeAlsoItem.value}
+                </Link>
+                {seeAlsoItem.format && <Typography component="span">{` (${seeAlsoItem.format})`}</Typography>}
+              </Typography>
+            ))}
+          </>
+        )}
+        {manifestUrl && (
+          <>
+            <Typography variant="subtitle2" component="dt">
+              {t('iiif_manifest')}
+            </Typography>
+            <Typography variant="body1" component="dd">
+              <Link target="_blank" rel="noopener noreferrer" href={manifestUrl}>
+                {manifestUrl}
+              </Link>
+            </Typography>
+          </>
+        )}
+      </StyledDl>
+      <PluginHook targetName="ManifestRelatedLinks" {...pluginProps} />
+    </CollapsibleSection>
+  );
+}
+
+ManifestRelatedLinks.propTypes = {
+  homepage: PropTypes.arrayOf(
+    PropTypes.shape({
+      label: PropTypes.string,
+      value: PropTypes.string,
+    }),
+  ),
+  manifestUrl: PropTypes.string,
+  related: PropTypes.arrayOf(
+    PropTypes.shape({
+      format: PropTypes.string,
+      label: PropTypes.string,
+      value: PropTypes.string,
+    }),
+  ),
+  renderings: PropTypes.arrayOf(
+    PropTypes.shape({
+      label: PropTypes.string,
+      value: PropTypes.string,
+    }),
+  ),
+  seeAlso: PropTypes.arrayOf(
+    PropTypes.shape({
+      format: PropTypes.string,
+      label: PropTypes.string,
+      value: PropTypes.string,
+    }),
+  ),
+};

package/src/components/MinimalWindow.jsx

@@ -0,0 +1,104 @@
+import PropTypes from 'prop-types';
+import { styled } from '@mui/material/styles';
+import MenuIcon from '@mui/icons-material/MenuSharp';
+import cn from 'classnames';
+import Paper from '@mui/material/Paper';
+import AppBar from '@mui/material/AppBar';
+import Toolbar from '@mui/material/Toolbar';
+import Typography from '@mui/material/Typography';
+import CloseIcon from '@mui/icons-material/CloseSharp';
+import { useTranslation } from 'react-i18next';
+import MiradorMenuButton from '../containers/MiradorMenuButton';
+import ns from '../config/css-ns';
+
+const StyledMiradorMenuButton = styled(MiradorMenuButton)(() => ({
+  marginLeft: 'auto',
+}));
+
+/** */
+export function MinimalWindow({
+  allowClose = true,
+  allowWindowSideBar = true,
+  ariaLabel = true,
+  children = null,
+  label = '',
+  removeWindow = () => {},
+  windowId,
+}) {
+  const { t } = useTranslation();
+  return (
+    <Paper
+      component="section"
+      elevation={1}
+      id={windowId}
+      className={cn(ns('placeholder-window'))}
+      sx={{
+        backgroundColor: 'shades.dark',
+        borderRadius: 0,
+        display: 'flex',
+        flexDirection: 'column',
+        height: '100%',
+        minHeight: 0,
+        overflow: 'hidden',
+        width: '100%',
+      }}
+      aria-label={label && ariaLabel ? t('window', { label }) : null}
+    >
+      <AppBar position="relative" color="default" enableColorOnDark>
+        <Toolbar
+          disableGutters
+          className={cn(ns('window-top-bar'))}
+          sx={{
+            backgroundColor: 'shades.main',
+            borderTop: '2px solid transparent',
+            minHeight: 32,
+            paddingLeft: 0.5,
+            paddingRight: 0.5,
+          }}
+          variant="dense"
+        >
+          {allowWindowSideBar && (
+            <MiradorMenuButton aria-label={t('toggleWindowSideBar')} disabled>
+              <MenuIcon />
+            </MiradorMenuButton>
+          )}
+          <Typography
+            variant="h2"
+            noWrap
+            sx={{
+              color: 'inherit',
+              flexGrow: 1,
+              paddingLeft: 0.5,
+              typography: 'h6',
+            }}
+          >
+            {label}
+          </Typography>
+          {allowClose && removeWindow && (
+            <StyledMiradorMenuButton
+              aria-label={t('closeWindow')}
+              className={cn(ns('window-close'))}
+              onClick={removeWindow}
+              TooltipProps={{
+                tabIndex: ariaLabel ? 0 : -1,
+              }}
+            >
+              <CloseIcon />
+            </StyledMiradorMenuButton>
+          )}
+        </Toolbar>
+      </AppBar>
+      {children}
+    </Paper>
+  );
+}
+
+MinimalWindow.propTypes = {
+  allowClose: PropTypes.bool,
+  allowWindowSideBar: PropTypes.bool,
+  ariaLabel: PropTypes.bool,
+  children: PropTypes.node,
+  label: PropTypes.string,
+  removeWindow: PropTypes.func,
+  windowId: PropTypes.string.isRequired,
+};