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

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