Merge pull request #207 from digirati-co-uk/feature/choices

Choice improvements
digirati-co-uk · Jun 18, 2024 · 8a01e14 · 8a01e14
2 parents 6d0f46a + be2a8bc
commit 8a01e14
Show file tree

Hide file tree

Showing 15 changed files with 259 additions and 458 deletions.
diff --git a/package.json b/package.json
@@ -6,12 +6,8 @@
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
   "web": "dist/bundle.global.js",
-  "files": [
-    "dist"
-  ],
-  "contributors": [
-    "Stephen Fraser <stephen.fraser@digirati.com>"
-  ],
+  "files": ["dist"],
+  "contributors": ["Stephen Fraser <stephen.fraser@digirati.com>"],
   "exports": {
     ".": {
       "require": {
@@ -60,7 +56,7 @@
   "dependencies": {
     "@atlas-viewer/atlas": "^2.2.4",
     "@atlas-viewer/iiif-image-api": "^2.2.0",
-    "@iiif/helpers": "^1.2.9",
+    "@iiif/helpers": "^1.2.13",
     "@iiif/parser": "^2.1.2",
     "@iiif/presentation-2": "^1.0.4",
     "@iiif/presentation-3": "^2.2.3",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/canvas-panel/Viewer.tsx b/src/canvas-panel/Viewer.tsx
@@ -23,6 +23,7 @@ export function Viewer({
   outerContainerProps?: any;
   aspectRatio?: number;
   errorFallback?: any;
+  renderPreset?: Preset;
   worldScale?: number;
 } & { children: ReactNode }) {
   const [viewerPreset, setViewerPreset] = useState<Preset | null>();

diff --git a/src/canvas-panel/index.tsx b/src/canvas-panel/index.tsx
@@ -26,6 +26,8 @@ interface CanvasPanelProps {
   children?: ReactNode;
   mode?: ViewerMode;
   reuseAtlas?: boolean;
+  runtimeOptions?: any;
+  renderPreset?: any;
 
   // Inner props
   height?: number;
@@ -41,6 +43,8 @@ interface CanvasPanelProps {
 }
 
 interface InnerProps {
+  renderPreset?: any;
+  runtimeOptions?: any;
   height?: number;
   canvasProps?: CanvasPanelProps['canvasProps'];
   spacing?: number;
@@ -73,6 +77,8 @@ const Inner = forwardRef<SimpleViewerContext, InnerProps>(function Inner(props,
         key={props.reuseAtlas ? '' : viewer.currentSequenceIndex}
         height={props.height}
         mode={props.mode}
+        renderPreset={props.renderPreset}
+        runtimeOptions={props.runtimeOptions}
       >
         {canvases.map((canvas, idx) => {
           const margin = accumulator;
@@ -114,7 +120,20 @@ type CanvasPanelType = ForwardRefExoticComponent<CanvasPanelProps & RefAttribute
 };
 
 export const CanvasPanel = forwardRef<SimpleViewerContext, CanvasPanelProps>(function CanvasPanel(
-  { children, height, annotations, canvasProps, spacing, header, components, mode, reuseAtlas, ...props },
+  {
+    children,
+    height,
+    annotations,
+    canvasProps,
+    spacing,
+    header,
+    components,
+    mode,
+    reuseAtlas,
+    renderPreset,
+    runtimeOptions,
+    ...props
+  },
   ref
 ) {
   const vault = useExistingVault();
@@ -132,6 +151,8 @@ export const CanvasPanel = forwardRef<SimpleViewerContext, CanvasPanelProps>(fun
           header={header}
           mode={mode}
           reuseAtlas={reuseAtlas}
+          renderPreset={renderPreset}
+          runtimeOptions={runtimeOptions}
         >
           {children}
         </Inner>

diff --git a/src/canvas-panel/render/Video.tsx b/src/canvas-panel/render/Video.tsx
@@ -1,18 +1,16 @@
-import { ReactNode, RefObject } from 'react';
+import { FC, ReactNode, RefObject } from 'react';
 import { useSimpleMediaPlayer } from '../../hooks/useSimpleMediaPlayer';
 import { SingleVideo } from '../../features/rendering-strategy/resource-types';
 import { MediaPlayerProvider } from '../../context/MediaContext';
 import { useOverlay } from '../context/overlays';
 
-export function VideoHTML({
-  element,
-  media,
-  playPause,
-}: {
-  element: RefObject<any>;
+export interface VideoComponentProps {
+  element: RefObject<HTMLVideoElement>;
   media: SingleVideo;
   playPause: () => void;
-}) {
+}
+
+export function VideoHTML({ element, media, playPause }: VideoComponentProps) {
   const Component = 'div' as any;
   return (
     <Component className="video-container" part="video-container" onClick={playPause}>
@@ -32,7 +30,7 @@ export function VideoHTML({
             }
           `}
       </style>
-      <video ref={element as any} src={media.url} style={{ width: '100%', objectFit: 'contain' }} />
+      <video ref={element} src={media.url} style={{ width: '100%', objectFit: 'contain' }} />
     </Component>
   );
 }
@@ -41,14 +39,16 @@ export function Video({
   media,
   mediaControlsDeps,
   children,
+  videoComponent = VideoHTML,
 }: {
   media: SingleVideo;
   mediaControlsDeps?: any[];
   children: ReactNode;
+  videoComponent?: FC<VideoComponentProps>;
 }) {
   const [{ element, currentTime, progress }, state, actions] = useSimpleMediaPlayer({ duration: media.duration });
 
-  useOverlay('overlay', 'video-element', VideoHTML, {
+  useOverlay('overlay', 'video-element', videoComponent, {
     element,
     media,
     playPause: actions.playPause,

diff --git a/src/components/future/ViewChoices.tsx b/src/components/future/ViewChoices.tsx
@@ -0,0 +1,50 @@
+import { useCanvasChoices } from '../../hooks/useCanvasChoices';
+import { LocaleString } from '../../utility/i18n-utils';
+
+export function ViewChoices() {
+  const { choices, actions } = useCanvasChoices();
+  if (choices.length === 0) {
+    return null;
+  }
+
+  return (
+    <div>
+      <h2>Choices</h2>
+      <ul>
+        {choices.map(({ canvasId, choice }, index) => (
+          <li key={index}>
+            {canvasId}
+            {choice.items.map((paintingChoice) => {
+              return (
+                <div>
+                  <LocaleString>{paintingChoice.label}</LocaleString>
+                  <ul>
+                    {paintingChoice.items.map((item) => {
+                      return (
+                        <li className="p-2 flex gap-2">
+                          <LocaleString>{item.label}</LocaleString>
+                          <button
+                            className={
+                              item.selected
+                                ? 'bg-green-500 hover:bg-green-700 text-white text-sm py-1 px-3 rounded-full'
+                                : 'bg-gray-500 hover:bg-gray-700 text-white text-sm py-1 px-3 rounded-full'
+                            }
+                            onClick={() => {
+                              actions.makeChoice(item.id, { deselectOthers: true });
+                            }}
+                          >
+                            Choose
+                          </button>
+                        </li>
+                      );
+                    })}
+                  </ul>
+                </div>
+              );
+            })}
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}