Move AMP iframe and Psammead components to MediaLoader

src/app/components/MediaLoader/Amp/index.styles.ts

@@ -0,0 +1,26 @@
+import BASE64_PLACEHOLDER_IMAGE from '#app/components/Image/base64Placeholder';
+import { css, Theme } from '@emotion/react';
+
+export default {
+  ampIframeWrapper: ({ palette }: Theme) =>
+    css({
+      position: 'relative',
+      overflow: 'hidden',
+      backgroundColor: palette.LUNAR,
+      height: '100%',
+    }),
+  ampIframePlaceholder: ({ mq }: Theme) =>
+    css({
+      backgroundImage: `url(${BASE64_PLACEHOLDER_IMAGE})`,
+      backgroundPosition: 'center center',
+      backgroundRepeat: ' no-repeat',
+      backgroundSize: '60px 17px',
+
+      [mq.GROUP_2_MIN_WIDTH]: {
+        backgroundSize: ' 77px 22px',
+      },
+      [mq.GROUP_4_MIN_WIDTH]: {
+        backgroundSize: ' 93px 27px',
+      },
+    }),
+};

src/app/components/MediaLoader/Amp/index.test.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import {
+  act,
+  render,
+} from '#app/components/react-testing-library-with-providers';
+import Amp from './index';
+
+const mockAmpIframeUrl = 'https://www.bbc.com/news/av-embeds/123456789';
+
+describe('Amp', () => {
+  it('should render an amp-iframe with the correct attributes', async () => {
+    let container;
+
+    await act(async () => {
+      ({ container } = render(<Amp src={mockAmpIframeUrl} />));
+    });
+
+    const ampIframe = (container as unknown as HTMLElement).querySelector(
+      'amp-iframe',
+    );
+
+    expect(ampIframe).toBeInTheDocument();
+  });
+
+  it('should render amp-iframe placeholder', async () => {
+    let container;
+
+    await act(async () => {
+      ({ container } = render(<Amp src={mockAmpIframeUrl} />));
+    });
+
+    const ampImg = (container as unknown as HTMLElement).querySelector(
+      'amp-iframe > div',
+    );
+
+    expect(ampImg).toBeInTheDocument();
+  });
+});

src/app/legacy/components/MediaPlayer/Amp/index.jsx → src/app/components/MediaLoader/Amp/index.tsx

@@ -1,7 +1,9 @@
-import React from 'react';
+/** @jsx jsx */
+
+import { jsx } from '@emotion/react';
 import { Helmet } from 'react-helmet';
-import ImagePlaceholder from '#psammead/psammead-image-placeholder/src';
 import Message from '../Message';
