fix: Amend behaviour of ambient video control button

[curlyfriesplease]

PR description

What is it doing?

Two amendments to the behaviour of play/pause button for ambient video, following Curtis' review:

1. Increase fadeout from 2s to 3s
2. Make the button appear on initial load, so the user knows it's there

Why is this required?

Design QA

link to Jira ticket:

ENG-5006

Quick Checklist:

• My PR title follows the Conventional Commit spec.

• I have filled out the PR description as per the template above.

• I have added tests to cover new or changed behaviour.

• I have updated any relevant documentation.

Important! - lastly, make sure to squash merge...

[AndyEPhipps]

Very nice, swanky improvement

It does make me wish for a CSS property for "currently visible in viewport" to completely close the loop (so here, the button wouldn't be hidden prematurely when offscreen), but still seems to be in the realm of crummy JS for the moment 😮‍💨

[curlyfriesplease]

Very nice, swanky improvement

It does make me wish for a CSS property for "currently visible in viewport" to completely close the loop (so here, the button wouldn't be hidden prematurely when offscreen), but still seems to be in the realm of crummy JS for the moment 😮‍💨

I think that could be done in JS with the Intersection Observer. Never used it myself but saw a talk on it once and it looks like a handy thing
Not going down that rabbithole today unless there is further Design QA in that regard!

[curlyfriesplease]

Gah. It won't publish likely because the auto-publish rule ignores certain semantic PR prefixes.
Going to retitle this as "fix: etc" and try again

[github-actions]

🎉 This PR is included in version 8.71.2 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