Add current satellite loop

[greg-does-weather]

What does this PR do? 🛠️

• adds WFO grid information to the page-level metadata (available as weather.grid in Twig templates)
• fetches WFO satellite metadata from NESDIS (the WFO is part of the URL)
• builds correct GIF URL based on satellite metadata
• adds the most recent satellite loop GIF for the location's WFO as an image in the today tab

Deployed in my environment: https://weathergov-greg.app.cloud.gov/point/36.166/-86.779?#current

• closes Prototype: Satellite #1240

Screenshots (if appropriate): 📸

[partly-igor]

It's looking good, a few design observations:

1. The "Satellite" heading isn't showing up a "visually h2" I think because it's missing the wx prefix
2. The satellite gif should take up 100% width of the container. Currently it varies depending on the browser width
3. The most complicated issue (perhaps meriting its own PR) is that we need to allow users to stop the gif for general usability but also for accessibility standards. I've put together documentation in figma for how we could do this (along with the notes above). I've put the icons for the new buttons (play, pause) on the drive

[greg-does-weather]

I think you're right that stopping animation is a separate PR because there are a few things to consider with it. I'll write out my thinking here so I don't have to try to just keep it in my head.

There's no way to pause a GIF in the browser, and there are basically three options to support pause-like functionality:

1. When the image should be paused, replace it with a static image. When it should be playing, replace it with the GIF. This is an easy approach, but if the user "pauses" the GIF in the middle of the loop, instead of staying at and resuming from the middle, they'll instead see a flash as the image changes to the static image, and when they "unpause" the GIF, it will start playing from the beginning, not where they stopped it.
2. Replace the GIF with a series of images and animate them ourselves. This is harder and I'd advocate against it, but it does allow us to preserve the right tracking location within the animation. I think we already have access to the individual image frames via the metadata JSON, so at least we don't have to figure that out. Another argument against this approach is it requires the user's device to download each of the images individually, which could result in a lot more data going across the wire than downloading a single GIF.
3. We could talk to NESDIS about whether they could add a WebM (or similarly patent unencumbered encoding) video file in addition to the GIF. Oftentimes video files can be smaller than GIFs, and because they are videos, we can take advantage of browser-native video controls, including pausing and resuming. For example, the GOES16 GIF for MPX right now is about 7.7 MB. Converting it to WebM reduces that to 1.3 MB. (I don't want to make too many assumptions about how NESDIS is creating images, but ffmpeg can convert GIFs to WebM.)

[greg-does-weather]

For the width of the GIF, the source image is 600 pixels wide. Should we stretch the image to be 100% of the container? (Easy fix, just wanted to confirm!)

[partly-igor]

Yeah that makes sense – I do think we should pursue one of these options, and it sounds like option 3 would be the best path if we are able to get the video format. I am curious if converting the gif to WebM on our server is a possibility?

For the width – yeah, with a GIF I tend to be more forgiving about going a little bigger than the source size, and I think it'll look better than the variable border. I do want to make sure the aspect ratio stays the same (i.e stretch proportionally) though.

[github-actions]

This PR modifies theme Javascript or CSS assets but does not update the theme libraries file. Did you mean to update the appropriate version information in the libraries file?

[greg-does-weather]

Yeah, fully agreed. If we can get video, that's the best case. I'll open a ticket to dive deeper into the pause/play issue.

For now, I've updated this PR to make the satellite's minimum width 100%.

[github-actions]

This PR modifies theme Javascript or CSS assets but does not update the theme libraries file. Did you mean to update the appropriate version information in the libraries file?

[github-actions]

This PR modifies theme Javascript or CSS assets but does not update the theme libraries file. Did you mean to update the appropriate version information in the libraries file?

[partly-igor]

Changes look good, one small question about the alt text, but otherwise 👍

Should we open a ticket for the animation controls?

[partly-igor]

From some light searching, it seems like even though it's aria-hidden we should have a blank alt attribute on this.

I am wondering if there is a reason not to use alt text here instead of the sr-only div/paragraph above?