Demo Content State (Images)

components/Clover/ViewerWrapper.tsx

@@ -12,7 +12,6 @@ import Container from "../Shared/Container";
 import { IconInfo } from "@/components/Shared/SVG/Icons";
 import React from "react";
 import { UserContext } from "@/context/user-context";
-import type { Work } from "@nulib/dcapi-types";
 import dynamic from "next/dynamic";
 
 export const CloverViewer = dynamic(
@@ -23,14 +22,18 @@ export const CloverViewer = dynamic(
 );
 
 interface WrapperProps {
-  manifestId: Work["iiif_manifest"];
+  contentStateCallback?: (contentState: any) => void;
+  iiifContent?: string;
   isWorkRestricted?: boolean;
+  manifestId: string | null;
   viewerOptions?: ViewerConfigOptions;
 }
 
 const WorkViewerWrapper: React.FC<WrapperProps> = ({
-  manifestId,
+  contentStateCallback,
+  iiifContent,
   isWorkRestricted,
+  manifestId,
   viewerOptions = {},
 }) => {
   const userAuth = React.useContext(UserContext);
@@ -76,14 +79,39 @@ const WorkViewerWrapper: React.FC<WrapperProps> = ({
     ...viewerOptions,
   };
 
+  function handleCanvasIdCallback(activeCanvas: string) {
+    if (activeCanvas && contentStateCallback) {
+      const contentStateAnnotationId = `${manifestId}/content-state}`;
+      const contentState = {
+        "@context": "http://iiif.io/api/presentation/3/context.json",
+        id: contentStateAnnotationId,
+        type: "Annotation",
+        motivation: ["contentState"],
+        target: {
+          id: activeCanvas,
+          type: "Canvas",
+          partOf: [
+            {
+              id: manifestId,
+              type: "Manifest",
+            },
+          ],
+        },
+      };
+
+      contentStateCallback(JSON.stringify(contentState));
+    }
+  }
+
   return (
     <Container containerType="wide">
       <ViewerWrapperStyled data-testid="work-viewer-wrapper">
         {manifestId && (
           <CloverViewer
             // @ts-ignore
+            canvasIdCallback={handleCanvasIdCallback}
             customTheme={customTheme}
-            iiifContent={manifestId}
+            iiifContent={iiifContent || manifestId}
             options={options}
           />
         )}
@@ -100,4 +128,4 @@ const WorkViewerWrapper: React.FC<WrapperProps> = ({
   );
 };
 
-export default WorkViewerWrapper;
+export default React.memo(WorkViewerWrapper);

components/Shared/Dialog.tsx

@@ -32,6 +32,7 @@ const SharedDialog: React.FC<SharedDialogProps> = ({
         <DialogOverlay />
         <DialogContent
           onInteractOutside={handleCloseClick}
+          onEscapeKeyDown={handleCloseClick}
           {...(size ? { size } : {})}
         >
           <DialogHeader>

components/Shared/IIIF/ContentState.tsx

@@ -0,0 +1,47 @@
+import CopyText from "@/components/Shared/CopyText";
+import SharedDialog from "@/components/Shared/Dialog";
+import { encodeContentState } from "@iiif/helpers";
+import { useState } from "react";
+
+interface IIIFContentStateProps {
+  contentState: any;
+}
+
+const IIIFContentState: React.FC<IIIFContentStateProps> = ({
+  contentState,
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const title = "Demo Content State";
+
+  function handleClick() {
+    setIsOpen(true);
+  }
+
+  function close() {
+    setIsOpen(false);
+  }
+
+  const uri = new URL(window.location.href);
+  uri.searchParams.set("iiif-content", encodeContentState(contentState));
+  const shareUrl = uri.toString();
+
+  return (
+    <div>
+      <button onClick={handleClick}>{title}</button>
+      <SharedDialog
+        title={title}
+        handleCloseClick={close}
+        isOpen={isOpen}
+        size="small"
+      >
+        <>
+          <textarea style={{ width: "100%" }}>{contentState}</textarea>
+          <CopyText textPrompt="Share Current State" textToCopy={shareUrl} />
+        </>
+      </SharedDialog>
+    </div>
+  );
+};
+
+export default IIIFContentState;

components/Work/TopInfo.tsx

@@ -16,6 +16,7 @@ import { Button } from "@nulib/design-system";
 import Card from "@/components/Shared/Card";
 import { DefinitionListWrapper } from "@/components/Shared/DefinitionList.styled";
 import Expand from "@/components/Shared/Expand/Expand";
+import IIIFContentState from "../Shared/IIIF/ContentState";
 import IIIFShare from "../Shared/IIIF/Share";
 import { Manifest } from "@iiif/presentation-3";
 import type { Work } from "@nulib/dcapi-types";
@@ -26,6 +27,7 @@ import type { WorkTypeCountMap } from "@/lib/collection-helpers";
 
 interface TopInfoProps {
   collectionWorkTypeCounts?: WorkTypeCountMap | null;
+  contentState?: any;
   manifest?: Manifest;
   work: Work;
 }
@@ -36,6 +38,7 @@ export interface ActionsDialog {
 
 const WorkTopInfo: React.FC<TopInfoProps> = ({
   collectionWorkTypeCounts,
+  contentState,
   manifest,
   work,
 }) => {
@@ -84,7 +87,10 @@ const WorkTopInfo: React.FC<TopInfoProps> = ({
               />
             )}
           </div>
-          <IIIFShare uri={manifest.id} />
+          <div>
+            {contentState && <IIIFContentState contentState={contentState} />}
+            <IIIFShare uri={manifest.id} />
+          </div>
         </TopInfoHeaderContent>
 
         <ActionButtons>

next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.