dbf-mirador 4.2.3

package/src/components/SidebarIndexThumbnail.jsx

@@ -0,0 +1,22 @@
+import PropTypes from 'prop-types';
+import Typography from '@mui/material/Typography';
+import IIIFThumbnail from '../containers/IIIFThumbnail';
+
+/** */
+export function SidebarIndexThumbnail({ canvas, height = undefined, label, width = undefined }) {
+  return (
+    <>
+      <div style={{ minWidth: 50 }}>
+        <IIIFThumbnail label={label} resource={canvas} maxHeight={height} maxWidth={width} />
+      </div>
+      <Typography>{label}</Typography>
+    </>
+  );
+}
+
+SidebarIndexThumbnail.propTypes = {
+  canvas: PropTypes.object.isRequired,
+  height: PropTypes.number,
+  label: PropTypes.string.isRequired,
+  width: PropTypes.number,
+};

package/src/components/TextViewer.jsx

@@ -0,0 +1,37 @@
+import { styled } from '@mui/material/styles';
+import PropTypes from 'prop-types';
+import WindowCanvasNavigationControls from '../containers/WindowCanvasNavigationControls';
+
+const StyledContainer = styled('div')(() => ({
+  alignItems: 'center',
+  display: 'flex',
+  width: '100%',
+}));
+
+const StyledText = styled('div')(() => ({
+  maxHeight: '100%',
+  width: '100%',
+}));
+
+/**
+ * Simple divs with canvas navigation, which should mimic v3 fallthrough to WindowViewer
+ * with non-image resources and provide a target for plugin overrides with minimal disruption.
+ */
+export function TextViewer({ textOptions = {}, textResources = [], windowId }) {
+  return (
+    <StyledContainer>
+      <StyledText {...textOptions}>
+        {textResources.map((text) => (
+          <source key={text.id} src={text.id} type={text.getFormat()} />
+        ))}
+        <WindowCanvasNavigationControls windowId={windowId} />
+      </StyledText>
+    </StyledContainer>
+  );
+}
+
+TextViewer.propTypes = {
+  textOptions: PropTypes.object,
+  textResources: PropTypes.arrayOf(PropTypes.object),
+  windowId: PropTypes.string.isRequired,
+};

package/src/components/ThumbnailCanvasGrouping.jsx

