Adjust abstraction.

samvera-labs · Oct 13, 2023 · a734df1 · a734df1
1 parent e69d7a5
commit a734df1
Show file tree

Hide file tree

Showing 12 changed files with 179 additions and 138 deletions.
diff --git a/src/components/Viewer/Collection/Collection.tsx b/src/components/Viewer/Collection/Collection.tsx
@@ -19,21 +19,23 @@ const Collection: React.FC = () => {
   };
 
   return (
-    <Select
-      label={collection.label}
-      maxHeight={maxHeight}
-      value={activeManifest}
-      onValueChange={handleValueChange}
-    >
-      {collection?.items?.map((item: CollectionItems) => (
-        <SelectOption
-          value={item.id}
-          key={item.id}
-          thumbnail={vault.get(item?.thumbnail)}
-          label={item.label}
-        />
-      ))}
-    </Select>
+    <div>
+      <Select
+        label={collection.label}
+        maxHeight={maxHeight}
+        value={activeManifest}
+        onValueChange={handleValueChange}
+      >
+        {collection?.items?.map((item: CollectionItems) => (
+          <SelectOption
+            value={item.id}
+            key={item.id}
+            thumbnail={vault.get(item?.thumbnail)}
+            label={item.label}
+          />
+        ))}
+      </Select>
+    </div>
   );
 };
 

diff --git a/src/components/Viewer/ImageViewer/Controls.tsx b/src/components/Viewer/ImageViewer/Controls.tsx
@@ -1,6 +1,6 @@
-import React from "react";
 import Button from "src/components/Viewer/ImageViewer/Button";
 import { Options } from "openseadragon";
