fix(gatsby-image): add matchMedia to fix wrong aspect ratio and dimensions in art-directed image arrays (#19887)

* fix query for wrong aspect ratio

* exchange fixed[0] to getCurrentSrcData({ fixed  }) to get correct dimensions

* Update packages/gatsby-image/src/index.js

change wording according to review

Co-Authored-By: Peter van der Zee <209817+pvdz@users.noreply.github.com>

* change functions according to reviews by @pvdz

* adapt jsdocs to change requests

Author: timhagn

packages/gatsby-image/src/__tests__/index.js

@@ -119,6 +119,22 @@ const setupImages = (
 }
 
 describe(`<Image />`, () => {
+  const OLD_MATCH_MEDIA = window.matchMedia
+  beforeEach(() => {
+    window.matchMedia = jest.fn(media =>
+      media === `only screen and (min-width: 1024px)`
+        ? {
+            matches: true,
+          }
+        : {
+            matches: false,
+          }
+    )
+  })
+  afterEach(() => {
+    window.matchMedia = OLD_MATCH_MEDIA
+  })
+
   it(`should render fixed size images`, () => {
     const component = setup()
     expect(component).toMatchSnapshot()
@@ -204,6 +220,66 @@ describe(`<Image />`, () => {
     expect(console.warn).toBeCalled()
   })
 
+  it(`should select the correct mocked image of fluid variants provided.`, () => {
+    const tripleFluidImageShapeMock = fluidImagesShapeMock.concat({
+      aspectRatio: 5,
+      src: `test_image_4.jpg`,
+      srcSet: `third other srcSet`,
+      srcSetWebp: `third other srcSetWebp`,
+      sizes: `(max-width: 1920px) 100vw, 1920px`,
+      base64: `string_of_base64`,
+      media: `only screen and (min-width: 1024px)`,
+    })
+    const { container } = render(
+      <Image
+        backgroundColor
+        className={`fluidArtDirectedImage`}
+        style={{ display: `inline` }}
+        title={`Title for the image`}
+        alt={`Alt text for the image`}
+        crossOrigin={`anonymous`}
+        fluid={tripleFluidImageShapeMock}
+        itemProp={`item-prop-for-the-image`}
+        placeholderStyle={{ color: `red` }}
+        placeholderClassName={`placeholder`}
+      />
+    )
+    const aspectPreserver = container.querySelector(`div div div`)
+    expect(aspectPreserver.getAttribute(`style`)).toEqual(
+      expect.stringMatching(/padding-bottom: 20%/)
+    )
+  })
+
+  it(`should select the correct mocked image of fixed variants provided.`, () => {
+    const tripleFixedImageShapeMock = fixedImagesShapeMock.concat({
+      width: 1024,
+      height: 768,
+      src: `test_image_4.jpg`,
+      srcSet: `third other srcSet`,
+      srcSetWebp: `third other srcSetWebp`,
+      base64: `string_of_base64`,
+      media: `only screen and (min-width: 1024px)`,
+    })
+    const { container } = render(
+      <Image
+        backgroundColor
+        className={`fixedArtDirectedImage`}
+        style={{ display: `inline` }}
+        title={`Title for the image`}
+        alt={`Alt text for the image`}
+        crossOrigin={`anonymous`}
+        fixed={tripleFixedImageShapeMock}
+        itemProp={`item-prop-for-the-image`}
+        placeholderStyle={{ color: `red` }}
+        placeholderClassName={`placeholder`}
+      />
+    )
+    const aspectPreserver = container.querySelector(`div div`)
+    expect(aspectPreserver.getAttribute(`style`)).toEqual(
+      expect.stringMatching(/width: 1024px; height: 768px;/)
+    )
+  })
+
   it(`should call onLoad and onError image events`, () => {
     const onLoadMock = jest.fn()
     const onErrorMock = jest.fn()

packages/gatsby-image/src/index.js

@@ -48,18 +48,54 @@ const convertProps = props => {
   return convertedProps
 }
 
+/**
+ * Checks if fluid or fixed are art-direction arrays.
+ *
+ * @param currentData  {{media?: string}[]}   The props to check for images.
+ * @return {boolean}
+ */
+const hasArtDirectionSupport = currentData =>
+  !!currentData &&
+  Array.isArray(currentData) &&
+  currentData.some(image => typeof image.media !== `undefined`)
+
+/**
+ * Tries to detect if a media query matches the current viewport.
+ * @property media   {{media?: string}}  A media query string.
+ * @return {boolean}
+ */
+const matchesMedia = ({ media }) =>
+  media ? isBrowser && !!window.matchMedia(media).matches : false
+
 /**
  * Find the source of an image to use as a key in the image cache.
  * Use `the first image in either `fixed` or `fluid`
- * @param {{fluid: {src: string}[], fixed: {src: string}[]}} args
+ * @param {{fluid: {src: string, media?: string}[], fixed: {src: string, media?: string}[]}} args
  * @return {string}
  */
 const getImageSrcKey = ({ fluid, fixed }) => {
-  const data = (fluid && fluid[0]) || (fixed && fixed[0])
+  const data = fluid ? getCurrentSrcData(fluid) : getCurrentSrcData(fixed)
 
   return data.src
 }
 
+/**
+ * Returns the current src - Preferably with art-direction support.
+ * @param currentData  {{media?: string}[]}   The fluid or fixed image array.
+ * @return {{src: string, media?: string}}
+ */
+const getCurrentSrcData = currentData => {
+  if (isBrowser && hasArtDirectionSupport(currentData)) {
+    // Do we have an image for the current Viewport?
+    const foundMedia = currentData.findIndex(matchesMedia)
+    if (foundMedia !== -1) {
+      return currentData[foundMedia]
+    }
+  }
+  // Else return the first image.
+  return currentData[0]
+}
+
 // Cache if we've seen an image before so we don't bother with
 // lazy-loading & fading in on subsequent mounts.
 const imageCache = Object.create({})
@@ -416,7 +452,7 @@ class Image extends React.Component {
 
     if (fluid) {
       const imageVariants = fluid
-      const image = imageVariants[0]
+      const image = getCurrentSrcData(fluid)
 
       return (
         <Tag
@@ -516,7 +552,7 @@ class Image extends React.Component {
 
     if (fixed) {
       const imageVariants = fixed
-      const image = imageVariants[0]
+      const image = getCurrentSrcData(fixed)
 
       const divStyle = {
         position: `relative`,