@@ -0,0 +1,122 @@
+import { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import { styled } from '@mui/material/styles';
+import classNames from 'classnames';
+import IIIFThumbnail from '../containers/IIIFThumbnail';
+import ns from '../config/css-ns';
+
+const StyledCanvas = styled('div')(({ theme }) => ({
+  boxSizing: 'border-box',
+  color: theme.palette.common.white,
+  cursor: 'pointer',
+  display: 'inline-block',
+  whiteSpace: 'nowrap',
+}));
+/** */
+export class ThumbnailCanvasGrouping extends PureComponent {
+  /** */
+  constructor(props) {
+    super(props);
+    this.setCanvas = this.setCanvas.bind(this);
+  }
+
+  /** */
+  setCanvas(e) {
+    const { setCanvas } = this.props;
+    setCanvas(e.currentTarget.dataset.canvasId);
+  }
+
+  /**
+   * Determines whether the current index is the rendered canvas, providing
+   * a useful class.
+   */
+  currentCanvasClass(canvasIndices) {
+    const { index } = this.props;
+    if (canvasIndices.includes(index)) return 'current-canvas-grouping';
+    return '';
+  }
+
+  /** */
+  render() {
+    const { index, columnIndex, style, canvasGroupings, position, currentCanvasId, showThumbnailLabels } = this.props;
+    // For Grid (horizontal), use columnIndex; for List (vertical), use index
+    const itemIndex = columnIndex !== undefined ? columnIndex : index;
+    const currentGroupings = canvasGroupings[itemIndex];
+    const SPACING = 12;
+
+    const isSelected = currentGroupings.map((canvas) => canvas.id).includes(currentCanvasId);
+
+    return (
+      <div
+        style={{
+          ...style,
+          boxSizing: 'border-box',
+          height: Number.isInteger(style.height) ? style.height - SPACING : null,
+          left: Number.isInteger(style.left) ? style.left + SPACING / 2 : null,
+          padding: SPACING / 2,
+          top: Number.isInteger(style.top) ? style.top + SPACING / 2 : null,
+          width: Number.isInteger(style.width) ? style.width - SPACING : null,
+        }}
+        className={ns('thumbnail-nav-container')}
+        role="gridcell"
+        aria-selected={isSelected}
+        aria-colindex={itemIndex + 1}
+      >
+        <StyledCanvas
+          role="button"
+          data-canvas-id={currentGroupings[0].id}
+          data-canvas-index={currentGroupings[0].index}
+          onClick={this.setCanvas}
+          tabIndex={-1}
+          sx={(theme) => ({
+            '&:not(:hover)': {
+              outline: isSelected ? `2px solid ${theme.palette.primary.main}` : 0,
+              ...(isSelected && {
+                outlineOffset: '3px',
+              }),
+            },
+            '&:hover': {
+              outline: isSelected ? `2px solid ${theme.palette.primary.main}` : `2px solid ${theme.palette.action.hover}`,
+              outlineOffset: isSelected ? '3px' : '-2px',
+            },
+            height: position === 'far-right' ? 'auto' : `${style.height}px`,
+            width: position === 'far-bottom' ? 'auto' : `${style.width}px`,
+          })}
+          className={classNames(
+            ns([
+              'thumbnail-nav-canvas',
+              `thumbnail-nav-canvas-${itemIndex}`,
+              this.currentCanvasClass(currentGroupings.map((canvas) => canvas.index)),
+            ]),
+          )}
+        >
+          {currentGroupings.map((canvas, i) => (
+            <IIIFThumbnail
+              key={canvas.id}
+              resource={canvas}
+              labelled={showThumbnailLabels}
+              maxHeight={position === 'far-right' ? style.height - SPACING : style.height}
+              variant="inside"
+            />
+          ))}
+        </StyledCanvas>
+      </div>
+    );
+  }
+}
+
+ThumbnailCanvasGrouping.propTypes = {
+  canvasGroupings: PropTypes.array.isRequired,
+  columnIndex: PropTypes.number,
+  currentCanvasId: PropTypes.string.isRequired,
+  index: PropTypes.number,
+  position: PropTypes.string.isRequired,
+  setCanvas: PropTypes.func.isRequired,
+  showThumbnailLabels: PropTypes.bool.isRequired,
+  style: PropTypes.object.isRequired,
+};
+
+ThumbnailCanvasGrouping.defaultProps = {
+  columnIndex: undefined,
+  index: undefined,
+};

package/src/components/ThumbnailNavigation.jsx

@@ -0,0 +1,231 @@
+import { useCallback, useRef, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import Paper from '@mui/material/Paper';
+import { List, Grid } from 'react-window';
+import classNames from 'classnames';
+import { useTranslation } from 'react-i18next';
+import { useCanvasWorldService } from '../hooks';
+import ThumbnailCanvasGrouping from '../containers/ThumbnailCanvasGrouping';
+import ns from '../config/css-ns';
+/**
+ */
+export function ThumbnailNavigation({
+  canvasGroupings,
+  canvasIndex,
+  hasNextCanvas = false,
+  hasPreviousCanvas = false,
+  position,
+  setNextCanvas = () => {},
+  setPreviousCanvas = () => {},
+  thumbnailNavigation,
+  view = undefined,
+  viewingDirection = '',
+  windowId,
+}) {
+  const { t } = useTranslation();
+  const scrollbarSize = 6;
+  const spacing = 12; // 2 * (2px margin + 2px border + 2px padding)
+  const gridRef = useRef();
+  const previousView = useRef(view);
+  const canvasWorlds = useCanvasWorldService();
+
+  useEffect(() => {
+    if (previousView.current !== view && position !== 'off') {
+      previousView.current = view;
+      // Note: resetAfterIndex is not available in react-window v2 List API
+      // The list will re-render automatically when rowHeight function changes
+    }
+  }, [view, position]);
+
+  useEffect(() => {
+    let index = canvasIndex;
+    if (view === 'book') index = Math.ceil(index / 2);
+    // Only scroll if the index is valid
+    if (gridRef.current && index >= 0 && index < canvasGroupings.length) {
+      // For horizontal Grid, scroll to column; for vertical List, scroll to row
+      if (position === 'far-bottom') {
+        // react-window Grid API in v2
+        gridRef.current.scrollToCell({
+          columnIndex: index,
+          rowIndex: 0,
+          columnAlign: 'center',
+          rowAlign: 'center',
+        });
+      } else {
+        // react-window List API in v2
+        gridRef.current.scrollToRow({ index, align: 'center' });
+      }
+    }
+  }, [canvasIndex, view, canvasGroupings.length, position]);
+
+  // Prevent loss of focus when navigating thumbnails
+  const paperRef = useRef(null);
+
+  useEffect(() => {
+    if (paperRef.current && document.activeElement !== paperRef.current) {
+      // This effect runs on mount too (not just keyboard navigation)
+      // Without preventScroll, the browser scrolls this element into view
+      // Inside an iframe embed, that scrolls the whole outer page down to the viewer
+      paperRef.current.focus({ preventScroll: true });
+    }
+  }, [canvasIndex]);
+
+  /** */
+  const handleKeyDown = (e) => {
+    let nextKey = 'ArrowRight';
+    let previousKey = 'ArrowLeft';
+    if (position === 'far-right') {
+      nextKey = 'ArrowDown';
+      previousKey = 'ArrowUp';
+    }
+    switch (e.key) {
+      case nextKey:
+        nextCanvas();
+        break;
+      case previousKey:
+        previousCanvas();
+        break;
+      default:
+        break;
+    }
+  };
+
+  /**
+   * When on bottom, column width
+   */
+  const calculateScaledWidth = (index) => {
+    const canvases = canvasGroupings[index];
+    if (!canvases) return thumbnailNavigation.width + spacing;
+
+    const world = canvasWorlds.get(canvases);
+    const bounds = world.worldBounds();
+    // calculate the correct canvas width based on the height + aspect ratio.
+    const availableHeight = thumbnailNavigation.height - spacing - scrollbarSize;
+    const calc = Math.ceil((availableHeight * bounds[2]) / bounds[3]);
+
+    if (!Number.isInteger(calc)) return thumbnailNavigation.width + spacing;
+    return calc + spacing;
+  };
+
+  /**
+   * When on right, row height
+   */
+  const calculateScaledHeight = (index) => {
+    const canvases = canvasGroupings[index];
+    if (!canvases) return thumbnailNavigation.height + spacing;
+
+    const world = canvasWorlds.get(canvases);
+    const bounds = world.worldBounds();
+
+    // calculate the correct canvas height based on the aspect ratio + width.
+    const availableWidth = thumbnailNavigation.width - spacing - scrollbarSize;
+    const calc = Math.ceil((availableWidth * canvases.length * bounds[3]) / bounds[2]);
+
+    if (!Number.isInteger(calc)) return thumbnailNavigation.height + spacing;
+    // Guard against incredibly small thumbnails
+    return Math.max(calc, Math.round(thumbnailNavigation.height / 3)) + spacing;
+  };
+
+  /** */
+  const style = useCallback(() => {
+    const width = view === 'book' ? thumbnailNavigation.width * 2 : thumbnailNavigation.width;
+
+    switch (position) {
+      case 'far-right':
+        return {
+          width: `${width}px`,
+        };
+      // Default case bottom
+      default:
+        return {
+          width: '100%',
+        };
+    }
+  }, [position, thumbnailNavigation, view]);
+
+  /**
+   */
+  const nextCanvas = () => {
+    if (hasNextCanvas) setNextCanvas();
+  };
+
+  /**
+   */
+  const previousCanvas = () => {
+    if (hasPreviousCanvas) setPreviousCanvas();
+  };
+
+  if (position === 'off') {
+    return null;
+  }
+  const htmlDir = viewingDirection === 'right-to-left' ? 'rtl' : 'ltr';
+  const itemData = {
+    canvasGroupings,
+    position,
+    windowId,
+  };
+
+  return (
+    <Paper
+      className={classNames(ns('thumb-navigation'))}
+      sx={{
+        '&:focus': {
+          boxShadow: 0,
+          outline: 0,
+        },
+        scrollbarGutter: 'stable',
+      }}
+      aria-label={t('thumbnailNavigation')}
+      square
+      elevation={0}
+      style={style()}
+      tabIndex={0}
+      onKeyDown={handleKeyDown}
+      ref={paperRef}
+    >
+      {canvasGroupings.length > 0 && position === 'far-bottom' && (
+        <Grid
+          columnCount={canvasGroupings.length}
+          columnWidth={calculateScaledWidth}
+          rowCount={1}
+          rowHeight={thumbnailNavigation.height - spacing - scrollbarSize}
+          style={{
+            direction: htmlDir === 'rtl' ? 'rtl' : 'ltr',
+            height: thumbnailNavigation.height,
+          }}
+          cellProps={itemData}
+          gridRef={gridRef}
+          cellComponent={ThumbnailCanvasGrouping}
+        />
+      )}
+      {canvasGroupings.length > 0 && position === 'far-right' && (
+        <List
+          defaultHeight={100}
+          rowCount={canvasGroupings.length}
+          rowHeight={calculateScaledHeight}
+          style={{
+            paddingBottom: spacing,
+            direction: htmlDir === 'rtl' ? 'rtl' : 'ltr',
+          }}
+          rowProps={itemData}
+          listRef={gridRef}
+          rowComponent={ThumbnailCanvasGrouping}
+        />
+      )}
+    </Paper>
+  );
+}
+
+ThumbnailNavigation.propTypes = {
+  canvasGroupings: PropTypes.array.isRequired,
+  canvasIndex: PropTypes.number.isRequired,
+  hasNextCanvas: PropTypes.bool,
+  hasPreviousCanvas: PropTypes.bool,
+  position: PropTypes.string.isRequired,
+  setNextCanvas: PropTypes.func,
+  setPreviousCanvas: PropTypes.func,
+  thumbnailNavigation: PropTypes.object.isRequired,
+  view: PropTypes.string,
+  viewingDirection: PropTypes.string,
+  windowId: PropTypes.string.isRequired,
+};

package/src/components/VideoViewer.jsx

@@ -0,0 +1,35 @@
+import PropTypes from 'prop-types';
+import { styled } from '@mui/material/styles';
+
+const StyledContainer = styled('div')(() => ({
+  alignItems: 'center',
+  display: 'flex',
+  width: '100%',
+}));
+
+const StyledVideo = styled('video')(() => ({
+  maxHeight: '100%',
+  width: '100%',
+}));
+
+/** */
+export function VideoViewer({ captions = [], videoOptions = {}, videoResources = [] }) {
+  return (
+    <StyledContainer>
+      <StyledVideo {...videoOptions}>
+        {videoResources.map((video) => (
+          <source key={video.io} src={video.id} type={video.getFormat()} />
+        ))}
+        {captions.map((caption) => (
+          <track key={caption.id} src={caption.id} label={caption.getDefaultLabel()} srcLang={caption.getProperty('language')} />
+        ))}
+      </StyledVideo>
+    </StyledContainer>
+  );
+}
+
+VideoViewer.propTypes = {
+  captions: PropTypes.arrayOf(PropTypes.object),
+  videoOptions: PropTypes.object,
+  videoResources: PropTypes.arrayOf(PropTypes.object),
+};

package/src/components/ViewerInfo.jsx

@@ -0,0 +1,55 @@
+import Typography from '@mui/material/Typography';
+import PropTypes from 'prop-types';
+import { styled } from '@mui/material/styles';
+import classNames from 'classnames';
+import { useTranslation } from 'react-i18next';
+import ns from '../config/css-ns';
+
+const StyledOsdInfo = styled('div')(({ theme }) => ({
+  overflow: 'hidden',
+  boxSizing: 'border-box',
+  paddingBottom: 0.5,
+  paddingLeft: theme.spacing(2),
+  paddingRight: theme.spacing(2),
+  textOverflow: 'ellipsis',
+  unicodeBidi: 'plaintext',
+  whiteSpace: 'nowrap',
+  width: '100%',
+}));
+
+/**
+ *
+ */
+export function ViewerInfo({ canvasCount, canvasIndex, canvasLabel = undefined }) {
+  const { t } = useTranslation();
+  return (
+    <StyledOsdInfo className={classNames(ns('osd-info'))}>
+      <Typography
+        variant="caption"
+        className={ns('canvas-count')}
+        role="status"
+        sx={{
+          display: 'inline',
+        }}
+      >
+        {t('pagination', { current: canvasIndex + 1, total: canvasCount })}
+      </Typography>
+      <Typography
+        variant="caption"
+        className={ns('canvas-label')}
+        role="status"
+        sx={{
+          display: 'inline',
+        }}
+      >
+        {canvasLabel && ` • ${canvasLabel}`}
+      </Typography>
+    </StyledOsdInfo>
+  );
+}
+
+ViewerInfo.propTypes = {
+  canvasCount: PropTypes.number.isRequired,
+  canvasIndex: PropTypes.number.isRequired,
+  canvasLabel: PropTypes.string,
+};

package/src/components/ViewerNavigation.jsx

@@ -0,0 +1,72 @@
+import NavigationIcon from '@mui/icons-material/PlayCircleOutlineSharp';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { useTranslation } from 'react-i18next';
+import MiradorMenuButton from '../containers/MiradorMenuButton';
+import ns from '../config/css-ns';
+
+/**
+ */
+export function ViewerNavigation({
+  hasNextCanvas = false,
+  hasPreviousCanvas = false,
+  setNextCanvas = () => {},
+  setPreviousCanvas = () => {},
+  viewingDirection = '',
+}) {
+  const { t } = useTranslation();
+  let htmlDir = 'ltr';
+  let previousIconStyle;
+  let nextIconStyle;
+  switch (viewingDirection) {
+    case 'top-to-bottom':
+      previousIconStyle = { transform: 'rotate(270deg)' };
+      nextIconStyle = { transform: 'rotate(90deg)' };
+      break;
+    case 'bottom-to-top':
+      previousIconStyle = { transform: 'rotate(90deg)' };
+      nextIconStyle = { transform: 'rotate(270deg)' };
+      break;
+    case 'right-to-left':
+      htmlDir = 'rtl';
+      previousIconStyle = {};
+      nextIconStyle = { transform: 'rotate(180deg)' };
+      break;
+    default:
+      previousIconStyle = { transform: 'rotate(180deg)' };
+      nextIconStyle = {};
+  }
+
+  return (
+    <div className={classNames(ns('osd-navigation'))} dir={htmlDir}>
+      <MiradorMenuButton
+        aria-label={t('previousCanvas')}
+        className={ns('previous-canvas-button')}
+        disabled={!hasPreviousCanvas}
+        onClick={() => {
+          hasPreviousCanvas && setPreviousCanvas();
+        }}
+      >
+        <NavigationIcon style={previousIconStyle} />
+      </MiradorMenuButton>
+      <MiradorMenuButton
+        aria-label={t('nextCanvas')}
+        className={ns('next-canvas-button')}
+        disabled={!hasNextCanvas}
+        onClick={() => {
+          hasNextCanvas && setNextCanvas();
+        }}
+      >
+        <NavigationIcon style={nextIconStyle} />
+      </MiradorMenuButton>
+    </div>
+  );
+}
+
+ViewerNavigation.propTypes = {
+  hasNextCanvas: PropTypes.bool,
+  hasPreviousCanvas: PropTypes.bool,
+  setNextCanvas: PropTypes.func,
+  setPreviousCanvas: PropTypes.func,
+  viewingDirection: PropTypes.string,
+};