fix: add frameIndex to onSubjectReady callback

zooniverse · Feb 17, 2025 · 7eea142 · 7eea142
1 parent 415710a
commit 7eea142
Show file tree

Hide file tree

Showing 5 changed files with 7 additions and 5 deletions.
diff --git a/...ssifier/components/SubjectViewer/components/MultiFrameViewer/MultiFrameViewerContainer.js b/...ssifier/components/SubjectViewer/components/MultiFrameViewer/MultiFrameViewerContainer.js
@@ -77,6 +77,7 @@ function MultiFrameViewerContainer({
   // TODO: replace this with a better function to parse the image location from a subject.
   const imageLocation = subject ? subject.locations[frame] : null
   const { img, error, loading, subjectImage } = useSubjectImage({
+    frame,
     src: imageLocation?.url,
     onReady,
     onError

diff --git a/...s/SubjectViewer/components/SeparateFramesViewer/components/SeparateFrame/SeparateFrame.js b/...s/SubjectViewer/components/SeparateFramesViewer/components/SeparateFrame/SeparateFrame.js
@@ -32,6 +32,7 @@ const SeparateFrame = ({
   onReady = DEFAULT_HANDLER
 }) => {
   const { img, error, loading, subjectImage } = useSubjectImage({
+    frame,
     src: frameUrl,
     onReady,
     onError

diff --git a/packages/lib-classifier/src/hooks/Readme.md b/packages/lib-classifier/src/hooks/Readme.md
@@ -104,7 +104,7 @@ A custom hook that fetches an image from a URL, with a ref to the image's DOM no
 Usage:
 ```jsx
 // img is a DOM img. subjectImage is a React ref to the element that displays the image.
-const { img, error, loading, subjectImage } = useSubjectImage({ src, onReady, onError })
+const { img, error, loading, subjectImage } = useSubjectImage({ frame, src, onReady, onError })
 
 if (loading) {
   return <p>The image is still loading.</p>

diff --git a/packages/lib-classifier/src/hooks/useSubjectImage.js b/packages/lib-classifier/src/hooks/useSubjectImage.js
@@ -1,7 +1,7 @@
 import { useEffect, useRef } from 'react'
 import { useProgressiveImage } from '@zooniverse/react-components/hooks'
 
-export default function useSubjectImage({ src, onReady, onError }) {
+export default function useSubjectImage({ frame = 0, src, onReady, onError }) {
   const subjectImage = useRef()
 
   const { img, error, loading } = useProgressiveImage({
@@ -20,7 +20,7 @@ export default function useSubjectImage({ src, onReady, onError }) {
         ? svgImage.getBoundingClientRect()
         : {}
       const target = { clientHeight, clientWidth, naturalHeight, naturalWidth }
-      onReady({ target })
+      onReady({ target }, frame)
     }
   }
 

diff --git a/packages/lib-classifier/src/store/SubjectViewerStore/SubjectViewerStore.js b/packages/lib-classifier/src/store/SubjectViewerStore/SubjectViewerStore.js
@@ -115,15 +115,15 @@ const SubjectViewer = types
         self.loadingState = asyncStates.error
       },
 
-      onSubjectReady (event) {
+      onSubjectReady (event, frameIndex = 0) {
         const { target = {} } = event || {}
         const {
           clientHeight = 0,
           clientWidth = 0,
           naturalHeight = 0,
           naturalWidth = 0
         } = target || {}
-        self.dimensions.push({ clientHeight, clientWidth, naturalHeight, naturalWidth })
+        self.dimensions[frameIndex] = { clientHeight, clientWidth, naturalHeight, naturalWidth }
         self.rotation = 0
         self.loadingState = asyncStates.success
       },