dbf-mirador 4.2.3

package/src/components/CompanionWindowSection.jsx

@@ -0,0 +1,11 @@
+import { styled } from '@mui/material/styles';
+
+export const CompanionWindowSection = styled('div', {
+  name: 'CompanionWindowSection',
+  slot: 'root',
+})(({ theme }) => ({
+  paddingBlockEnd: theme.spacing(1),
+  paddingBlockStart: theme.spacing(2),
+  paddingInlineEnd: theme.spacing(1),
+  paddingInlineStart: theme.spacing(2),
+}));

package/src/components/CustomPanel.jsx

@@ -0,0 +1,22 @@
+import PropTypes from 'prop-types';
+import { useTranslation } from 'react-i18next';
+import CompanionWindow from '../containers/CompanionWindow';
+
+/**
+ * a custom panel that can be used for anything
+ */
+export function CustomPanel({ id, children = null, title, windowId }) {
+  const { t } = useTranslation();
+  return (
+    <CompanionWindow title={t(title)} id={id} windowId={windowId}>
+      {children}
+    </CompanionWindow>
+  );
+}
+
+CustomPanel.propTypes = {
+  children: PropTypes.node,
+  id: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired,
+  windowId: PropTypes.string.isRequired,
+};

package/src/components/ErrorContent.jsx

@@ -0,0 +1,65 @@
+import PropTypes from 'prop-types';
+import { styled } from '@mui/material/styles';
+import Accordion from '@mui/material/Accordion';
+import AccordionSummary from '@mui/material/AccordionSummary';
+import AccordionDetails from '@mui/material/AccordionDetails';
+import Stack from '@mui/material/Stack';
+import Alert from '@mui/material/Alert';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import { useTranslation } from 'react-i18next';
+import { PluginHook } from './PluginHook';
+
+const ErrorStackTrace = styled('pre', { name: 'ErrorContent', slot: 'stacktrace' })({
+  overflowY: 'scroll',
+});
+
+const ErrorMetadata = styled('pre', { name: 'ErrorContent', slot: 'metadata' })({
+  height: '100px',
+  overflowY: 'scroll',
+});
+
+const InlineAccordion = styled(Accordion, { name: 'ErrorContent', slot: 'accordion' })({
+  backgroundColor: 'inherit',
+  color: 'inherit',
+  margin: 0,
+});
+
+/** */
+export function ErrorContent({ error, metadata = null, showJsError = true, ...rest }) {
+  const { t } = useTranslation();
+  if (!showJsError) return null;
+
+  const pluginProps = {
+    error,
+    metadata,
+    showJsError,
+    t,
+    ...rest,
+  };
+
+  return (
+    <Alert elevation={6} variant="filled" severity="error">
+      {t('errorDialogTitle')}
+      {showJsError && (
+        <InlineAccordion elevation={2} square>
+          <AccordionSummary sx={{ marginInlineStart: '-1rem' }} expandIcon={<ExpandMoreIcon sx={{ color: '#fff' }} />}>
+            {t('jsError', { message: error.message, name: error.name })}
+          </AccordionSummary>
+          <AccordionDetails>
+            <Stack>
+              <ErrorStackTrace>{t('jsStack', { stack: error.stack })}</ErrorStackTrace>
+              {metadata && <ErrorMetadata>{JSON.stringify(metadata, null, 2)}</ErrorMetadata>}
+            </Stack>
+          </AccordionDetails>
+        </InlineAccordion>
+      )}
+      <PluginHook targetName="ErrorContent" {...pluginProps} />
+    </Alert>
+  );
+}
+
+ErrorContent.propTypes = {
+  error: PropTypes.object.isRequired,
+  metadata: PropTypes.object,
+  showJsError: PropTypes.bool,
+};

package/src/components/ErrorDialog.jsx