+import styles from './index.styles';
 
 const AmpHead = () => (
   <Helmet>
@@ -13,39 +15,51 @@ const AmpHead = () => (
   </Helmet>
 );
 
-const AmpMediaPlayer = ({
+type Props = {
+  src?: string;
+  placeholderSrc?: string;
+  placeholderSrcset?: string;
+  title?: string;
+  noJsMessage?: string;
+};
+
+const AmpMediaLoader = ({
   src,
   placeholderSrc,
-  placeholderSrcset = null,
+  placeholderSrcset,
   title,
   noJsMessage,
-  service,
-}) => {
+}: Props) => {
   return (
-    <>
+    <div css={styles.ampIframeWrapper}>
       <AmpHead />
       <amp-iframe
         sandbox="allow-scripts allow-same-origin"
         layout="fill"
+        // @ts-expect-error - 'scrolling' does not exist in type
         scrolling="no"
         frameborder="0"
         src={src}
         title={title}
         allowfullscreen="allowfullscreen"
         data-e2e="media-player"
       >
-        <ImagePlaceholder ratio={56.25} placeholder="" />
+        <div
+          data-e2e="image-placeholder"
+          // @ts-expect-error - 'placeholder' does not exist in type. This is used by AMP to show a placeholder image while the iframe is loading
+          placeholder=""
+          css={styles.ampIframePlaceholder}
+        />
         <noscript>
           <Message
-            service={service}
             message={noJsMessage}
             placeholderSrc={placeholderSrc}
             placeholderSrcset={placeholderSrcset}
           />
         </noscript>
       </amp-iframe>
-    </>
+    </div>
   );
 };
 
-export default AmpMediaPlayer;
+export default AmpMediaLoader;

src/app/legacy/components/MediaPlayer/Message/__snapshots__/index.test.jsx.snap → src/app/components/MediaLoader/Message/__snapshots__/index.test.tsx.snap

@@ -2,17 +2,9 @@
 
 exports[`Media Message matches media message snapshot 1`] = `
 .emotion-0 {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-}
-
-.emotion-2 {
-  font-family: Helmet,Freesans,Helvetica,Arial,sans-serif;
-  font-weight: 400;
+  font-family: ReithSans,Helvetica,Arial,sans-serif;
   font-style: normal;
+  font-weight: 400;
   font-size: 0.9375rem;
   line-height: 1.125rem;
   width: 100%;
@@ -25,47 +17,53 @@ exports[`Media Message matches media message snapshot 1`] = `
   background-color: rgba(34, 34, 34, 0.75);
 }
 
+@media (min-width: 20rem) and (max-width: 37.4375rem) {
+  .emotion-0 {
+    font-size: 0.9375rem;
+    line-height: 1.125rem;
+  }
+}
+
 @media (min-width: 37.5rem) {
-  .emotion-2 {
+  .emotion-0 {
     font-size: 0.875rem;
+    line-height: 1.125rem;
   }
 }
 
-@media screen and (-ms-high-contrast: active) {
-  .emotion-2 {
+@media screen and (forced-colors: active) {
+  .emotion-0 {
     background-color: transparent;
   }
 }
 
-.emotion-4 {
+.emotion-1 {
   display: block;
   font-weight: normal;
   bottom: 0;
   position: absolute;
   padding: 0.5rem;
 }
 
-@media screen and (-ms-high-contrast: active) {
-  .emotion-4 {
-    background-color: window;
+@media (min-width: 25rem) {
+  .emotion-1 {
+    padding: 1rem;
   }
 }
 
-@media (min-width: 25rem) {
-  .emotion-4 {
-    padding: 1rem;
+@media screen and (forced-colors: active) {
+  .emotion-1 {
+    background-color: window;
   }
 }
 
 <div>
-  <div
-    class="emotion-0 emotion-1"
-  >
+  <div>
     <div
-      class="emotion-2 emotion-3"
+      class="emotion-0"
     >
       <strong
-        class="emotion-4 emotion-5"
+        class="emotion-1"
       >
         Контент більше не доступний
       </strong>

src/app/components/MediaLoader/Message/index.styles.ts

@@ -0,0 +1,44 @@
+import { css, Theme } from '@emotion/react';
+
+const NOJS_BACKGROUND_COLOUR = 'rgba(34, 34, 34, 0.75)';
+
+export default {
+  messageWrapper: ({ fontVariants, fontSizes, palette, mq }: Theme) =>
+    css({
+      ...fontVariants.sansRegular,
+      ...fontSizes.longPrimer,
+      width: '100%',
+      height: '100%',
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      border: `0.0625rem solid transparent`,
+      color: palette.WHITE,
+      backgroundColor: NOJS_BACKGROUND_COLOUR,
+
+      [mq.FORCED_COLOURS]: {
+        backgroundColor: 'transparent',
+      },
+    }),
+  message: ({ spacings, mq }: Theme) =>
+    css({
+      display: 'block',
+      fontWeight: 'normal',
+      bottom: 0,
+      position: 'absolute',
+      padding: `${spacings.FULL}rem`,
+      [mq.GROUP_2_MIN_WIDTH]: {
+        padding: `${spacings.DOUBLE}rem`,
+      },
+      [mq.FORCED_COLOURS]: {
+        backgroundColor: 'window',
+      },
+    }),
+  messageImage: () =>
+    css({
+      position: 'absolute',
+      inset: 0,
+      width: '100%',
+      height: '100%',
+    }),
+};

src/app/legacy/components/MediaPlayer/Message/index.test.jsx → src/app/components/MediaLoader/Message/index.test.tsx

@@ -1,12 +1,11 @@
 import React from 'react';
-import { render } from '../../../../components/react-testing-library-with-providers';
+import { render } from '#app/components/react-testing-library-with-providers';
 import Message from './index';
 
 describe('Media Message', () => {
   it('should display the media message', () => {
     const { getByText } = render(
       <Message
-        service="news"
         message="Please enable Javascript or try a different browser"
         placeholderSrc="http://foo.bar/placeholder.png"
         placeholderSrcset="http://foo.bar/placeholder.png"
@@ -20,7 +19,7 @@ describe('Media Message', () => {
 
   it('matches media message snapshot', () => {
     const { container } = render(
-      <Message message="Контент більше не доступний" service="ukrainian" />,
+      <Message message="Контент більше не доступний" />,
     );
     expect(container).toMatchSnapshot();
   });

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

@@ -0,0 +1,33 @@
+/** @jsx jsx */
+
+import { jsx } from '@emotion/react';
+import styles from './index.styles';
+
+type Props = {
+  message?: string;
+  placeholderSrc?: string;
+  placeholderSrcset?: string;
+};
+
+const Message = ({
+  message = '',
+  placeholderSrc = '',
+  placeholderSrcset = '',
+}: Props) => (
+  <div>
+    {placeholderSrc && (
+      <img
+        alt=""
+        src={placeholderSrc}
+        srcSet={placeholderSrcset}
+        aria-hidden="true"
+        css={styles.messageImage}
+      />
+    )}
+    <div css={styles.messageWrapper}>
+      <strong css={styles.message}>{message}</strong>
+    </div>
+  </div>
+);
+
+export default Message;