Add AV embed timeout handling to Media Player

packages/components/psammead-media-player/CHANGELOG.md

@@ -3,6 +3,7 @@
 <!-- prettier-ignore -->
 | Version       | Description                                                                                                                  |
 | ------------- | ---------------------------------------------------------------------------------------------------------------------------- |
+| 2.5.0 | [PR#2836](https://github.com/bbc/psammead/pull/2836) Add AV embed timeout handling. |
 | 2.4.4 | [PR#2830](https://github.com/bbc/psammead/pull/2830) Talos - Bump Dependencies - @bbc/psammead-play-button |
 | 2.4.3 | [PR#2827](https://github.com/bbc/psammead/pull/2827) Talos - Bump Dependencies - @bbc/psammead-assets |
 | 2.4.2 | [PR#2806](https://github.com/bbc/psammead/pull/2806) Fix StyledPlaceholder cursor when Javascript is disabled |

packages/components/psammead-media-player/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bbc/psammead-media-player",
-  "version": "2.4.4",
+  "version": "2.5.0",
   "description": "Provides a media player with optional placeholder",
   "main": "dist/index.js",
   "module": "esm/index.js",

packages/components/psammead-media-player/src/Canonical/__snapshots__/index.test.jsx.snap

@@ -2,21 +2,30 @@
 
 exports[`Media Player: Canonical should render an iframe 1`] = `
 .c0 {
+  left: 0;
+  overflow: hidden;
   position: absolute;
   top: 0;
-  left: 0;
   width: 100%;
   height: 100%;
+}
+
+.c1 {
   border: 0;
-  overflow: hidden;
+  height: 100%;
+  width: 100%;
 }
 
-<iframe
-  allow="autoplay; fullscreen"
-  allowfullscreen=""
+<div
   class="c0"
-  scrolling="no"
-  src="https://foo.bar/iframe"
-  title="Media player"
-/>
+>
+  <iframe
+    allow="autoplay; fullscreen"
+    allowfullscreen=""
+    class="c1"
+    scrolling="no"
+    src="https://foo.bar/iframe"
+    title="Media player"
+  />
+</div>
 `;

packages/components/psammead-media-player/src/Canonical/index.jsx

@@ -1,38 +1,63 @@
-import React from 'react';
+import React, { useState, useRef } from 'react';
 import { string } from 'prop-types';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
+import Guidance from '../Guidance';
+import useTimeout from '../useTimeout';
 
-const Canonical = ({ src, title, placeholderSrc }) => {
-  const backgroundStyle = `
-    background-image: url(${placeholderSrc});
-    background-repeat: no-repeat;
-    background-size: contain;
-  `;
+const TIMEOUT_MS = 3000;
 
-  const StyledIframe = styled.iframe`
+const Canonical = ({ service, src, title, placeholderSrc }) => {
+  const [hasTimedOut, setHasTimedOut] = useState(null);
+  const iframe = useRef(null);
+
+  useTimeout(setHasTimedOut, iframe, TIMEOUT_MS);
+
+  const CanonicalWrapper = styled.div`
+    left: 0;
+    overflow: hidden;
     position: absolute;
     top: 0;
-    left: 0;
     width: 100%;
     height: 100%;
+    ${placeholderSrc &&
+      css`
+        background-image: url(${placeholderSrc});
+        background-repeat: no-repeat;
+        background-size: contain;
+      `}
+  `;
+
+  const StyledIframe = styled.iframe`
     border: 0;
-    overflow: hidden;
-    ${placeholderSrc ? backgroundStyle : ''}
+    height: 100%;
+    width: 100%;
   `;
 
   return (
-    <StyledIframe
-      src={src}
-      title={title}
-      allow="autoplay; fullscreen"
-      scrolling="no"
-      gesture="media"
-      allowFullScreen
-    />
+    <CanonicalWrapper>
+      {hasTimedOut ? (
+        <Guidance
+          service={service}
+          guidanceMessage="The server did not respond. Please check your connection and try again."
+          noJsClassName="no-js"
+        />
+      ) : (
+        <StyledIframe
+          ref={iframe}
+          src={src}
+          title={title}
+          allow="autoplay; fullscreen"
+          scrolling="no"
+          gesture="media"
+          allowFullScreen
+        />
+      )}
+    </CanonicalWrapper>
   );
 };
 
 Canonical.propTypes = {
+  service: string.isRequired,
   src: string.isRequired,
   title: string.isRequired,
   placeholderSrc: string,

packages/components/psammead-media-player/src/__snapshots__/index.test.jsx.snap

@@ -685,26 +685,35 @@ exports[`Media Player: Canonical Entry renders an iframe when showPlaceholder is
 }
 
 .c1 {
+  left: 0;
+  overflow: hidden;
   position: absolute;
   top: 0;
-  left: 0;
   width: 100%;
   height: 100%;
+}
+
+.c2 {
   border: 0;
-  overflow: hidden;
+  height: 100%;
+  width: 100%;
 }
 
 <div
   class="c0"
 >
-  <iframe
-    allow="autoplay; fullscreen"
-    allowfullscreen=""
+  <div
     class="c1"
-    scrolling="no"
-    src="http://foo.bar/iframe"
-    title="Media player"
-  />
+  >
+    <iframe
+      allow="autoplay; fullscreen"
+      allowfullscreen=""
+      class="c2"
+      scrolling="no"
+      src="http://foo.bar/iframe"
+      title="Media player"
+    />
+  </div>
 </div>
 `;
 
@@ -716,26 +725,35 @@ exports[`Media Player: Canonical Entry renders the audio skin 1`] = `
 }
 
 .c1 {
+  left: 0;
+  overflow: hidden;
   position: absolute;
   top: 0;
-  left: 0;
   width: 100%;
   height: 100%;
+}
+
+.c2 {
   border: 0;
-  overflow: hidden;
+  height: 100%;
+  width: 100%;
 }
 
 <div
   class="c0"
 >
-  <iframe
-    allow="autoplay; fullscreen"
-    allowfullscreen=""
+  <div
     class="c1"
-    scrolling="no"
-    src="https://www.test.bbc.com/ws/av-embeds/media/bbc_korean_radio/liveradio"
-    title="Audio player"
-  />
+  >
+    <iframe
+      allow="autoplay; fullscreen"
+      allowfullscreen=""
+      class="c2"
+      scrolling="no"
+      src="https://www.test.bbc.com/ws/av-embeds/media/bbc_korean_radio/liveradio"
+      title="Audio player"
+    />
+  </div>
 </div>
 `;
 

packages/components/psammead-media-player/src/index.jsx

@@ -51,7 +51,12 @@ export const CanonicalMediaPlayer = ({
           noJsMessage={noJsMessage}
         />
       ) : (
-        <Canonical src={src} title={title} placeholderSrc={placeholderSrc} />
+        <Canonical
+          service={service}
+          src={src}
+          title={title}
+          placeholderSrc={placeholderSrc}
+        />
       )}
     </StyledContainer>
   );

packages/components/psammead-media-player/src/useTimeout.jsx

@@ -0,0 +1,22 @@
+import { useRef, useEffect } from 'react';
+
+const useTimeout = (callback, iframe, timeout) => {
+  const timer = useRef(null);
+
+  const handleLoad = () => {
+    clearTimeout(timer.current);
+    callback(false);
+  };
+
+  useEffect(() => {
+    iframe.current.addEventListener('load', handleLoad);
+    timer.current = setTimeout(() => {
+      callback(true);
+    }, timeout);
+    return () => {
+      clearTimeout(timer.current);
+    };
+  }, []);
+};
+
+export default useTimeout;