Switching to only Elasticsearch

app/components/FeaturedMedium.tsx

@@ -1,19 +1,16 @@
+import type { ESPlace } from "~/esTypes";
 import VideoEmbed from "./VideoEmbed";
-import type { TRelatedCoreDataRecords } from "~/types";
 
 interface Props {
-  record: TRelatedCoreDataRecords;
+  record: ESPlace;
 }
 
 const FeaturedMedium = ({ record }: Props) => {
-  if (!record.items || !record.media_contents) return null;
-  if (record.items?.videos) {
-    return <VideoEmbed video={record.items.videos[0]} />;
+  if (record.featured_video) {
+    return <VideoEmbed video={record.featured_video} />;
   }
-  if (record.media_contents?.photographs) {
-    return (
-      <img src={record.media_contents.photographs[0].content_url} alt="" />
-    );
+  if (record.featured_photograph) {
+    return <img src={record.featured_photograph} alt="" />;
   }
   return <></>;
 };

app/components/VideoEmbed.tsx

@@ -1,32 +1,16 @@
-import { useMemo, useState } from "react";
-import type { TVideoItem } from "../types";
+import type { ESVideo } from "~/esTypes";
 
 interface Props {
-  video: TVideoItem;
+  video: ESVideo;
 }
 
 const VideoEmbed = ({ video }: Props) => {
-  const [embedSrc, setEmbedSrc] = useState<string | undefined>(undefined);
-
-  useMemo(() => {
-    switch (video.provider) {
-      case "Vimeo":
-        setEmbedSrc(`https://player.vimeo.com/video/${video.embed_id}`);
-        break;
-      case "YouTube":
-        setEmbedSrc(`https://www.youtube.com/embed/${video.embed_id}`);
-      default:
-        break;
-    }
-    return;
-  }, [video]);
-
   return (
     <div className="relative pb-[56.25%] h-0 overflow-hidden max-w-full">
       <iframe
         className="absolute t-0 l-0 h-full w-full"
-        src={embedSrc}
-        title={video.source_titles.find((t) => t.primary)?.name.name}
+        src={video.embed_url}
+        title={video.name}
         allowFullScreen
       />
     </div>

app/components/VideoModal.tsx

@@ -9,13 +9,12 @@ import {
 } from "@headlessui/react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faCircleXmark } from "@fortawesome/free-solid-svg-icons";
-import VideoEmbed from "./VideoEmbed";
-import type { TVideoItem } from "~/types";
 import type { ReactNode } from "react";
+import type { ESVideo } from "~/esTypes";
 
 interface Props {
   children: ReactNode;
-  video: TVideoItem;
+  video: ESVideo;
 }
 
 const VideoModal = ({ children, video }: Props) => {
@@ -47,14 +46,21 @@ const VideoModal = ({ children, video }: Props) => {
                 <DialogPanel className="w-full max-w-md md:max-w-4xl rounded-xl bg-white p-6">
                   <DialogTitle as="div" className="flex justify-between">
                     <h3 className="text-base/7 font-medium text-black">
-                      {video.primary_name.name.name}
+                      {video.name}
                     </h3>
 
                     <Button onClick={close}>
                       <FontAwesomeIcon icon={faCircleXmark} /> Close
                     </Button>
                   </DialogTitle>
-                  <VideoEmbed video={video} />
+                  <div className="relative pb-[56.25%] h-0 overflow-hidden max-w-full">
+                    <iframe
+                      className="absolute t-0 l-0 h-full w-full"
+                      src={video.embed_url}
+                      title={video.name}
+                      allowFullScreen
+                    />
+                  </div>
                 </DialogPanel>
               </TransitionChild>
             </div>

app/components/VideoThumbnail.tsx

@@ -1,34 +1,14 @@
-import { useMemo, useState } from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faPlayCircle } from "@fortawesome/free-solid-svg-icons";
-import type { TVideoItem } from "../types";
+import type { ESVideo } from "~/esTypes";
 
 interface Props {
-  video: TVideoItem;
+  video: ESVideo;
   imgClassName?: string;
   figClassName?: string;
 }
 
 const VideoThumbnail = ({ video, imgClassName, figClassName }: Props) => {
-  const [thumbnailSrc, setThumbnailSrc] = useState<string | undefined>(
-    undefined,
-  );
-
-  useMemo(() => {
-    switch (video.provider) {
-      case "Vimeo":
-        setThumbnailSrc(`https://vumbnail.com/${video.embed_id}.jpg`);
-        break;
-      case "YouTube":
-        setThumbnailSrc(
-          `https://img.youtube.com/vi/${video.embed_id}/hqdefault.jpg`,
-        );
-      default:
-        break;
-    }
-    return;
-  }, [video]);
-
   return (
     <figure className={`${figClassName ?? ""}`}>
       <div className="relative">
@@ -38,11 +18,13 @@ const VideoThumbnail = ({ video, imgClassName, figClassName }: Props) => {
             className="drop-shadow-2xl opacity-80"
           />
         </span>
-        <img className={`${imgClassName ?? ""}`} src={thumbnailSrc} alt="" />
+        <img
+          className={`${imgClassName ?? ""}`}
+          src={video.thumbnail_url}
+          alt=""
+        />
       </div>
-      <figcaption className="md:w-32 text-left">
-        {video.source_titles.find((t) => t.primary)?.name.name}
-      </figcaption>
+      <figcaption className="md:w-32 text-left">{video.name}</figcaption>
     </figure>
   );
 };

app/components/layout/PlaceContent.tsx

@@ -1,4 +1,5 @@
 import type { ReactNode } from "react";
+import RelatedRecords from "./RelatedRecords";
 
 interface Props {
   children: ReactNode;
@@ -8,6 +9,7 @@ const PlaceContent = ({ children }: Props) => {
   return (
     <div className="w-full md:w-1/2 lg:w-2/5 overflow-scroll pb-32">
       <div className="flex flex-col">{children}</div>
+      <RelatedRecords />
     </div>
   );
 };

app/components/layout/RelatedRecords.tsx

@@ -5,29 +5,20 @@ import RelatedVideos from "../relatedRecords/RelatedVideos";
 import RelatedPhotographs from "../relatedRecords/RelatedPhotographs";
 import RelatedMapLayers from "../relatedRecords/RelatedMapLayers";
 import RelatedTopoQuads from "../relatedRecords/RelatedTopoQuads";
-import type { TRelatedCoreDataRecords } from "~/types";
 
-interface Props {
-  related: TRelatedCoreDataRecords;
-}
-
-const RelatedRecords = ({ related }: Props) => {
-  const { place } = useContext(PlaceContext);
+const RelatedRecords = () => {
+  const { place, manifestLabel } = useContext(PlaceContext);
   return (
     <>
-      {related.places?.relatedPlaces && (
-        <RelatedPlaces places={related.places.relatedPlaces} />
-      )}
-      {related.items?.videos && <RelatedVideos videos={related.items.videos} />}
-      {related.media_contents?.photographs && (
-        <RelatedPhotographs manifest={place.iiif_manifest} />
-      )}
-      {related.places?.mapLayers && (
-        <RelatedMapLayers layers={related.places.mapLayers} />
-      )}
-      {related.places?.topoQuads && (
-        <RelatedTopoQuads quads={related.places.topoQuads} />
-      )}
+      <RelatedPlaces />
+      <RelatedVideos />
+      <RelatedPhotographs
+        manifest={place.manifests.find(
+          (manifest) => manifest.label === manifestLabel
+        )}
+      />
+      {/* <RelatedMapLayers layers={place.places.mapLayers} />
+      <RelatedTopoQuads quads={place.places.topoQuads} /> */}
     </>
   );
 };

app/components/relatedRecords/RelatedPhotographs.tsx

@@ -2,9 +2,10 @@ import { useEffect, useState } from "react";
 import RelatedSection from "./RelatedSection";
 import PhotographModal from "../PhotographModal";
 import type { TIIIFManifest, TIIIFBody, TPhotograph } from "~/types";
+import type { ESManifests } from "~/esTypes";
 
 interface Props {
-  manifest: string;
+  manifest?: ESManifests;
 }
 
 const RelatedPhotographs = ({ manifest }: Props) => {
@@ -13,7 +14,8 @@ const RelatedPhotographs = ({ manifest }: Props) => {
 
   useEffect(() => {
     const fetchIIIF = async () => {
-      const response = await fetch(manifest);
+      if (!manifest) return;
+      const response = await fetch(manifest.identifier);
       const data: TIIIFManifest = await response.json();
       setPhotographs(
         data.items.map((item) => {
@@ -23,7 +25,7 @@ const RelatedPhotographs = ({ manifest }: Props) => {
             body: item.items[0].items[0].body,
             name: item.label.en[0],
           };
-        }),
+        })
       );
     };
     fetchIIIF();
@@ -34,39 +36,43 @@ const RelatedPhotographs = ({ manifest }: Props) => {
     setActivePhotograph(photographs[0].body);
   }, [photographs]);
 
-  return (
-    <RelatedSection title="Photographs">
-      <div className="flex flex-wrap justify-around md:justify-start">
-        {photographs && (
-          <>
-            {photographs.map((photo) => {
-              return (
-                <PhotographModal
-                  key={photo.thumb}
-                  activePhotograph={activePhotograph}
-                  photographs={photographs}
-                  setActivePhotograph={setActivePhotograph}
-                  photograph={photo}
-                >
-                  <figure className="md:my-8 md:mr-8 max-w-xs">
-                    <img
-                      src={photo.thumb}
-                      alt=""
-                      className="drop-shadow-md h-auto md:h-32 w-full md:w-auto m-auto"
-                    />
-                    <span className="sr-only">Select image</span>
-                    {/* <figcaption className="md:w-32 text-left break-words text-sm pt-1">
-                      {photo.name}
-                    </figcaption> */}
-                  </figure>
-                </PhotographModal>
-              );
-            })}
-          </>
-        )}
-      </div>
-    </RelatedSection>
-  );
+  if (photographs) {
+    return (
+      <RelatedSection title="Photographs">
+        <div className="flex flex-wrap justify-around md:justify-start">
+          {photographs && (
+            <>
+              {photographs.map((photo) => {
+                return (
+                  <PhotographModal
+                    key={photo.name}
+                    activePhotograph={activePhotograph}
+                    photographs={photographs}
+                    setActivePhotograph={setActivePhotograph}
+                    photograph={photo}
+                  >
+                    <figure className="md:my-8 md:mr-8 max-w-xs">
+                      <img
+                        src={photo.thumb}
+                        alt=""
+                        className="drop-shadow-md h-auto md:h-32 w-full md:w-auto m-auto"
+                      />
+                      <span className="sr-only">Select image</span>
+                      {/* <figcaption className="md:w-32 text-left break-words text-sm pt-1">
+                        {photo.name}
+                      </figcaption> */}
+                    </figure>
+                  </PhotographModal>
+                );
+              })}
+            </>
+          )}
+        </div>
+      </RelatedSection>
+    );
+  }
+
+  return null;
 };
 
 export default RelatedPhotographs;