Add 3D/2D view

cypress/e2e/integration/archive_media_views.cy.js

@@ -42,9 +42,9 @@ describe("archive_media_views: Archive kaltura embed", () => {
 describe("archive_media_views: Archive pdf embed", () => {
   it("renders pdf file inside canvas", () => {
     cy.visit("http://localhost:3000/archive/m92xyh34").wait(1000);
-    cy.get("#item-media-col > canvas", { timeout: 20000 })
+    cy.get("#item-media-col > object", { timeout: 20000 })
       .eq(0)
-      .should("have.id", "pdf-canvas")
+      .should("have.id", "pdf-object")
       .should("be.visible");
   });
 });
@@ -64,18 +64,18 @@ describe("archive_media_views: Archive Mirador viewer", () => {
   });
 });
 
-describe('archive_media_views: Archive Minerva viewer', () => {
-  it('renders viewer if exhibit.json', () => {
-    cy.visit('/archive/s253n52s').wait(2000);
-    cy.get('div#minerva-open-dialog')
+describe("archive_media_views: Archive Minerva viewer", () => {
+  it("renders viewer if exhibit.json", () => {
+    cy.visit("/archive/s253n52s").wait(2000);
+    cy.get("div#minerva-open-dialog")
       .eq(0)
-      .should('be.visible')
-      .should('contain', "This record type requires a full screen image viewer.")
-    cy.get('div#minerva-open-dialog > button')
-      .click({force: true})
-    cy.get("div.minerva-root")
-      .eq(0)
-      .should('be.visible')
+      .should("be.visible")
+      .should(
+        "contain",
+        "This record type requires a full screen image viewer."
+      );
+    cy.get("div#minerva-open-dialog > button").click({ force: true });
+    cy.get("div.minerva-root").eq(0).should("be.visible");
   });
 });
 

cypress/e2e/integration/language_config.cy.js

@@ -36,10 +36,7 @@ describe("language_config.spec: Selecting English loads English results", () =>
     cy.get("div.gallery-item > div.card > a").first().click({ force: true });
     cy.wait(2000);
     cy.url().should("include", "/archive/");
-    cy.get(
-      'div.details-section-metadata > table[aria-label="Item Metadata"] tbody',
-      { timeout: 5000 }
-    )
+    cy.get("div.details-section-metadata > table > tbody", { timeout: 5000 })
       .find("tr.language td a", { timeout: 5000 })
       .invoke("text")
       .should("equal", "English");

package.json

@@ -32,6 +32,7 @@
     "html-react-parser": "^3.0.15",
     "jquery": "^3.6.4",
     "js-levenshtein": "^1.1.6",
+    "leaflet": "^1.9.4",
     "minerva-browser": "^3.14.3",
     "mirador": "~3.3.0",
     "mocha": "^10.2.0",
@@ -48,6 +49,7 @@
     "react-fontawesome": "^1.7.1",
     "react-ga4": "^2.1.0",
     "react-helmet": "^6.1.0",
+    "react-leaflet": "^4.2.1",
     "react-modal": "^3.16.1",
     "react-quill": "^2.0.0",
     "react-router-dom": "^6.10.0",
@@ -105,14 +107,15 @@
     }
   },
   "devDependencies": {
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.4.3",
+    "@types/leaflet": "^1.9.12",
     "@types/react-helmet": "^6.1.6",
     "@types/react-modal": "^3.16.0",
     "@types/react-router-dom": "^5.3.3",
     "@types/uuid": "^9.0.1",
-    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "cypress": "^13.6.4",
     "cypress-localstorage-commands": "^2.2.2",
     "husky": "^3.1.0",

src/components/GitDetails.js

@@ -3,7 +3,6 @@ import "../css/GitDetails.scss";
 
 const GitDetails = () => {
   const gitCommit = process.env.REACT_APP_GIT_COMMIT;
-  console.log("GitDetails gitCommit", gitCommit);
   if (!gitCommit) {
     return null;
   }

src/components/LeafletThumb/LeafletThumb.tsx

@@ -0,0 +1,31 @@
+import { FC } from "react";
+
+import { Marker, MapContainer, Popup, TileLayer } from "react-leaflet";
+import "../../css/imports/leaflet.css";
+
+type Props = {
+  location: [number, number];
+  title: string;
+};
+
+export const LeafletThumb: FC<Props> = ({ location, title }) => {
+  if (!title || location?.length !== 2) return null;
+  return (
+    <>
+      <MapContainer
+        style={{ height: "100%", width: "100%" }}
+        center={location}
+        zoom={12}
+        scrollWheelZoom={false}
+      >
+        <TileLayer
+          attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+        />
+        <Marker position={location}>
+          <Popup>{title}</Popup>
+        </Marker>
+      </MapContainer>
+    </>
+  );
+};

src/components/LeafletThumb/index.ts

@@ -0,0 +1 @@
+export * from "./LeafletThumb";

src/components/MediaElement/MediaElement.tsx

@@ -10,7 +10,7 @@ import "../../css/podcastMediaElement.scss";
 
 type Props = {
   src: string | null;
-  mediaType: "audio" | "video";
+  mediaType: "generic" | "audio" | "video" | "iiif" | "3d_2diiif";
   site: {
     siteId: string;
   };

src/components/MediaElement/MediaPlayer.tsx

@@ -8,7 +8,7 @@ type Props = {
   width?: string;
   height?: string;
   preload?: string;
-  mediaType: "audio" | "video";
+  mediaType: "generic" | "audio" | "video" | "iiif" | "3d_2diiif";
   site: {
     siteId: string;
   };

src/components/MiradorViewer.js

@@ -59,7 +59,10 @@ class MiradorViewer extends Component {
   }
 
   componentDidUpdate(prevProps) {
-    if (this.props.item.manifest_url !== prevProps.item.manifest_url) {
+    if (
+      this.props.item.manifest_url !== prevProps.item.manifest_url ||
+      this.props.hidden !== prevProps.hidden
+    ) {
       Mirador.viewer(this.miradorConfig());
     }
   }
@@ -68,8 +71,21 @@ class MiradorViewer extends Component {
     Mirador.viewer(this.miradorConfig());
   }
 
+  wrapIf3D2D(miradorElement) {
+    const hidden = this.props.hidden ? "hidden" : "";
+    if (this.props.type === "3d_2diiif") {
+      return (
+        <div id="mirador-vis" className={hidden}>
+          {miradorElement}
+        </div>
+      );
+    } else {
+      return miradorElement;
+    }
+  }
+
   render() {
-    return <div id={this.miradorConfig().id}></div>;
+    return this.wrapIf3D2D(<div id={this.miradorConfig().id}></div>);
   }
 }