+import React from "react";
 import { Wrapper } from "src/components/Viewer/ImageViewer/Controls.styled";
 
 const ZoomIn = () => {

diff --git a/src/components/Viewer/ImageViewer/ImageViewer.test.tsx b/src/components/Viewer/ImageViewer/ImageViewer.test.tsx
@@ -6,22 +6,20 @@ describe("ImageViewer component", () => {
   it("renders", () => {
     render(
       <ImageViewer
-        body={[
-          {
-            id: "https://iiif.stack.rdc.library.northwestern.edu/iiif/2/180682c9-dfaf-4881-b7b6-1f2f21092d4f/full/600,/0/default.jpg",
-            type: "Image",
-            format: "image/jpeg",
-            service: [
-              {
-                id: "https://iiif.stack.rdc.library.northwestern.edu/iiif/2/180682c9-dfaf-4881-b7b6-1f2f21092d4f",
-                profile: "http://iiif.io/api/image/2/level2.json",
-                type: "ImageService2",
-              },
-            ],
-            width: 3780,
-            height: 4440,
-          },
-        ]}
+        painting={{
+          id: "https://iiif.stack.rdc.library.northwestern.edu/iiif/2/180682c9-dfaf-4881-b7b6-1f2f21092d4f/full/600,/0/default.jpg",
+          type: "Image",
+          format: "image/jpeg",
+          service: [
+            {
+              id: "https://iiif.stack.rdc.library.northwestern.edu/iiif/2/180682c9-dfaf-4881-b7b6-1f2f21092d4f",
+              profile: "http://iiif.io/api/image/2/level2.json",
+              type: "ImageService2",
+            },
+          ],
+          width: 3780,
+          height: 4440,
+        }}
         hasPlaceholder={false}
       />,
     );

diff --git a/src/components/Viewer/ImageViewer/ImageViewer.tsx b/src/components/Viewer/ImageViewer/ImageViewer.tsx
@@ -1,59 +1,38 @@
 import OSD, { osdImageTypes } from "src/components/Viewer/ImageViewer/OSD";
 import React, { useEffect, useState } from "react";
-import { Select, SelectOption } from "src/components/internal/Select";
 
 import { LabeledIIIFExternalWebResource } from "src/types/presentation-3";
 import { getImageServiceURI } from "src/lib/iiif";
 
 interface ImageViewerProps {
-  body: LabeledIIIFExternalWebResource[];
+  painting: LabeledIIIFExternalWebResource;
   hasPlaceholder: boolean;
 }
 
-const ImageViewer: React.FC<ImageViewerProps> = ({ body, hasPlaceholder }) => {
+const ImageViewer: React.FC<ImageViewerProps> = ({
+  painting,
+  hasPlaceholder,
+}) => {
   const [imageType, setImageType] = useState<osdImageTypes>();
   const [uri, setUri] = useState<string | undefined>();
-  const [annotationIndex, setAnnotationIndex] = useState<number>(0);
-
-  const annotation = body[annotationIndex];
 
   useEffect(() => {
-    if (Array.isArray(annotation?.service) && annotation?.service.length > 0) {
+    if (Array.isArray(painting?.service) && painting?.service.length > 0) {
       setImageType("tiledImage");
-      setUri(getImageServiceURI(annotation?.service));
+      setUri(getImageServiceURI(painting?.service));
     } else {
       setImageType("simpleImage");
-      setUri(annotation?.id);
+      setUri(painting?.id);
     }
-  }, [annotation]);
-
-  const handleChange = (value: string) => {
-    const index = body.findIndex((resource) => resource.id === value);
-    setAnnotationIndex(index);
-  };
+  }, [painting]);
 
   return (
-    <>
-      <Select
-        value={body[annotationIndex]?.id}
-        onValueChange={handleChange}
-        maxHeight="500px"
-      >
-        {body?.map((resource) => (
-          <SelectOption
-            value={resource?.id}
-            key={resource?.id}
-            label={resource?.label}
-          />
-        ))}
-      </Select>
-      <OSD
-        uri={uri}
-        key={uri}
-        imageType={imageType}
-        hasPlaceholder={hasPlaceholder}
-      />
-    </>
+    <OSD
+      uri={uri}
+      key={uri}
+      hasPlaceholder={hasPlaceholder}
+      imageType={imageType}
+    />
   );
 };
 

diff --git a/src/components/Viewer/ImageViewer/OSD.tsx b/src/components/Viewer/ImageViewer/OSD.tsx
@@ -15,11 +15,11 @@ export type osdImageTypes = "tiledImage" | "simpleImage" | undefined;
 
 interface OSDProps {
   uri: string | undefined;
-  imageType: osdImageTypes;
   hasPlaceholder: boolean;
+  imageType: osdImageTypes;
 }
 
-const OSD: React.FC<OSDProps> = ({ uri, imageType, hasPlaceholder }) => {
+const OSD: React.FC<OSDProps> = ({ uri, hasPlaceholder, imageType }) => {
   const [osdUri, setOsdUri] = useState<string>();
   const viewerState: ViewerContextStore = useViewerState();
   const { configOptions } = viewerState;
@@ -87,7 +87,7 @@ const OSD: React.FC<OSDProps> = ({ uri, imageType, hasPlaceholder }) => {
         height: configOptions.canvasHeight,
       }}
     >
-      <Controls options={config} hasPlaceholder={hasPlaceholder} />
+      <Controls hasPlaceholder={hasPlaceholder} options={config} />
       <Navigator id={`openseadragon-navigator-${instance}`} />
       <Viewport id={`openseadragon-viewport-${instance}`} />
     </Wrapper>

diff --git a/src/components/Viewer/Painting/Painting.tsx b/src/components/Viewer/Painting/Painting.tsx
@@ -1,9 +1,8 @@
-import {
-  CanvasNormalized,
-  IIIFExternalWebResource,
-} from "@iiif/presentation-3";
+import { Select, SelectOption } from "src/components/internal/Select";
 
+import { CanvasNormalized } from "@iiif/presentation-3";
 import ImageViewer from "src/components/Viewer/ImageViewer/ImageViewer";
+import { LabeledIIIFExternalWebResource } from "src/types/presentation-3";
 import { LabeledResource } from "src/hooks/use-iiif/getSupplementingResources";
 import PaintingPlaceholder from "./Placeholder";
 import { PaintingStyled } from "./Painting.styled";
@@ -13,7 +12,7 @@ import Toggle from "./Toggle";
 import { useViewerState } from "src/context/viewer-context";
 
 interface PaintingProps {
-  painting: IIIFExternalWebResource[];
+  painting: LabeledIIIFExternalWebResource[];
   resources: LabeledResource[];
   activeCanvas: string;
   isMedia: boolean;
@@ -25,6 +24,7 @@ const Painting: React.FC<PaintingProps> = ({
   painting,
   resources,
 }) => {
+  const [annotationIndex, setAnnotationIndex] = React.useState<number>(0);
   const [isInteractive, setIsInteractive] = React.useState(false);
   const { configOptions, vault } = useViewerState();
   const normalizedCanvas: CanvasNormalized = vault.get(activeCanvas);
@@ -35,10 +35,14 @@ const Painting: React.FC<PaintingProps> = ({
 
   const handleToggle = () => setIsInteractive(!isInteractive);
 
+  const handleCoiceChange = (value) => {
+    const index = painting.findIndex((resource) => resource.id === value);
+    setAnnotationIndex(index);
+  };
+
   return (
     <PaintingStyled
       css={{
-        maxHeight: configOptions.canvasHeight,
         backgroundColor: configOptions.canvasBackgroundColor,
       }}
     >
@@ -60,16 +64,33 @@ const Painting: React.FC<PaintingProps> = ({
       {!showPlaceholder && (
         <div>
           {isMedia ? (
-            <Player painting={painting} resources={resources} />
+            <Player
+              allSources={painting}
+              painting={painting[annotationIndex]}
+              resources={resources}
+            />
           ) : (
             painting && (
               <ImageViewer
-                body={painting}
+                painting={painting[annotationIndex]}
                 hasPlaceholder={hasPlaceholder}
                 key={activeCanvas}
               />
             )
           )}
+          <Select
+            value={painting[annotationIndex]?.id}
+            onValueChange={handleCoiceChange}
+            maxHeight="500px"
+          >
+            {painting?.map((resource) => (
+              <SelectOption
+                value={resource?.id}
+                key={resource?.id}
+                label={resource?.label}
+              />
+            ))}
+          </Select>
         </div>
       )}
     </PaintingStyled>

diff --git a/src/components/Viewer/Player/Player.test.tsx b/src/components/Viewer/Player/Player.test.tsx
@@ -1,20 +1,28 @@
 import { describe, it } from "vitest";
 
-import { IIIFExternalWebResource } from "@iiif/presentation-3";
+import { LabeledIIIFExternalWebResource } from "src/types/presentation-3";
 import { LabeledResource } from "src/hooks/use-iiif/getSupplementingResources";
 import Player from "src/components/Viewer/Player/Player";
 import React from "react";
 import { render } from "@testing-library/react";
 
-const mockPainting: IIIFExternalWebResource[] = [
+const mockPainting: LabeledIIIFExternalWebResource[] = [
   {
-    id: "https://bitdash-a.akamaihd.net/content/MI201109210084_1/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8",
+    id: "https://bitdash-a.akamaihd.net/content/MI201109210084_1/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.mp4",
     type: "Video",
     format: "video/mp4",
     height: 720,
     width: 480,
     duration: 500,
   },
+  {
+    id: "https://bitdash-a.akamaihd.net/content/MI201109210084_1/m3u8s/42323234432524fsasd24t5.ogv",
+    type: "Video",
+    format: "video/ogv",
+    height: 720,
+    width: 480,
+    duration: 500,
+  },
 ];
 
 const mockResources: Array<LabeledResource> = [
@@ -36,6 +44,12 @@ const mockResources: Array<LabeledResource> = [
 
 describe.skip("Player component", () => {
   it("renders", () => {
-    render(<Player painting={mockPainting} resources={mockResources} />);
+    render(
+      <Player
+        allSources={mockPainting}
+        painting={mockPainting[0]}
+        resources={mockResources}
+      />,
+    );
   });
 });