WS-2095: Add share function to video carousels (Productionised)

[emilysaffron]

Resolves JIRA: https://bbc.atlassian.net/browse/WS-2095 (started off as a spike PR WS-1959)

Summary

Following webcores pattern for a share button within the player:

• Loads in a custom SMP plugin created by Webcore SFV to give access to the shadow-dom of the media player for a Video Overlay to be attached to.
• Creates a React Portal for a VideoOverlay component with the share button in to render within.
• Extracts the ShareButton into the components folder and refactors it slightly to use within both the overlay and the live page posts
• Adds refs to new instances of the MediaLoader to prevent infinite reloads.
• Renders link to aassociated MAP for each PV, link determined within FABL

To be done

• Get fabl PR reviewed and merged
• Bring all webcore copied components and their styling in line with our standards
• Type things correctly (remove all the anys)
• Refactor live posts to import the ShareButton from the components folder. The styling on the button will need to be conditional based on if it's in a modal or not. Modal ones need a black background and white text + svg, vice versa for live posts
• a11y swarm

Code changes

• A bullet point list of key code changes that have been made.

Developer Checklist

• UX
  • UX Criteria met (visual UX & screenreader UX)
• Accessibility
  • Accessibility Acceptance Criteria met
  • Accessibility swarm completed
  • Component Health updated
  • P1 accessibility bugs resolved
  • P2/P3 accessibility bugs planned (if not resolved)
• Security
  • Security issues addressed
  • Threat Model updated
• Documentation
  • Docs updated (runbook, READMEs)
• Testing
  • Feature tested on relevant environments
• Comms
  • Relevant parties notified of changes

Testing

• Manual Testing required?
  • Local (Ready-For-Test, Local)
  • Test (Ready-For-Test, Test)
  • Preview (Ready-For-Test, Preview)
  • Live (Ready-For-Test, Live)
• Manual Testing complete?
  • Local
  • Test
  • Preview
  • Live

Additional Testing Steps

You can see this on Preview2. You will see it on browsers that support navigator.share

See it in the PV Carousel on homepages and articles pages
https://simorgh2.belfrage-preview.test.api.bbc.com/portuguese?renderer_env=live
https://simorgh2.belfrage-preview.test.api.bbc.com/portuguese/articles/c3vev5q0pero?renderer_env=live

Check their is no regression to the Live Page share button:
https://simorgh2.belfrage-preview.test.api.bbc.com/hausa/live/c5yg31le621t?renderer_env=live

Useful Links

• Coding Standards
• Repository use guidelines
• Add Links to useful resources related to this PR if applicable.

[emilysaffron]

This is copied over from the webcore implementation, would question whether we need it once we progress with this a bit more but have copied everything over as 1-1 as possible for now to help debugging and eliminate possible sources of things going wrong.

[Isabella-Mitchell]

Have opted to not use State or useEffect because it did not seem needed here.