@@ -0,0 +1,47 @@
+import Dialog from '@mui/material/Dialog';
+import DialogContent from '@mui/material/DialogContent';
+import DialogTitle from '@mui/material/DialogTitle';
+import PropTypes from 'prop-types';
+import { DialogActions, DialogContentText } from '@mui/material';
+import Button from '@mui/material/Button';
+import { useTranslation } from 'react-i18next';
+import isUndefined from 'lodash/isUndefined';
+
+/**
+ */
+export function ErrorDialog({ error = null, removeError = () => {} }) {
+  const { t } = useTranslation();
+  const hasError = !isUndefined(error);
+
+  if (!error) return null;
+
+  return (
+    <Dialog aria-labelledby="error-dialog-title" id="error-dialog" onClose={() => removeError(error.id)} open={hasError}>
+      <DialogTitle id="error-dialog-title">{t('errorDialogTitle')}</DialogTitle>
+      <DialogContent>
+        <DialogContentText
+          variant="body2"
+          noWrap
+          sx={{
+            color: 'inherit',
+          }}
+        >
+          {`${error.message}`}
+        </DialogContentText>
+        <DialogActions>
+          <Button onClick={() => removeError(error.id)} variant="contained">
+            {t('errorDialogConfirm')}
+          </Button>
+        </DialogActions>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+ErrorDialog.propTypes = {
+  error: PropTypes.shape({
+    id: PropTypes.string,
+    message: PropTypes.string,
+  }),
+  removeError: PropTypes.func,
+};

package/src/components/FullScreenButton.jsx

@@ -0,0 +1,47 @@
+import { useContext, useEffect, useState } from 'react';
+import FullscreenIcon from '@mui/icons-material/FullscreenSharp';
+import FullscreenExitIcon from '@mui/icons-material/FullscreenExitSharp';
+import PropTypes from 'prop-types';
+import { useTranslation } from 'react-i18next';
+import MiradorMenuButton from '../containers/MiradorMenuButton';
+import FullScreenContext from '../contexts/FullScreenContext';
+
+/**
+ */
+export function FullScreenButton({ className = undefined }) {
+  const { t } = useTranslation();
+  const handle = useContext(FullScreenContext);
+
+  // iPhone Safari does not support full screen on divs,
+  // Don't render the button if not supported
+  const [canFullscreenDiv, setCanFullscreenDiv] = useState(false);
+
+  useEffect(() => {
+    const div = document.createElement('div');
+    setCanFullscreenDiv(typeof div.requestFullscreen === 'function');
+  }, []);
+
+  if (!canFullscreenDiv) return null;
+
+  if (handle && handle.active) {
+    return (
+      <MiradorMenuButton className={className} aria-label={t('exitFullScreen')} onClick={handle.exit}>
+        <FullscreenExitIcon />
+      </MiradorMenuButton>
+    );
+  }
+
+  if (handle) {
+    return (
+      <MiradorMenuButton className={className} aria-label={t('workspaceFullScreen')} onClick={handle.enter}>
+        <FullscreenIcon />
+      </MiradorMenuButton>
+    );
+  }
+
+  return null;
+}
+
+FullScreenButton.propTypes = {
+  className: PropTypes.string,
+};

package/src/components/GalleryView.jsx

@@ -0,0 +1,36 @@
+import PropTypes from 'prop-types';
+import { styled } from '@mui/material/styles';
+import Paper from '@mui/material/Paper';
+import GalleryViewThumbnail from '../containers/GalleryViewThumbnail';
+
+const Root = styled(Paper, { name: 'GalleryView', slot: 'root' })(({ theme }) => ({
+  alignItems: 'flex-start',
+  alignContent: 'flex-start',
+  display: 'flex',
+  flexDirection: 'row',
+  flexWrap: 'wrap',
+  overflowX: 'hidden',
+  overflowY: 'scroll',
+  padding: '50px 0 50px 20px',
+  width: '100%',
+}));
+
+/**
+ * Renders a GalleryView overview of the manifest.
+ */
+export function GalleryView({ canvases, viewingDirection = '', windowId }) {
+  const htmlDir = viewingDirection === 'right-to-left' ? 'rtl' : 'ltr';
+  return (
+    <Root component="section" aria-label="gallery section" dir={htmlDir} square elevation={0} id={`${windowId}-gallery`}>
+      {canvases.map((canvas) => (
+        <GalleryViewThumbnail key={canvas.id} windowId={windowId} canvas={canvas} />
+      ))}
+    </Root>
+  );
+}
+
+GalleryView.propTypes = {
+  canvases: PropTypes.array.isRequired,
+  viewingDirection: PropTypes.string,
+  windowId: PropTypes.string.isRequired,
+};

package/src/components/GalleryViewThumbnail.jsx

@@ -0,0 +1,160 @@
+import { useEffect, useRef, useState } from 'react';
+import PropTypes from 'prop-types';
+import { styled } from '@mui/material/styles';
+import Chip from '@mui/material/Chip';
+import AnnotationIcon from '@mui/icons-material/CommentSharp';
+import SearchIcon from '@mui/icons-material/SearchSharp';
+import { InView } from 'react-intersection-observer';
+import IIIFThumbnail from '../containers/IIIFThumbnail';
+
+const Root = styled('div', { name: 'GalleryView', slot: 'thumbnail' })(({ ownerState, theme }) => ({
+  '&:focus': {
+    outline: 'none',
+  },
+  '&:hover': {
+    backgroundColor: theme.palette.action.hover,
+  },
+  border: '2px solid transparent',
+  ...(ownerState.selected && {
+    borderColor: theme.palette.primary.main,
+  }),
+  ...(!ownerState.selected &&
+    ownerState.searchAnnotationsCount > 0 && {
+      borderColor: theme.palette.action.selected,
+    }),
+  cursor: 'pointer',
+  display: 'inline-block',
+  margin: theme.spacing(1, 0.5),
+  maxHeight: ownerState.config.height + 45,
+  minWidth: '60px',
+  overflow: 'hidden',
+  padding: theme.spacing(0.5),
+  position: 'relative',
+  width: 'min-content',
+}));
+
+const StyledChipsContainer = styled('div', { name: 'GalleryView', slot: 'chipArea' })(({ theme }) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: theme.spacing(0.25),
+  position: 'absolute',
+  right: 0,
+  top: 0,
+}));
+
+const AnnotationChip = styled(Chip, { name: 'GalleryView', slot: 'chip' })(({ theme }) => ({
+  backgroundColor: theme.palette.annotations.chipBackground,
+  opacity: 0.875,
+  textAlign: 'right',
+}));
+
+/**
+ * Represents a WindowViewer in the mirador workspace. Responsible for mounting
+ * OSD and Navigation
+ */
+export function GalleryViewThumbnail({
+  canvas,
+  selected = false,
+  setCanvas,
+  focusOnCanvas,
+  annotationsCount = undefined,
+  requestCanvasAnnotations = () => {},
+  searchAnnotationsCount = 0,
+  config = { height: 100, width: null },
+}) {
+  const myRef = useRef();
+  const [requestedAnnotations, setRequestedAnnotations] = useState(false);
+
+  useEffect(() => {
+    if (selected) {
+      myRef.current?.scrollIntoView({ block: 'nearest' });
+    }
+  }, [selected]);
+
+  /** @private */
+  const handleSelect = () => {
+    if (selected) {
+      focusOnCanvas();
+    } else {
+      setCanvas(canvas.id);
+    }
+  };
+
+  /** @private */
+  const handleKey = (event) => {
+    const keys = {
+      enter: 'Enter',
+      space: ' ',
+    };
+
+    const chars = {
+      enter: 13,
+      space: 32,
+    };
+
+    const enterOrSpace =
+      event.key === keys.enter || event.which === chars.enter || event.key === keys.space || event.which === chars.space;
+
+    if (enterOrSpace) {
+      focusOnCanvas();
+    } else {
+      setCanvas(canvas.id);
+    }
+  };
+
+  /** */
+  const handleIntersection = (_inView, { isIntersecting }) => {
+    if (!isIntersecting || annotationsCount === undefined || annotationsCount > 0 || requestedAnnotations) return;
+
+    setRequestedAnnotations(true);
+    requestCanvasAnnotations();
+  };
+
+  const ownerState = {
+    annotationsCount,
+    canvas,
+    config,
+    searchAnnotationsCount,
+    selected,
+  };
+
+  return (
+    <InView onChange={handleIntersection}>
+      <Root
+        ownerState={ownerState}
+        key={canvas.id || canvas.index}
+        className={selected ? 'selected' : ''}
+        onClick={handleSelect}
+        onKeyUp={handleKey}
+        ref={myRef}
+        role="button"
+        tabIndex={0}
+      >
+        <IIIFThumbnail resource={canvas} labelled variant="outside" maxHeight={config.height} maxWidth={config.width}>
+          <StyledChipsContainer>
+            {searchAnnotationsCount > 0 && (
+              <AnnotationChip icon={<SearchIcon fontSize="small" />} label={searchAnnotationsCount} size="small" />
+            )}
+            {annotationsCount > 0 && (
+              <AnnotationChip icon={<AnnotationIcon fontSize="small" />} label={annotationsCount} size="small" />
+            )}
+          </StyledChipsContainer>
+        </IIIFThumbnail>
+      </Root>
+    </InView>
+  );
+}
+
+GalleryViewThumbnail.propTypes = {
+  annotationsCount: PropTypes.number,
+  canvas: PropTypes.object.isRequired,
+  config: PropTypes.shape({
+    height: PropTypes.number,
+    width: PropTypes.number,
+  }),
+  focusOnCanvas: PropTypes.func.isRequired,
+  requestCanvasAnnotations: PropTypes.func,
+  searchAnnotationsCount: PropTypes.number,
+  selected: PropTypes.bool,
+  setCanvas: PropTypes.func.isRequired,
+};

