Move AMP iframe and Psammead components to MediaLoader

[amoore108]

Overall changes

• Moves amp-iframe to MediaLoader for AMP media rendering
• Moves PlayButton, Message, NoScript and Guidance components out of Psammead and into MediaLoader and uplifts them to TS
• Rejigs the way we style landscape and portrait media, moving the bulk of the layout to the figure element. This ensures that all content within the figure element flows with the aspect-ratio that is set
• Updates snapshots where necessary
• Removes now old AVPlayer and MediaPlayer components, as well as Psammead components no longer used

Testing

1. Visit MediaArticlePage http://localhost:7080/hausa/articles/cdx6ddxw755o.amp?renderer_env=live
2. Confirm the gray BBC placeholder loads before showing a 404/500 window where the media player should be (this is expected as its running locally and attempting to hit a Test endpoint) - You can get around this by appending ?renderer_env=<environment> to the end of the ampIframeUrl variable:
   

   simorgh/src/app/components/MediaLoader/index.tsx

   Line 284 in 994be3c

   src={ampIframeUrl}

3. Disable JS
4. Confirm NoJS messaging appears
5. Repeat for ArticlePage: http://localhost:7080/sport/cricket/articles/cvg37wdd7geo.amp?renderer_env=live
6. Check Storybook story renders https://amp-iframe-externalembed-constructor--5d28eb3fe163f6002046d6fa.chromatic.com/?path=/story/components-medialoader--portrait

Helpful Links

Add Links to useful resources related to this PR if applicable.

Coding Standards

Repository use guidelines

[amoore108]

We need to pass in embedded into the stylesheets because AMP will iframe and ultimately render this component. So some of the styles should only apply to the outer figure outside of the iframe and not the inner figure inside the iframe, and vice versa 🫠