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

[timhagn]

Description

This PR introduces a matchMedia() query for fluid or fixed art-directed arrays.
This prevents retrieving the wrong image (the first from the art-direction stack ain't always the correct one) when ascertaining its aspectRatio or width & height respectively.

It adds tests for fluid or fixed art-directed stacks as well.

Of course this sadly only works during rendering in the browser, and falls back to the default first image from the array, but at least in the browser the correct image is chosen ; ).

Related Issues

Addresses #15189
Addresses a few of the pain points in ##13395
(And probably a few other issues ; )

Best,

Tim.

P.S.: Works quite well for me in gatsby-backrgound-image ; ).

[pvdz]

Thanks, I've left some comments. Please have a look :)

[timhagn]

Hi @pvdz,

thanks for the reviews, gonna continue attending them now. I just took the getCurrentSrcData() from gatsby-background-image and there is quite some use for just using fluid | fixed as an object (e.g. directly being able to pass (converted)props into the functions), but I see your point for gatsby-image. Am in the code : ).

Best,

Tim.

#done Adapted everything to your reviews / change requests and commented on the other two : ).

[pvdz]

Great improvement, thank you!

What's left is mostly about typing.

[timhagn]

Hi @pvdz,

thanks again for the reviews and sorry that I didn't get back to you earlier, was just fully booked last week and got me a stomach bug over the weekend : (.
Gonna try getting your change requests in this week, though.

Best,

Tim.

[timhagn]

Hi @pvdz,

while having a short break of both my bug & work and looking through your requests, I finally realize, why most of gatsby-image doesn't use JSDOC at all ^^.
But am at it.

Best, Tim.

[timhagn]

Hi again, hope I now id change all comments and requests accordingly : ).

Best,

Tim.

[timhagn]

Mkay. The starters_validate failing seems to have nothing to do with this PR, any ideas?

Best,

Tim.

EDIT: Oh, I forgot to merge in the other changes from upstream % ).

[timhagn]

Now everything should be according to your requests - else I'm just stripping out the JSDocs ; ).

[pvdz]

Thanks for addressing all the issues and for creating this PR in the first place :D

[timhagn]

Thanks @pvdz!

Hope I didn't get the JSDocs too wrong ^^. Glad something from gbi made it back to
gatbsy-image : ).

Best,

Tiim.

EDIT: Smiley split corrected; ).