From e690ea7024bdb82e1b8455795501ab36cec90172 Mon Sep 17 00:00:00 2001 From: Martin Uildriks Date: Fri, 23 May 2025 15:03:30 -0400 Subject: [PATCH] Moved 'local' variables from ViewerContent to context store and retrieved props from ViewerState in Content.tsx and ViewerContent --- src/components/Viewer/Viewer/Content.tsx | 48 ++++++++---------------- src/components/Viewer/Viewer/Viewer.tsx | 32 ++++------------ src/context/viewer-context.tsx | 28 ++++++++++++++ 3 files changed, 52 insertions(+), 56 deletions(-) diff --git a/src/components/Viewer/Viewer/Content.tsx b/src/components/Viewer/Viewer/Content.tsx index e7208dc82..658b579cf 100644 --- a/src/components/Viewer/Viewer/Content.tsx +++ b/src/components/Viewer/Viewer/Content.tsx @@ -1,9 +1,3 @@ -import { - AnnotationPageNormalized, - Canvas, - IIIFExternalWebResource, -} from "@iiif/presentation-3"; -import { AnnotationResource, AnnotationResources } from "src/types/annotations"; import { Aside, Content, @@ -15,40 +9,31 @@ import InformationPanel from "src/components/Viewer/InformationPanel/Information import Media from "src/components/Viewer/Media/Media"; import Painting from "../Painting/Painting"; import React from "react"; -import { useViewerState } from "src/context/viewer-context"; - -export interface ViewerContentProps { - activeCanvas: string; - annotationResources: AnnotationResources; - searchServiceUrl?: string; - setContentSearchResource: React.Dispatch< - React.SetStateAction - >; - contentSearchResource?: AnnotationResource; - painting: IIIFExternalWebResource[]; - items: Canvas[]; - isAudioVideo: boolean; -} - -const ViewerContent: React.FC = ({ - activeCanvas, - annotationResources, - searchServiceUrl, +import { setContentSearchResource, - contentSearchResource, - isAudioVideo, - items, - painting, -}) => { + useViewerState, +} from "src/context/viewer-context"; + +const ViewerContent: React.FC = () => { const { contentStateAnnotation, isInformationOpen, configOptions, sequence, visibleCanvases, + activeCanvas, + activeManifest, + annotationResources, + searchServiceUrl, + painting, + contentSearchResource, + vault, + isAudioVideo, } = useViewerState(); const { informationPanel } = configOptions; + const { items } = vault.get(activeManifest); + /** * The information panel should be rendered if toggled true and if * there is content (About or Annotations Resources) to display. @@ -81,9 +66,8 @@ const ViewerContent: React.FC = ({ annotationResources={annotationResources} contentSearchResource={contentSearchResource} isMedia={isAudioVideo} - painting={painting} + painting={painting!} /> - {sequence[1].length > 1 && ( diff --git a/src/components/Viewer/Viewer/Viewer.tsx b/src/components/Viewer/Viewer/Viewer.tsx index dc9a68f3d..bf84bc6fd 100644 --- a/src/components/Viewer/Viewer/Viewer.tsx +++ b/src/components/Viewer/Viewer/Viewer.tsx @@ -1,14 +1,18 @@ import * as Collapsible from "@radix-ui/react-collapsible"; -import { AnnotationResource, AnnotationResources } from "src/types/annotations"; import { ExternalResourceTypes, InternationalString, ManifestNormalized, } from "@iiif/presentation-3"; -import React, { useCallback, useEffect, useState } from "react"; +import React, { useCallback, useEffect } from "react"; import { ViewerContextStore, + setAnnotationResources, + setContentSearchResource, + setIsAudioVideo, + setPainting, + setSearchServiceUrl, useViewerDispatch, useViewerState, } from "src/context/viewer-context"; @@ -21,7 +25,6 @@ import { import { ContentSearchQuery } from "src/types/annotations"; import { ErrorBoundary } from "react-error-boundary"; import ErrorFallback from "src/components/UI/ErrorFallback/ErrorFallback"; -import { IIIFExternalWebResource } from "@iiif/presentation-3"; import ViewerContent from "src/components/Viewer/Viewer/Content"; import ViewerHeader from "src/components/Viewer/Viewer/Header"; import { Wrapper } from "src/components/Viewer/Viewer/Viewer.styled"; @@ -51,6 +54,7 @@ const Viewer: React.FC = ({ vault, configOptions, visibleCanvases, + searchServiceUrl, } = viewerState; const absoluteCanvasHeights = ["100%", "auto"]; @@ -58,18 +62,7 @@ const Viewer: React.FC = ({ configOptions?.canvasHeight && absoluteCanvasHeights.includes(configOptions?.canvasHeight); - /** - * Local state - */ - const [isAudioVideo, setIsAudioVideo] = useState(false); - const [painting, setPainting] = useState([]); - const [annotationResources, setAnnotationResources] = - useState([]); - const [contentSearchResource, setContentSearchResource] = - useState(); - const isSmallViewport = useMediaQuery(media.sm); - const [searchServiceUrl, setSearchServiceUrl] = useState(); const setInformationOpen = useCallback( (open: boolean) => { @@ -179,16 +172,7 @@ const Viewer: React.FC = ({ manifestLabel={manifest.label as InternationalString} manifestId={manifest.id} /> - + diff --git a/src/context/viewer-context.tsx b/src/context/viewer-context.tsx index e9d8bb1db..24c0617db 100644 --- a/src/context/viewer-context.tsx +++ b/src/context/viewer-context.tsx @@ -1,6 +1,7 @@ import { AnnotationNormalized, CollectionNormalized, + IIIFExternalWebResource, InternationalString, Reference, } from "@iiif/presentation-3"; @@ -11,6 +12,7 @@ import { IncomingHttpHeaders } from "http"; import { Vault } from "@iiif/helpers/vault"; import { deepMerge } from "src/lib/utils"; import { v4 as uuidv4 } from "uuid"; +import { AnnotationResource, AnnotationResources } from "src/types/annotations"; export type AutoScrollSettings = { behavior: string; // ScrollBehavior ("auto" | "instant" | "smooth") @@ -24,6 +26,7 @@ export type AutoScrollOptions = { export type ViewerConfigOptions = { annotationOverlays?: OverlayOptions; + annotationResources: AnnotationResources; background?: string; canvasBackgroundColor?: string; canvasHeight?: string; @@ -88,6 +91,7 @@ const defaultConfigOptions = { renderOverlays: true, zoomLevel: 2, }, + annotationResources: [], background: "transparent", canvasBackgroundColor: "#6662", canvasHeight: "500px", @@ -156,18 +160,23 @@ export interface ViewerContextStore { activeCanvas: string; activeManifest: string; activeSelector?: string; + annotationResources: AnnotationResources; OSDImageLoaded?: boolean; collection?: CollectionNormalized | Record; contentStateAnnotation?: AnnotationNormalized; + contentSearchResource?: AnnotationResource; configOptions: ViewerConfigOptions; customDisplays: Array; + painting?: Array; plugins: Array; informationPanelResource?: string; + isAudioVideo: boolean; isAutoScrollEnabled?: boolean; isAutoScrolling?: boolean; isInformationOpen: boolean; isLoaded: boolean; isUserScrolling?: number | undefined; + searchServiceUrl?: string; sequence: [Reference<"Canvas">[], number[][]]; vault: Vault; openSeadragonViewer: OpenSeadragon.Viewer | null; @@ -199,6 +208,22 @@ export interface ViewerAction { visibleCanvases: Array>; } +export const setIsAudioVideo = (mediaType: boolean) => + (defaultState.isAudioVideo = mediaType); + +export const setContentSearchResource = ( + annotationResource: AnnotationResource, +) => (defaultState.contentSearchResource = annotationResource); + +export const setSearchServiceUrl = (url: string) => + (defaultState.searchServiceUrl = url); + +export const setAnnotationResources = (resources: AnnotationResources) => + (defaultState.annotationResources = resources); + +export const setPainting = (painting: IIIFExternalWebResource[]) => + (defaultState.painting = painting); + export function expandAutoScrollOptions( value: AutoScrollOptions | AutoScrollSettings | boolean | undefined, ): AutoScrollOptions { @@ -230,17 +255,20 @@ export const defaultState: ViewerContextStore = { activeCanvas: "", activeManifest: "", activeSelector: undefined, + annotationResources: [], OSDImageLoaded: false, collection: {}, configOptions: defaultConfigOptions, customDisplays: [], plugins: [], + isAudioVideo: false, isAutoScrollEnabled: expandedAutoScrollOptions.enabled, isAutoScrolling: false, isInformationOpen: defaultConfigOptions?.informationPanel?.open, isLoaded: false, isUserScrolling: undefined, sequence: [[], []], + searchServiceUrl: undefined, vault: new Vault(), openSeadragonViewer: null, viewerId: uuidv4(),