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/README.md

@@ -1,9 +1,9 @@
-# psammead-media-player · [![Known Vulnerabilities](https://snyk.io/test/github/bbc/psammead/badge.svg?targetFile=packages%2Fcomponents%2Fpsammead-brand%2Fpackage.json)](https://snyk.io/test/github/bbc/psammead?targetFile=packages%2Fcomponents%2Fpsammead-brand%2Fpackage.json) [![Dependency Status](https://david-dm.org/bbc/psammead.svg?path=packages/components/psammead-media-player)](https://david-dm.org/bbc/psammead?path=packages/components/psammead-media-player) [![peerDependencies Status](https://david-dm.org/bbc/psammead/peer-status.svg?path=packages/components/psammead-media-player)](https://david-dm.org/bbc/psammead?path=packages/components/psammead-media-player&type=peer) [![Storybook](https://raw.githubusercontent.com/storybooks/brand/master/badge/badge-storybook.svg?sanitize=true)](https://bbc.github.io/psammead/?path=/story/brand--default) [![GitHub license](https://img.shields.io/badge/license-Apache%202.0-blue.svg)](https://github.com/bbc/psammead/blob/latest/LICENSE) [![npm version](https://img.shields.io/npm/v/@bbc/psammead-media-player.svg)](https://www.npmjs.com/package/@bbc/psammead-media-player) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/bbc/psammead/blob/latest/CONTRIBUTING.md) 
+# psammead-media-player · [![Known Vulnerabilities](https://snyk.io/test/github/bbc/psammead/badge.svg?targetFile=packages%2Fcomponents%2Fpsammead-brand%2Fpackage.json)](https://snyk.io/test/github/bbc/psammead?targetFile=packages%2Fcomponents%2Fpsammead-brand%2Fpackage.json) [![Dependency Status](https://david-dm.org/bbc/psammead.svg?path=packages/components/psammead-media-player)](https://david-dm.org/bbc/psammead?path=packages/components/psammead-media-player) [![peerDependencies Status](https://david-dm.org/bbc/psammead/peer-status.svg?path=packages/components/psammead-media-player)](https://david-dm.org/bbc/psammead?path=packages/components/psammead-media-player&type=peer) [![Storybook](https://raw.githubusercontent.com/storybooks/brand/master/badge/badge-storybook.svg?sanitize=true)](https://bbc.github.io/psammead/?path=/story/brand--default) [![GitHub license](https://img.shields.io/badge/license-Apache%202.0-blue.svg)](https://github.com/bbc/psammead/blob/latest/LICENSE) [![npm version](https://img.shields.io/npm/v/@bbc/psammead-media-player.svg)](https://www.npmjs.com/package/@bbc/psammead-media-player) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/bbc/psammead/blob/latest/CONTRIBUTING.md)
 
 ## Description
 The `psammead-media-player` component exports two versions of our media player: an AMP version, and an Canonical version.
 
-At it's core, this component returns an `iframe` that is designed to frame a media asset. 
+At it's core, this component returns an `iframe` that is designed to frame a media asset.
 The AMP variant will render an `amp-iframe` with a nested `amp-img` to use as a placeholder.
 The Canonical variant will render a placeholder, that when clicked will load the `iframe` into view.
 
