Add AV embed timeout handling to Media Player

[simonsinclair]

Resolves bbc/simorgh#4517.

Overall change: Handle AV embed timeouts gracefully by displaying an error message to users.

Code changes:

• Separate new timeout logic into a custom hook.
• Add default timeout value, overridable by prop.
• Refactor Media Player Canonical to use the hook.
• Update snapshots.
• Add unit test to validate timeout functionality.

Note:

• These changes are not designed to cover timeouts that occur once the player has loaded, as these are handled by SMP.
• We cannot run React code on AMP pages, so this feature will not exist in the AMP version of Media Player.

---

• I have assigned myself to this PR and the corresponding issues
• Automated jest tests added (for new features) or updated (for existing features)
• This PR requires manual testing

[rhenshaw56]

This is coming together nicely, however I was originally of the thought that we would reuse the psammead-embed-error component for this.

[simonsinclair]

This is coming together nicely, however I was originally of the thought that we would reuse the psammead-embed-error component for this.

Thanks, Rowland. You raise a good point. The reason I went down this route is because:

• psammead-embed-error is designed to display terminal errors that come from the server.
• Using an overlay - keeping the placeholder behind, etc - gives us a chance to re-engage with the user when softer errors like this occur.
• We might want to introduce other logic (like a retry button, loading indicator, etc) in the future and that would need to be contained by Media Player.

[rhenshaw56]

This is coming together nicely, however I was originally of the thought that we would reuse the psammead-embed-error component for this.

Thanks, Rowland. You raise a good point. The reason I went down this route is because:

* `psammead-embed-error` is designed to display terminal errors that come from the server.

* Using an overlay - keeping the placeholder behind, etc - gives us a chance to re-engage with the user when softer errors like this occur.

* We might want to introduce other logic (like a retry button, loading indicator, etc) in the future and that would need to be contained by Media Player.

Thanks for the concise explanation Simon.

I think with regards to #2544, we might have to decouple the timeout logic somehow but I believe this is not a priority right now. 👍

[jamesdonoh]

Thanks for figuring out a solution to this Simon. Although like Rowland I had assumed we would reuse the existing error component just to limit the number of components we have to think about.

My main other observation is that useTimeout.jsx would really benefit from some explanatory comments, but good otherwise.

[andrewscfc]

Thanks for sorting the wording @simonsinclair looks great :)

[jamesdonoh]

Looks great, few small queries but it's good to go as far as I'm concerned.

[jamesdonoh]

Might be good to document that this only applies to canonical and not AMP?

[simonsinclair]

It's not immediately obvious from the files changed diff on GitHub, but the readme is split into Canonical and AMP sections and this prop is only listed beneath Canonical.

[jamesdonoh]

Comments in this file are excellent.

[jamesdonoh]

The value of .current is guaranteed to be defined at this point, right?

[simonsinclair]

If iframeRef is created as documented (as a React Ref), it will be, but perhaps this should be more defensively written. I deliberated over this for a while and appreciate you raising it. It should probably throw if current is falsy. I'll make this change now.

[paruchurisilpa]

Looks good to me..