Reword drawing scrollytell

app/components/figures/IIIFViewer.client.tsx

@@ -1,8 +1,9 @@
 import CloverImage from "@samvera/clover-iiif/image";
-import { useEffect, useState } from "react";
+import { useMemo, useState } from "react";
 import type { Options } from "openseadragon";
 import type { LabeledIIIFExternalWebResource } from "@samvera/clover-iiif/image";
 import type { TFigure } from "~/types/figureType";
+import { ClientOnly } from "remix-utils/client-only";
 
 const fetchTileSource = async (figure: TFigure) => {
   const response = await fetch(
@@ -27,32 +28,45 @@ const openSeadragonConfig: Options = {
 
 interface Props {
   figure: TFigure;
-  modalOpen: boolean;
+  modalOpen?: boolean;
+  openSeadragonOptions?: Options;
 }
 
-const IIIFViewer = ({ figure, modalOpen = true }: Props) => {
+const IIIFViewer = ({
+  figure,
+  modalOpen = true,
+  openSeadragonOptions = {},
+}: Props) => {
   const [tileSource, setTileSource] = useState<
     LabeledIIIFExternalWebResource | undefined
   >(undefined);
 
-  useEffect(() => {
+  useMemo(() => {
     if (figure) {
       const fetchSource = async () => {
         const result = await fetchTileSource(figure);
         setTileSource(result);
       };
       fetchSource();
     }
+    console.log("🚀 ~ figure:", figure);
   }, [figure]);
 
   if (tileSource && modalOpen) {
     return (
       <div className="h-full bg-offblack w-full aspect-[1.75]">
-        <CloverImage
-          body={tileSource}
-          isTiledImage
-          openSeadragonConfig={openSeadragonConfig}
-        />
+        <ClientOnly>
+          {() => (
+            <CloverImage
+              body={tileSource}
+              isTiledImage
+              openSeadragonConfig={{
+                ...openSeadragonConfig,
+                ...openSeadragonOptions,
+              }}
+            />
+          )}
+        </ClientOnly>
       </div>
     );
   }

app/components/shanawdithit/drawingScrollytell/DrawingScrollytell.tsx

@@ -0,0 +1,62 @@
+import { useContext, useRef, useState } from "react";
+import { ChapterContext } from "~/chapterContext";
+import ScrollytellWrapper from "~/components/ScrollytellWrapper";
+import type { TFigure } from "~/types/figureType";
+import type { ReactElement } from "react";
+import { ClientOnly } from "remix-utils/client-only";
+import IIIFViewer from "./IIIFViewer.client";
+
+interface Props {
+  figure: TFigure;
+  triggers: ReactElement[];
+}
+
+function SketchScrollytell({ figure, triggers }: Props) {
+  const { accentTextColor } = useContext(ChapterContext);
+  const [scrollProgress, setScrollProgress] = useState<number>(0.0);
+  const steps = useRef<HTMLDivElement>(null);
+
+  return (
+    <ScrollytellWrapper
+      setScrollProgress={setScrollProgress}
+      triggers={triggers}
+      steps={steps}
+      className="w-screen"
+      bgColor="shanawdithitPrimary"
+    >
+      <div
+        className={`flex flex-col md:flex-row justify-between`}
+        id="scrollytell-one"
+      >
+        <div className="sticky p-8 md:p-0 top-24 h-min mt-16 mr-6 bias-full w-full md:bias-1/2 md:w-7/12 md:order-last">
+          <ClientOnly>
+            {() => (
+              <IIIFViewer
+                figure={figure.fileName}
+                scrollProgress={scrollProgress}
+              />
+            )}
+          </ClientOnly>
+        </div>
+        <div
+          ref={steps}
+          className="bias-full w-full md:bias-1/2 md:w-2/5 relative"
+        >
+          {triggers.map((trigger, index) => {
+            return (
+              <div
+                key={`sketch-trigger-${trigger.key}`}
+                data-step={index}
+                className={`pointer-events-none step text-xl content-center relative min-h-screen text-${accentTextColor}`}
+              >
+                {trigger}
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </ScrollytellWrapper>
+  );
+}
+
+export default SketchScrollytell;

app/components/shanawdithit/drawingScrollytell/IIIFViewer.client.tsx

@@ -0,0 +1,138 @@
+import type { Options, TileSource, Viewer } from "openseadragon";
+import OpenSeadragon from "openseadragon";
+import { useEffect, useMemo, useRef, useState } from "react";
+
+interface Props {
+  figure: string;
+  scrollProgress: number;
+}
+
+const osdOptions: Options = {
+  showZoomControl: false,
+  showFullPageControl: false,
+  showHomeControl: false,
+  showNavigator: true,
+  navigatorAutoFade: false,
+  animationTime: 5,
+  navigatorDisplayRegionColor: "#fb9318",
+  mouseNavEnabled: false,
+};
+
+const IIIFViewer = ({ figure, scrollProgress }: Props) => {
+  const viewerRef = useRef<Viewer | undefined>(undefined);
+  const [osd, setOSD] = useState<Viewer | undefined>(undefined);
+
+  useMemo(() => {
+    const initViewer = async () => {
+      if (viewerRef.current) return;
+      const response = await fetch(
+        `https://iip.readux.io/iiif/3/dxd/shanawdithit/${figure}.tiff/info.json`
+      );
+
+      const info: TileSource = await response.json();
+
+      viewerRef.current = OpenSeadragon({
+        id: "drawing-scrollytell-viewer",
+        tileSources: [info],
+        ...osdOptions,
+      });
+
+      viewerRef.current.navigator.element.classList.add(
+        "duration-1000",
+        "transition-opacity",
+        "opacity-0"
+      );
+    };
+
+    console.log("🚀 ~ return ~ viewerRef.current:", viewerRef.current);
+
+    if (!viewerRef.current) {
+      initViewer().then((result) => {
+        setOSD(viewerRef.current);
+      });
+    }
+
+    return () => {
+      viewerRef.current?.destroy();
+    };
+  }, [figure, osdOptions]);
+
+  useEffect(() => {
+    console.log("🚀 ~ IIIFViewer ~ scrollProgress:", scrollProgress, osd);
+    switch (true) {
+      case scrollProgress >= 1.7 && scrollProgress <= 2.7:
+        viewerRef.current?.viewport.panTo(
+          new OpenSeadragon.Point(0.7188385493768735, 0.4972938512246431)
+        );
+        viewerRef.current?.viewport.zoomTo(5.159780351999999);
+        viewerRef.current?.navigator.element.classList.add("opacity-100");
+        viewerRef.current?.setMouseNavEnabled(false);
+        break;
+      case scrollProgress >= 2.7 && scrollProgress <= 3.7:
+        viewerRef.current?.viewport.panTo(
+          new OpenSeadragon.Point(0.24222051942640613, 0.3844618819642727),
+          false
+        );
+        viewerRef.current?.viewport.zoomTo(2.0736);
+        break;
+      case scrollProgress >= 3.7 && scrollProgress <= 4.7:
+        viewerRef.current?.viewport.panTo(
+          new OpenSeadragon.Point(0.5653966599842921, 0.24441564991246267),
+          false
+        );
+        viewerRef.current?.viewport.zoomTo(11.55526618093977);
+        break;
+      case scrollProgress >= 4.7 && scrollProgress <= 5.7:
+        viewerRef.current?.viewport.panTo(
+          new OpenSeadragon.Point(0.188242050880771, 0.19818732218542576),
+          false
+        );
+        viewerRef.current?.viewport.zoomTo(6.687075336191998);
+        break;
+      case scrollProgress >= 5.7 && scrollProgress <= 6.7:
+        viewerRef.current?.viewport.panTo(
+          new OpenSeadragon.Point(0.8193386053978049, 0.2573826949479137),
+          false
+        );
+        viewerRef.current?.viewport.zoomTo(11.614404145077721);
+        break;
+      case scrollProgress >= 6.7 && scrollProgress <= 7.7:
+        viewerRef.current?.viewport.panTo(
+          new OpenSeadragon.Point(0.8193386053978049, 0.2573826949479137),
+          false
+        );
+        viewerRef.current?.viewport.zoomTo(3.8896404485347955);
+        break;
+      case scrollProgress >= 7.7 && scrollProgress <= 8.7:
+        viewerRef.current?.viewport.panTo(
+          new OpenSeadragon.Point(0.6400570005410656, 0.29101118609510107),
+          false
+        );
+        viewerRef.current?.viewport.zoomTo(8.065558434081751);
+        break;
+      case scrollProgress >= 8.7 && scrollProgress <= 9.7:
+        viewerRef.current?.viewport.panTo(
+          new OpenSeadragon.Point(0.8001552893113767, 0.27226857830922),
+          false
+        );
+        viewerRef.current?.viewport.zoomTo(9.6786701208981);
+        viewerRef.current?.navigator.element.classList.add("opacity-100");
+        viewerRef.current?.setMouseNavEnabled(false);
+        break;
+
+      default:
+        viewerRef.current?.setMouseNavEnabled(true);
+        viewerRef.current?.viewport.goHome();
+        viewerRef.current?.navigator.element.classList.remove("opacity-100");
+        break;
+    }
+  }, [scrollProgress, osd]);
+
+  return (
+    <div className="h-[calc(100vh-80px)] mt-20 my-auto flex flex-col mr-4">
+      <div id="drawing-scrollytell-viewer" className="aspect-[1.2]"></div>
+    </div>
+  );
+};
+
+export default IIIFViewer;

app/routes/chapters.shanawdithit.tsx

@@ -14,7 +14,7 @@ import Figure from "~/components/figures/Figure";
 import HoverText from "~/components/HoverText";
 import ColonialMaps from "~/components/shanawdithit/ColonialMaps.client";
 import DocumentViewer from "~/components/shanawdithit/DocumentViewer";
-import SketchScrollytell from "~/components/shanawdithit/DrawingScrollytell";
+import SketchScrollytell from "~/components/shanawdithit/drawingScrollytell/DrawingScrollytell";
 import InlineFootnote from "~/components/InlineFootnote";
 import WillardScrollytell from "~/components/shanawdithit/WillardScrollytell";
 import ChapterBody from "~/components/layout/ChapterBody";