@@ -29,7 +29,7 @@ This component to be used at any point on the page, specifically when a media pl
 | [`mediaInfo`](#mediaInfo) | object | Yes   | - | `{ title: 'A vertical video pretending to be a cat title', duration: '2:30', durationSpoken: '2 minutes 11 seconds', datetime: 'PT2M30S' }`|
 | `noJsClassName` | string | No | `null` | `'no-js'` |
 | `noJsMessage` | string | Yes | - | `'This media cannot play in your browser. Please enable Javascript or use a different browser.'` |
-
+| `timeoutMs` | number | No | `5000` | `9001` |
 
 The `src` prop is required, as it tells the component what page it needs to embed.
 The `placeholderSrcset` prop is not required, as it allows image responsiveness and optimization depending on the size of the screen.
@@ -38,8 +38,9 @@ The `portrait` prop is not required, and defaults to `false`. This is to support
 The `showPlaceholder` boolean prop is also not required, and defaults to `true`.
 Assuming `showPlaceholder` is `true`, the `placeholderSrc` will be what image to display as the placeholder.
 The `noJsClassName` is an optional prop that defaults to `null` and is used to add styling support to certain elements when javascript is disabled in the browser.
-The `noJsMessage` is a required prop used display a fallback text when javascript is disabled in the browser. 
+The `noJsMessage` is a required prop used display a fallback text when javascript is disabled in the browser.
 The `mediaInfo` prop is required, and has the following properties.
+The `timeoutMs` prop allows you to override the default timeout value. If media fails to load in this time, users are shown a timeout message.
 
 #### mediaInfo
 
@@ -69,18 +70,19 @@ The `placeholderSrc` prop is required for AMP, as in order to have the component
 ```js
 import { CanonicalMediaPlayer } from '@bbc/psammead-media-player';
 
-const Container = ({ 
-  src, 
+const Container = ({
+  src,
   skin,
-  title, 
+  title,
   service,
-  portrait, 
-  showPlaceholder, 
-  placeholderSrc, 
-  placeholderSrcset, 
+  portrait,
+  showPlaceholder,
+  placeholderSrc,
+  placeholderSrcset,
   mediaInfo,
   noJsClassName,
   noJsMessage,
+  timeoutMs,
 }) => (
   <CanonicalMediaPlayer
     src={src}
@@ -94,6 +96,7 @@ const Container = ({
     mediaInfo={mediaInfo}
     noJsClassName={noJsClassName}
     noJsMessage={noJsMessage}
+    timeoutMs={timeoutMs}
   />
 )
 ```

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,45 +1,70 @@
-import React from 'react';
-import { string } from 'prop-types';
-import styled from 'styled-components';
-
-const Canonical = ({ src, title, placeholderSrc }) => {
-  const backgroundStyle = `
-    background-image: url(${placeholderSrc});
-    background-repeat: no-repeat;
-    background-size: contain;
-  `;
+import React, { useState, useRef } from 'react';
+import { string, number } from 'prop-types';
+import styled, { css } from 'styled-components';
+import Guidance from '../Guidance';
+import useTimeout from './useTimeout';
 
-  const StyledIframe = styled.iframe`
+const Canonical = ({ service, src, title, placeholderSrc, timeoutMs }) => {
+  const [hasTimedOut, setHasTimedOut] = useState(null);
+  const iframeRef = useRef(null);
+
+  useTimeout(setHasTimedOut, iframeRef, timeoutMs);
+
+  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="There was a problem loading this content. Please check your internet connection and try again."
+          noJsMessage=""
+        />
+      ) : (
+        <StyledIframe
+          ref={iframeRef}
+          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,
+  timeoutMs: number,
 };
 
 Canonical.defaultProps = {
   placeholderSrc: null,
+  timeoutMs: 5000,
 };
 
 export default Canonical;

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

@@ -1,10 +1,38 @@
 import React from 'react';
+import { render, act } from '@testing-library/react';
 import { shouldMatchSnapshot } from '@bbc/psammead-test-helpers';
 import Canonical from '.';
 
 describe('Media Player: Canonical', () => {
   shouldMatchSnapshot(
     'should render an iframe',
-    <Canonical src="https://foo.bar/iframe" title="Media player" />,
+    <Canonical
+      src="https://foo.bar/iframe"
+      title="Media player"
+      service="news"
+    />,
   );
+
+  it('should render a timeout message if timeout timer expires', () => {
+    jest.useFakeTimers();
+    const { getByText, unmount } = render(
+      <Canonical
+        src="https://foo.bar/iframe"
+        title="Media player"
+        service="news"
+        timeoutMs={2000}
+      />,
+    );
+
+    act(() => {
+      jest.runTimersToTime(3000);
+    });
+
+    expect(
+      getByText(
+        'There was a problem loading this content. Please check your internet connection and try again.',
+      ),
+    );
+    unmount();
+  });
 });

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

@@ -0,0 +1,33 @@
+import { useRef, useEffect } from 'react';
+
+/**
+ * useTimeout Hook.
+ * @param {function} callback A callback function that's passed `true` if the timer
+ *                            completes, and `false` if it's interrupted.
+ * @param {object} iframeRef A React Ref. providing access to an iframe DOM node.
+ * @param {number} timeout The number of milliseconds until the timer completes.
+ */
+const useTimeout = (callback, iframeRef, timeout) => {
+  // Persist a reference to the timer across renders. This is used to clearTimeout.
+  const timer = useRef(null);
+
+  const handleLoad = () => {
+    clearTimeout(timer.current);
+    callback(false);
+  };
+
+  // The function we pass to useEffect will run on mount, and the one we return will
+  // run on unmount. We don't do anything if the value of `timeout` can't be used.
+  // eslint-disable-next-line consistent-return
+  useEffect(() => {
+    if (timeout > 0) {
+      iframeRef.current.addEventListener('load', handleLoad, { once: true });
+      timer.current = setTimeout(() => {
+        callback(true);
+      }, timeout);
+      return () => clearTimeout(timer.current);
+    }
+  }, []);
+};
+
+export default useTimeout;

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>
 `;