ProjectMirador · cbeer · Jan 9, 2024 · Jan 10, 2024 · Jan 11, 2024 · Feb 1, 2024
diff --git a/__tests__/fixtures/version-2/i18n.json b/__tests__/fixtures/version-2/i18n.json
diff --git a/__tests__/integration/mirador/i18n.html b/__tests__/integration/mirador/i18n.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="theme-color" content="#000000">
+    <title>Mirador</title>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
+  </head>
+  <body>
+    <div id="mirador" style="position: absolute; top: 0; bottom: 0; left: 0; right: 0;"></div>
+    <script>document.write("<script type='text/javascript' src='../../../dist/mirador.min.js?v=" + Date.now() + "'><\/script>");</script>
+    <script type="text/javascript">
+     var baseUrl = window.location.href.substring(
+       0, window.location.href.indexOf(window.location.pathname));
+     var miradorInstance = Mirador.viewer({
+       id: 'mirador',
+       language: 'de',
+       theme: {
+         transitions: window.location.port === '4488' ?  { create: () => 'none' } : {},
+       },
+       windows: [{
+         manifestId: window. window.location.port
+          ? `${baseUrl}/version-2/i18n.json`
+          : `${baseUrl}/__tests__/fixtures/version-2/i18n.json`,
+         thumbnailNavigationPosition: 'far-bottom',
+         showLocalePicker: true,
+       }],
+       catalog: [
+         { manifestId: 'https://iiif.bodleian.ox.ac.uk/iiif/manifest/e32a277e-91e2-4a6d-8ba6-cc4bad230410.json' },
+         { manifestId: 'https://iiif.harvardartmuseums.org/manifests/object/299843' },
+         { manifestId: "https://media.nga.gov/public/manifests/nga_highlights.json", provider: "National Gallery of Art"},
+         { manifestId: "https://data.ucd.ie/api/img/manifests/ucdlib:33064", provider: "Irish Architectural Archive"},
+         { manifestId: "https://wellcomelibrary.org/iiif/b18035723/manifest", provider: "Wellcome Library"},
+         { manifestId: "https://demos.biblissima.fr/iiif/metadata/florus-dispersus/manifest.json", provider: "Biblissima"},
+         { manifestId: "https://www.e-codices.unifr.ch/metadata/iiif/gau-Fragment/manifest.json", provider: "e-codices - Virtual Manuscript Library of Switzerland"},
+         { manifestId: "https://wellcomelibrary.org/iiif/collection/b18031511", provider: "Wellcome Library"},
+         { manifestId: "https://gallica.bnf.fr/iiif/ark:/12148/btv1b10022508f/manifest.json", provider: "Bibliothèque nationale de France"},
+         { manifestId: "https://manifests.britishart.yale.edu/Osbornfa1", provider: "Beinecke Rare Book and Manuscript Library, Yale University"},
+         { manifestId: "https://iiif.biblissima.fr/chateauroux/B360446201_MS0005/manifest.json", provider: "Biblissima"},
+         { manifestId: "https://iiif.durham.ac.uk/manifests/trifle/32150/t1/m4/q7/t1m4q77fr328/manifest", provider: "Durham University Library"},
+         //{ manifestId: "https://iiif.vam.ac.uk/collections/O1023003/manifest.json", provider: "Ocean liners"},
+         { manifestId: "https://zavicajna.digitalna.rs/iiif/iiif/api/presentation/2/4aa44ad1-0b74-4590-ab09-534a38cb7c53%252F00000001%252Fostalo01%252F00000012/manifest", provider: "Библиотека 'Милутин Бојић'"},
+       ]
+     });
+    </script>
+  </body>
+</html>
diff --git a/__tests__/src/components/GalleryViewThumbnail.test.js b/__tests__/src/components/GalleryViewThumbnail.test.js
@@ -73,6 +73,7 @@ describe('GalleryView', () => {
   describe('on-demand annotation fetching', () => {
     const canvas = {
       getHeight: () => 50,
+      getLabel: () => ({ getValue: () => 'label' }),
       getServices: jest.fn(),
       getThumbnail: jest.fn(),
       getType: jest.fn(),

diff --git a/__tests__/src/components/LocalePicker.test.js b/__tests__/src/components/LocalePicker.test.js
@@ -9,8 +9,10 @@ function createWrapper(props) {
   return render(
     <LocalePicker
       availableLocales={[]}
+      languages={[{ current: true, label: 'English', locale: 'en' }, { current: false, label: 'Deutsch', locale: 'de' }]}
       locale={undefined}
       setLocale={() => {}}
+      t={k => k}
       {...props}
     />,
   );
@@ -27,7 +29,7 @@ describe('LocalePicker', () => {
     createWrapper({ availableLocales: ['en', 'de'], locale: 'de' });
     // The option to expand the dropdown menu is rendered by a CompanionWindow titleControls prop in WindowSideBarInfoPanel, which is a combobox
     const dropdownTitle = screen.getByRole('combobox');
-    expect(dropdownTitle).toHaveTextContent('de');
+    expect(dropdownTitle).toHaveTextContent('Deutsch');
   });
 
   it('renders a select with both options and sets the current value', async () => {
@@ -41,10 +43,10 @@ describe('LocalePicker', () => {
     // Assert that the menu element has 2 children (2 options)
     expect(menu.children).toHaveLength(2); // eslint-disable-line testing-library/no-node-access
     // Verify that the select element has the correct value ('de')
-    const deOption = screen.getByRole('option', { name: 'de' });
+    const deOption = screen.getByRole('option', { name: 'Deutsch' });
     expect(deOption).toHaveAttribute('aria-selected', 'true');
     // Verify en is also an option
-    expect(screen.getByRole('option', { name: 'en' })).toBeInTheDocument();
+    expect(screen.getByRole('option', { name: 'English' })).toBeInTheDocument();
   });
 
   it('triggers setLocale prop when clicking a list item', async () => {
@@ -59,7 +61,7 @@ describe('LocalePicker', () => {
     // Open the Select component
     await user.click(dropdownTitle);
     // Change the locale to 'de'
-    await user.click(screen.getByRole('option', { name: 'de' }));
+    await user.click(screen.getByRole('option', { name: 'Deutsch' }));
     expect(setLocale).toHaveBeenCalledTimes(1);
     expect(setLocale).toHaveBeenCalledWith('de');
   });

diff --git a/__tests__/src/components/WindowSideBarCanvasPanel.test.js b/__tests__/src/components/WindowSideBarCanvasPanel.test.js
@@ -13,8 +13,10 @@ function createWrapper(props) {
   let sequences;
 
   if (props.multipleSequences) {
-    sequences = [{ id: 'a', label: 'seq1' },
-      { id: 'b', label: 'seq2' }];
+    sequences = [
+      { getLabel: () => ({ getValue: () => undefined }), id: 'a', label: 'seq1' },
+      { getLabel: () => ({ getValue: () => undefined }), id: 'b', label: 'seq2' },
+    ];
   } else {
     sequences = Utils.parseManifest(manifestJson).getSequences();
   }

diff --git a/__tests__/src/selectors/manifests.test.js b/__tests__/src/selectors/manifests.test.js
@@ -59,12 +59,6 @@ describe('getManifestoInstance', () => {
     const received = getManifestoInstance(state, { manifestId: 'x' });
     expect(received.id).toEqual('http://iiif.io/api/presentation/2.1/example/fixtures/19/manifest.json');
   });
-  it('is cached based off of input props', () => {
-    const state = { manifests: { x: { json: manifestFixture019 } } };
-    const received = getManifestoInstance(state, { manifestId: 'x' });
-    expect(getManifestoInstance(state, { manifestId: 'x' })).toBe(received);
-    expect(getManifestoInstance(state, { manifestId: 'x', windowId: 'y' })).not.toBe(received);
-  });
 });
 
 describe('getManifestLogo()', () => {

diff --git a/src/components/AppProviders.js b/src/components/AppProviders.js
@@ -14,6 +14,7 @@ import { CacheProvider } from '@emotion/react';
 import createCache from '@emotion/cache';
 import createI18nInstance from '../i18n';
 import FullScreenContext from '../contexts/FullScreenContext';
+import LocaleContext from '../contexts/LocaleContext';
 
 /**
  * Allow applications to opt-out of (or provide their own) drag and drop context
@@ -76,9 +77,8 @@ export class AppProviders extends Component {
   constructor(props) {
     super(props);
 
-    this.i18n = createI18nInstance();
     // Set i18n language
-    this.i18n.changeLanguage(props.language);
+    this.i18n = createI18nInstance({ lng: props.language });
   }
 
   /**
@@ -95,6 +95,7 @@ export class AppProviders extends Component {
   render() {
     const {
       children,
+      language,
       theme, translations,
       dndManager,
     } = this.props;
@@ -122,13 +123,15 @@ export class AppProviders extends Component {
       <FullScreenShim>
         <I18nextProvider i18n={this.i18n}>
           <StyledEngineProvider injectFirst>
-            <CacheProvider value={theme.direction === 'rtl' ? cacheRtl : cacheDefault}>
-              <ThemeProvider theme={createTheme((theme))}>
-                <MaybeDndProvider dndManager={dndManager}>
-                  {children}
-                </MaybeDndProvider>
-              </ThemeProvider>
-            </CacheProvider>
+            <LocaleContext.Provider value={language}>
+              <CacheProvider value={theme.direction === 'rtl' ? cacheRtl : cacheDefault}>
+                <ThemeProvider theme={createTheme((theme))}>
+                  <MaybeDndProvider dndManager={dndManager}>
+                    {children}
+                  </MaybeDndProvider>
+                </ThemeProvider>
+              </CacheProvider>
+            </LocaleContext.Provider>
           </StyledEngineProvider>
         </I18nextProvider>
       </FullScreenShim>

diff --git a/src/components/CanvasLayers.js b/src/components/CanvasLayers.js
@@ -17,6 +17,7 @@ import Typography from '@mui/material/Typography';
 import { DragDropContext, Droppable, Draggable } from '@hello-pangea/dnd';
 import MiradorMenuButton from '../containers/MiradorMenuButton';
 import IIIFThumbnail from '../containers/IIIFThumbnail';
+import { IIIFResourceLabel } from './IIIFResourceLabel';
 
 const StyledDragHandle = styled('div')(({ theme }) => ({
   alignItems: 'center',
@@ -42,15 +43,6 @@ const reorder = (list, startIndex, endIndex) => {
 
 /** */
 export class CanvasLayers extends Component {
-  /** */
-  static getUseableLabel(resource, index) {
-    return (resource
-      && resource.getLabel
-      && resource.getLabel().length > 0)
-      ? resource.getLabel().getValue()
-      : String(index + 1);
-  }
-
   /** */
   constructor(props) {
     super(props);
@@ -157,7 +149,7 @@ export class CanvasLayers extends Component {
             component="div"
             variant="body1"
           >
-            {CanvasLayers.getUseableLabel(resource, index)}
+            <IIIFResourceLabel resource={resource} fallback={index + 1} />
             <div>
               <MiradorMenuButton aria-label={t(layer.visibility ? 'layer_hide' : 'layer_show')} edge="start" size="small" onClick={() => { this.setLayerVisibility(resource.id, !layer.visibility); }}>
                 { layer.visibility ? <VisibilityIcon /> : <VisibilityOffIcon /> }

diff --git a/src/components/CollectionDialog.js b/src/components/CollectionDialog.js
@@ -19,6 +19,7 @@ import { LabelValueMetadata } from './LabelValueMetadata';
 import CollapsibleSection from '../containers/CollapsibleSection';
 import ScrollIndicatedDialogContent from '../containers/ScrollIndicatedDialogContent';
 import ManifestInfo from '../containers/ManifestInfo';
+import { IIIFResourceLabel } from './IIIFResourceLabel';
 
 const StyledScrollIndicatedDialogContent = styled(ScrollIndicatedDialogContent)(() => ({
   padding: (theme) => theme.spacing(1),
@@ -40,15 +41,6 @@ const StyledCollectionFilter = styled('div')(() => ({
  * a dialog providing the possibility to select the collection
  */
 export class CollectionDialog extends Component {
-  /** */
-  static getUseableLabel(resource, index) {
-    return (resource
-      && resource.getLabel
-      && resource.getLabel().length > 0)
-      ? resource.getLabel().getValue()
-      : String(index + 1);
-  }
-
   /** */
   constructor(props) {
     super(props);
@@ -190,7 +182,7 @@ export class CollectionDialog extends Component {
             { t(isMultipart ? 'multipartCollection' : 'collection') }
           </Typography>
           <Typography component="div" variant="h3">
-            {CollectionDialog.getUseableLabel(manifest)}
+            <IIIFResourceLabel resource={manifest} />
           </Typography>
         </DialogTitle>
         <StyledScrollIndicatedDialogContent>
@@ -199,7 +191,7 @@ export class CollectionDialog extends Component {
               startIcon={<ArrowBackIcon />}
               onClick={() => this.goToPreviousCollection()}
             >
-              {CollectionDialog.getUseableLabel(collection)}
+              <IIIFResourceLabel resource={collection} />
             </Button>
           )}
 
@@ -245,7 +237,7 @@ export class CollectionDialog extends Component {
                     onClick={() => { this.selectCollection(c); }}
                     variant="multiline"
                   >
-                    {CollectionDialog.getUseableLabel(c)}
+                    <IIIFResourceLabel resource={c} />
                   </MenuItem>
                 ))
               }
@@ -260,7 +252,7 @@ export class CollectionDialog extends Component {
                     onClick={() => { this.selectManifest(m); }}
                     variant="multiline"
                   >
-                    {CollectionDialog.getUseableLabel(m)}
+                    <IIIFResourceLabel resource={m} />
                   </MenuItem>
                 ))
               }