package/src/components/IIIFAuthentication.jsx

@@ -0,0 +1,144 @@
+import PropTypes from 'prop-types';
+import { useTranslation } from 'react-i18next';
+import { AccessTokenSender } from './AccessTokenSender';
+import { NewBrowserWindow } from './NewBrowserWindow';
+import WindowAuthenticationBar from '../containers/WindowAuthenticationBar';
+
+/**
+ * Opens a new window for click
+ */
+export function IIIFAuthentication({
+  accessTokenServiceId = undefined,
+  authServiceId = undefined,
+  confirm = undefined,
+  description = undefined,
+  failureDescription = undefined,
+  failureHeader = undefined,
+  features = 'centerscreen',
+  handleAuthInteraction,
+  header = undefined,
+  isInteractive = true,
+  label = undefined,
+  logoutConfirm = undefined,
+  logoutServiceId = undefined,
+  openWindow = window.open,
+  resetAuthenticationState,
+  resolveAccessTokenRequest,
+  resolveAuthenticationRequest,
+  status = null,
+  windowId,
+}) {
+  const { t } = useTranslation();
+
+  /** */
+  const onReceiveAccessTokenMessage = (payload) => {
+    resolveAccessTokenRequest(authServiceId, accessTokenServiceId, payload);
+  };
+
+  /** */
+  const defaultAuthBarProps = () => ({
+    authServiceId,
+    hasLogoutService: !!logoutServiceId,
+    status,
+    windowId,
+  });
+
+  /** handle the IIIF logout workflow */
+  const performLogout = () => {
+    openWindow(logoutServiceId, undefined, features);
+
+    resetAuthenticationState({ authServiceId, tokenServiceId: accessTokenServiceId });
+  };
+
+  /** Render the auth bar for logged in users */
+  const renderLoggedIn = () => {
+    if (!isInteractive && !logoutServiceId) return null;
+
+    return (
+      <WindowAuthenticationBar
+        confirmButton={logoutConfirm || t('logout')}
+        onConfirm={performLogout}
+        {...defaultAuthBarProps()}
+      />
+    );
+  };
+
+  /** Render whatever shows up after the interactive login attempt fails */
+  const renderFailure = () => (
+    <WindowAuthenticationBar
+      header={failureHeader}
+      description={failureDescription}
+      confirmButton={t('retry')}
+      onConfirm={() => handleAuthInteraction(windowId, authServiceId)}
+      {...defaultAuthBarProps()}
+    />
+  );
+
+  /** Render the login bar after we're logging in */
+  const renderLoggingInCookie = () => (
+    <>
+      {renderLogin()}
+      <NewBrowserWindow
+        name="IiifLoginSender"
+        url={`${authServiceId}?origin=${window.origin}`}
+        features={features}
+        onClose={() => resolveAuthenticationRequest(authServiceId, accessTokenServiceId)}
+      />
+    </>
+  );
+
+  /** Render the login bar after we're logging in */
+  const renderLoggingInToken = () => (
+    <>
+      {renderLogin()}
+      <AccessTokenSender handleAccessTokenMessage={onReceiveAccessTokenMessage} url={accessTokenServiceId} />
+    </>
+  );
+
+  /** Render a login bar */
+  const renderLogin = () => {
+    if (!isInteractive) return null;
+
+    return (
+      <WindowAuthenticationBar
+        header={header}
+        description={description}
+        label={label}
+        confirmButton={confirm}
+        onConfirm={() => handleAuthInteraction(windowId, authServiceId)}
+        {...defaultAuthBarProps()}
+      />
+    );
+  };
+
+  if (!authServiceId) return null;
+  if (status === null) return renderLogin();
+  if (status === 'cookie') return renderLoggingInCookie();
+  if (status === 'token') return renderLoggingInToken();
+  if (status === 'failed') return renderFailure();
+  if (status === 'ok') return renderLoggedIn();
+
+  return null;
+}
+
+IIIFAuthentication.propTypes = {
+  accessTokenServiceId: PropTypes.string,
+  authServiceId: PropTypes.string,
+  confirm: PropTypes.string,
+  description: PropTypes.string,
+  failureDescription: PropTypes.string,
+  failureHeader: PropTypes.string,
+  features: PropTypes.string,
+  handleAuthInteraction: PropTypes.func.isRequired,
+  header: PropTypes.string,
+  isInteractive: PropTypes.bool,
+  label: PropTypes.string,
+  logoutConfirm: PropTypes.string,
+  logoutServiceId: PropTypes.string,
+  openWindow: PropTypes.func,
+  resetAuthenticationState: PropTypes.func.isRequired,
+  resolveAccessTokenRequest: PropTypes.func.isRequired,
+  resolveAuthenticationRequest: PropTypes.func.isRequired,
+  status: PropTypes.oneOf(['logout', 'ok', 'token', 'cookie', 'failed', null]),
+  windowId: PropTypes.string.isRequired,
+};