Hide MagnifyHint when image is already fully magnified, and use magnified image in Lightbox (#50)

* Hide MagnifyHint when image is already fully magnified, and use magnified image in Lightbox

* Reset window width for future tests

* Add explanation for media width check

Author: kevhender

src/carousel/Carousel.js

@@ -104,6 +104,7 @@ const Carousel = React.forwardRef((props, ref) => {
             slideStyle={slideStyle}
             autoplay={autoplay}
             interval={interval}
+            containerStyle={{ alignItems: 'center' }}
           >
             {children}
           </AutoPlaySwipeableViews>

src/carousel/MediaCarousel.js

@@ -118,6 +118,7 @@ function MediaCarousel(props) {
   const [lightboxActive, setLightboxActive] = useState()
   const theme = useTheme()
   const isSmall = useMediaQuery(theme.breakpoints.down('xs'))
+  const isTouchScreen = useMediaQuery('(hover:none)')
 
   useEffect(() => {
     // Reset selection index when media changes
@@ -167,14 +168,28 @@ function MediaCarousel(props) {
   }
 
   if (media && media.full && media.full.some(item => item.magnify)) {
-    belowAdornments.push(
-      <MagnifyHint
-        key="magnify-hint"
-        over={over}
-        disableExpand={lightboxActive}
-        className={magnifyHintClassName}
-      />,
-    )
+    // we use the media's magnify.width prop to test if the image is larger than the screen size, and
+    // hide the magnify hint if so. this is a magic large number just used to ensure that the hint is
+    // shown if the width property is not defined for the given media
+    const MAX_WIDTH = 10000
+    let showHint = true
+    if (typeof window !== 'undefined') {
+      const { innerWidth } = window
+      const mediaWidth = get(media.full[selected], 'magnify.width', MAX_WIDTH)
+      if (mediaWidth <= innerWidth) {
+        showHint = false
+      }
+    }
+    if (showHint) {
+      belowAdornments.push(
+        <MagnifyHint
+          key="magnify-hint"
+          over={over}
+          disableExpand={lightboxActive}
+          className={magnifyHintClassName}
+        />,
+      )
+    }
   }
 
   if (lightboxActive) {
@@ -212,9 +227,10 @@ function MediaCarousel(props) {
               onLoad={i === 0 ? onFullSizeImagesLoaded : null}
               magnifyProps={magnifyProps}
               {...item}
-              magnify={isSmall ? undefined : item.magnify}
+              magnify={isTouchScreen ? undefined : item.magnify}
+              src={get(item, 'magnify.src', item.src)}
               imageProps={
-                lightboxActive && !isSmall
+                lightboxActive && !isTouchScreen
                   ? {
                       fill: false,
                       contain: true,

test/carousel/MediaCarousel.test.js

@@ -17,6 +17,11 @@ describe('MediaCarousel', () => {
 
   const mockMediaQuery = jest.spyOn(useMediaQuery, 'default')
 
+  beforeEach(() => {
+    window.innerWidth = 1024
+    window.dispatchEvent(new Event('resize'))
+  })
+
   afterEach(() => {
     wrapper.unmount()
   })
@@ -114,6 +119,13 @@ describe('MediaCarousel', () => {
       contain: true,
       src: media.full[0].magnify.src,
     })
+
+    expect(
+      wrapper
+        .find(Media)
+        .first()
+        .prop('src'),
+    ).toEqual(media.full[0].magnify.src)
   })
 
   it('should pass height 100% to Carousel if window size is small and lightbox is opened', () => {
@@ -130,6 +142,21 @@ describe('MediaCarousel', () => {
     ).toBe('100%')
   })
 
+  it('should hide the magnify hint if the lightbox is opened and the window is wider than the image', () => {
+    wrapper = mount(<MediaCarousel media={media} />)
+    wrapper.find(Carousel).simulate('click')
+    console.log(wrapper.find(MagnifyHint))
+    expect(wrapper.find(MagnifyHint)).toExist()
+
+    window.innerWidth = 1300
+    window.dispatchEvent(new Event('resize'))
+
+    wrapper = mount(<MediaCarousel media={media} />)
+    wrapper.find(Carousel).simulate('click')
+    console.log(wrapper.find(MagnifyHint))
+    expect(wrapper.find(MagnifyHint)).not.toExist()
+  })
+
   it('should pass thumbnail to render below the Carousel if image is not loaded and thumbnail is passed as prop ', () => {
     wrapper = mount(<MediaCarousel media={media} thumbnail={{ test: 'test' }} />)