backend updates

mostly working?

add map w/ styles

comment--

toggle visibility. load 3d larger

fix mirador

it's reloading for now. It's fine

controls

resizing to fit. yay

still working on scaling

move leaflet css

tests and pdfs and such

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>);
   }
 }