From a05bd2d4599493b21cb2857629db19d9b2cbabc9 Mon Sep 17 00:00:00 2001
From: Simon Sinclair <simon.sinclair@bbc.co.uk>
Date: Fri, 20 Dec 2019 08:19:21 +0000
Subject: [PATCH 01/30] Bump package version

---
 packages/components/psammead-media-player/package-lock.json | 2 +-
 packages/components/psammead-media-player/package.json      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/components/psammead-media-player/package-lock.json b/packages/components/psammead-media-player/package-lock.json
index 2248637977..a09ccb0fcb 100644
--- a/packages/components/psammead-media-player/package-lock.json
+++ b/packages/components/psammead-media-player/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "@bbc/psammead-media-player",
-  "version": "2.4.4",
+  "version": "2.5.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/packages/components/psammead-media-player/package.json b/packages/components/psammead-media-player/package.json
index 93659e8a40..5ebaf7dd54 100644
--- a/packages/components/psammead-media-player/package.json
+++ b/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",

From 449938b9488355053a5bc830009ddd8525584bba Mon Sep 17 00:00:00 2001
From: Simon Sinclair <simon.sinclair@bbc.co.uk>
Date: Fri, 20 Dec 2019 08:40:28 +0000
Subject: [PATCH 02/30] Add changelog entry

---
 packages/components/psammead-media-player/CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/components/psammead-media-player/CHANGELOG.md b/packages/components/psammead-media-player/CHANGELOG.md
index af63c5c1a3..de55c6b2de 100644
--- a/packages/components/psammead-media-player/CHANGELOG.md
+++ b/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 |

From 338933f64b24510d9be01ecfe1d20099fbcf10f5 Mon Sep 17 00:00:00 2001
From: Simon Sinclair <simon@simonsinclair.com>
Date: Mon, 23 Dec 2019 16:05:17 +0000
Subject: [PATCH 03/30] Add useTimeout hook

---
 .../psammead-media-player/src/useTimeout.jsx  | 22 +++++++++++++++++++
 1 file changed, 22 insertions(+)
 create mode 100644 packages/components/psammead-media-player/src/useTimeout.jsx

diff --git a/packages/components/psammead-media-player/src/useTimeout.jsx b/packages/components/psammead-media-player/src/useTimeout.jsx
new file mode 100644
index 0000000000..54551e95cb
--- /dev/null
+++ b/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);
+    };
+  }, [iframe]);
+};
+
+export default useTimeout;

From 44b87f619e1331cbf0cd73a92b9839ee6da294cd Mon Sep 17 00:00:00 2001
From: Simon Sinclair <simon@simonsinclair.com>
Date: Mon, 23 Dec 2019 16:10:55 +0000
Subject: [PATCH 04/30] Refactor Canonical to use timeout hook

---
 .../src/Canonical/index.jsx                   | 65 +++++++++++++------
 .../psammead-media-player/src/index.jsx       |  7 +-
 2 files changed, 51 insertions(+), 21 deletions(-)

diff --git a/packages/components/psammead-media-player/src/Canonical/index.jsx b/packages/components/psammead-media-player/src/Canonical/index.jsx
index 4938605ddc..6e265075c2 100644
--- a/packages/components/psammead-media-player/src/Canonical/index.jsx
+++ b/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,
diff --git a/packages/components/psammead-media-player/src/index.jsx b/packages/components/psammead-media-player/src/index.jsx
index f7b588c334..4ed6035549 100644
--- a/packages/components/psammead-media-player/src/index.jsx
+++ b/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>
   );

From 50aa239184da81c421a5f5d66bb80f692cdd6add Mon Sep 17 00:00:00 2001
From: Simon Sinclair <simon@simonsinclair.com>
Date: Mon, 23 Dec 2019 16:18:13 +0000
Subject: [PATCH 05/30] Update snapshots

---
 .../__snapshots__/index.test.jsx.snap         | 27 ++++++----
 .../src/__snapshots__/index.test.jsx.snap     | 54 ++++++++++++-------
 2 files changed, 54 insertions(+), 27 deletions(-)

diff --git a/packages/components/psammead-media-player/src/Canonical/__snapshots__/index.test.jsx.snap b/packages/components/psammead-media-player/src/Canonical/__snapshots__/index.test.jsx.snap
index b9b3ff21dc..e74e1574a9 100644
--- a/packages/components/psammead-media-player/src/Canonical/__snapshots__/index.test.jsx.snap
+++ b/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>
 `;
diff --git a/packages/components/psammead-media-player/src/__snapshots__/index.test.jsx.snap b/packages/components/psammead-media-player/src/__snapshots__/index.test.jsx.snap
index de00d08315..ea691f2a94 100644
--- a/packages/components/psammead-media-player/src/__snapshots__/index.test.jsx.snap
+++ b/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>
 `;
 

From a0478357623164540e79200cbc28ccb53109f36d Mon Sep 17 00:00:00 2001
From: Simon Sinclair <simon@simonsinclair.com>
Date: Mon, 23 Dec 2019 16:42:11 +0000
Subject: [PATCH 06/30] Prune former effect dependency

---
 packages/components/psammead-media-player/src/useTimeout.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/psammead-media-player/src/useTimeout.jsx b/packages/components/psammead-media-player/src/useTimeout.jsx
index 54551e95cb..07e6738896 100644
--- a/packages/components/psammead-media-player/src/useTimeout.jsx
+++ b/packages/components/psammead-media-player/src/useTimeout.jsx
@@ -16,7 +16,7 @@ const useTimeout = (callback, iframe, timeout) => {
     return () => {
       clearTimeout(timer.current);
     };
-  }, [iframe]);
+  }, []);
 };
 
 export default useTimeout;

From c8dee83a7f471fb9354d1edc55e59471ef5a9eb4 Mon Sep 17 00:00:00 2001
From: Simon Sinclair <simon.sinclair@bbc.co.uk>
Date: Mon, 6 Jan 2020 15:33:56 +0000
Subject: [PATCH 07/30] Move useTimeout hook to Canonical

---
 .../components/psammead-media-player/src/Canonical/index.jsx    | 2 +-
 .../psammead-media-player/src/{ => Canonical}/useTimeout.jsx    | 0
 2 files changed, 1 insertion(+), 1 deletion(-)
 rename packages/components/psammead-media-player/src/{ => Canonical}/useTimeout.jsx (100%)

diff --git a/packages/components/psammead-media-player/src/Canonical/index.jsx b/packages/components/psammead-media-player/src/Canonical/index.jsx
index 6e265075c2..8a0d101aaf 100644
--- a/packages/components/psammead-media-player/src/Canonical/index.jsx
+++ b/packages/components/psammead-media-player/src/Canonical/index.jsx
@@ -2,7 +2,7 @@ import React, { useState, useRef } from 'react';
 import { string } from 'prop-types';
 import styled, { css } from 'styled-components';
 import Guidance from '../Guidance';
-import useTimeout from '../useTimeout';
+import useTimeout from './useTimeout';
 
 const TIMEOUT_MS = 3000;
 
diff --git a/packages/components/psammead-media-player/src/useTimeout.jsx b/packages/components/psammead-media-player/src/Canonical/useTimeout.jsx
similarity index 100%
rename from packages/components/psammead-media-player/src/useTimeout.jsx
rename to packages/components/psammead-media-player/src/Canonical/useTimeout.jsx

From 25166f9336105bfcae6b2d006c296d151251827c Mon Sep 17 00:00:00 2001
From: Simon Sinclair <simon.sinclair@bbc.co.uk>
Date: Mon, 6 Jan 2020 16:38:35 +0000
Subject: [PATCH 08/30] Bump TIMEOUT_MS to '5000'

---
 .../components/psammead-media-player/src/Canonical/index.jsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/psammead-media-player/src/Canonical/index.jsx b/packages/components/psammead-media-player/src/Canonical/index.jsx
index 8a0d101aaf..084bba107e 100644
--- a/packages/components/psammead-media-player/src/Canonical/index.jsx
+++ b/packages/components/psammead-media-player/src/Canonical/index.jsx
@@ -4,7 +4,7 @@ import styled, { css } from 'styled-components';
 import Guidance from '../Guidance';
 import useTimeout from './useTimeout';
 
-const TIMEOUT_MS = 3000;
+const TIMEOUT_MS = 5000;
 
 const Canonical = ({ service, src, title, placeholderSrc }) => {
   const [hasTimedOut, setHasTimedOut] = useState(null);

From 0f592b0cfe80c062d6f0682db4a635491d7f9f27 Mon Sep 17 00:00:00 2001
From: Simon Sinclair <simon.sinclair@bbc.co.uk>
Date: Mon, 6 Jan 2020 16:39:46 +0000
Subject: [PATCH 09/30] Rename 'iframe' reference to 'iframeRef'

---
 .../psammead-media-player/src/Canonical/index.jsx           | 6 +++---
 .../psammead-media-player/src/Canonical/useTimeout.jsx      | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/components/psammead-media-player/src/Canonical/index.jsx b/packages/components/psammead-media-player/src/Canonical/index.jsx
index 084bba107e..1f273586e5 100644
--- a/packages/components/psammead-media-player/src/Canonical/index.jsx
+++ b/packages/components/psammead-media-player/src/Canonical/index.jsx
@@ -8,9 +8,9 @@ const TIMEOUT_MS = 5000;
 
 const Canonical = ({ service, src, title, placeholderSrc }) => {
   const [hasTimedOut, setHasTimedOut] = useState(null);
-  const iframe = useRef(null);
+  const iframeRef = useRef(null);
 
-  useTimeout(setHasTimedOut, iframe, TIMEOUT_MS);
+  useTimeout(setHasTimedOut, iframeRef, TIMEOUT_MS);
 
   const CanonicalWrapper = styled.div`
     left: 0;
@@ -43,7 +43,7 @@ const Canonical = ({ service, src, title, placeholderSrc }) => {
         />
       ) : (
         <StyledIframe
-          ref={iframe}
+          ref={iframeRef}
           src={src}
           title={title}
           allow="autoplay; fullscreen"
diff --git a/packages/components/psammead-media-player/src/Canonical/useTimeout.jsx b/packages/components/psammead-media-player/src/Canonical/useTimeout.jsx
index 07e6738896..b58f3c38b8 100644
--- a/packages/components/psammead-media-player/src/Canonical/useTimeout.jsx
+++ b/packages/components/psammead-media-player/src/Canonical/useTimeout.jsx
@@ -1,6 +1,6 @@
 import { useRef, useEffect } from 'react';
 
-const useTimeout = (callback, iframe, timeout) => {
+const useTimeout = (callback, iframeRef, timeout) => {
   const timer = useRef(null);
 
   const handleLoad = () => {
@@ -9,7 +9,7 @@ const useTimeout = (callback, iframe, timeout) => {
   };
 
   useEffect(() => {
-    iframe.current.addEventListener('load', handleLoad);
+    iframeRef.current.addEventListener('load', handleLoad, { once: true });
     timer.current = setTimeout(() => {
       callback(true);
     }, timeout);

From 5e02b829904044aa78be1ee6e38c8d7b1a25bb11 Mon Sep 17 00:00:00 2001
From: Simon Sinclair <simon.sinclair@bbc.co.uk>
Date: Mon, 6 Jan 2020 16:41:21 +0000
Subject: [PATCH 10/30] Housekeeping

---
 .../psammead-media-player/src/Canonical/useTimeout.jsx      | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/components/psammead-media-player/src/Canonical/useTimeout.jsx b/packages/components/psammead-media-player/src/Canonical/useTimeout.jsx
index b58f3c38b8..7f806a3b7f 100644
--- a/packages/components/psammead-media-player/src/Canonical/useTimeout.jsx
+++ b/packages/components/psammead-media-player/src/Canonical/useTimeout.jsx
@@ -13,10 +13,8 @@ const useTimeout = (callback, iframeRef, timeout) => {
     timer.current = setTimeout(() => {
       callback(true);
     }, timeout);
-    return () => {
-      clearTimeout(timer.current);
-    };
-  }, []);
+    return () => clearTimeout(timer.current);
+  }, [timeout]);
 };
 
 export default useTimeout;

From 8362ee4e0d8e5adb49201b5afd7aa12d02d303d3 Mon Sep 17 00:00:00 2001
From: Simon Sinclair <simon.sinclair@bbc.co.uk>
Date: Mon, 6 Jan 2020 16:41:36 +0000
Subject: [PATCH 11/30] Add JSDoc

---
 .../psammead-media-player/src/Canonical/useTimeout.jsx      | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/packages/components/psammead-media-player/src/Canonical/useTimeout.jsx b/packages/components/psammead-media-player/src/Canonical/useTimeout.jsx
index 7f806a3b7f..dee05b086f 100644
--- a/packages/components/psammead-media-player/src/Canonical/useTimeout.jsx
+++ b/packages/components/psammead-media-player/src/Canonical/useTimeout.jsx
@@ -1,5 +1,11 @@
 import { useRef, useEffect } from 'react';
 
+/**
+ * useTimeout Hook.
+ * @param {function} callback A callback function that returns `true` or `false`.
+ * @param {object} iframeRef A React DOM reference to an iframe.
+ * @param {number} timeout The number of milliseconds until the timeout returns `true`.
+ */
 const useTimeout = (callback, iframeRef, timeout) => {
   const timer = useRef(null);
 

From 49fe6bbb92f592d5d5d760a7ed885fdfb7e66b2e Mon Sep 17 00:00:00 2001
From: Simon Sinclair <simon@simonsinclair.com>
Date: Tue, 7 Jan 2020 12:27:02 +0000
Subject: [PATCH 12/30] Remove hook dependency on 'timeout'

---
 .../psammead-media-player/src/Canonical/useTimeout.jsx          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/psammead-media-player/src/Canonical/useTimeout.jsx b/packages/components/psammead-media-player/src/Canonical/useTimeout.jsx
index dee05b086f..d4c5323293 100644
--- a/packages/components/psammead-media-player/src/Canonical/useTimeout.jsx
+++ b/packages/components/psammead-media-player/src/Canonical/useTimeout.jsx
@@ -20,7 +20,7 @@ const useTimeout = (callback, iframeRef, timeout) => {
       callback(true);
     }, timeout);
     return () => clearTimeout(timer.current);
-  }, [timeout]);
+  }, []);
 };
 
 export default useTimeout;

From 310ebcd275d84e75d0cce068fabcd58f6ad0666f Mon Sep 17 00:00:00 2001
From: Simon Sinclair <simon@simonsinclair.com>
Date: Tue, 7 Jan 2020 12:33:45 +0000
Subject: [PATCH 13/30] Expand on hook comments

---
 .../psammead-media-player/src/Canonical/useTimeout.jsx   | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/components/psammead-media-player/src/Canonical/useTimeout.jsx b/packages/components/psammead-media-player/src/Canonical/useTimeout.jsx
index d4c5323293..214ea1e938 100644
--- a/packages/components/psammead-media-player/src/Canonical/useTimeout.jsx
+++ b/packages/components/psammead-media-player/src/Canonical/useTimeout.jsx
@@ -2,11 +2,13 @@ import { useRef, useEffect } from 'react';
 
 /**
  * useTimeout Hook.
- * @param {function} callback A callback function that returns `true` or `false`.
+ * @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 DOM reference to an iframe.
- * @param {number} timeout The number of milliseconds until the timeout returns `true`.
+ * @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 = () => {
@@ -14,7 +16,10 @@ const useTimeout = (callback, iframeRef, timeout) => {
     callback(false);
   };
 
+  // This particular effect will run on mount and (the returned function) on unmount.
   useEffect(() => {
+    // The `current` property of a React DOM reference refers to the element we're
+    // attaching a `load` event handler to. This event will be removed after firing.
     iframeRef.current.addEventListener('load', handleLoad, { once: true });
     timer.current = setTimeout(() => {
       callback(true);

From b9bccce74bfca814ff418d5fe3309fa0f7751924 Mon Sep 17 00:00:00 2001
From: Simon Sinclair <simon@simonsinclair.com>
Date: Wed, 8 Jan 2020 16:03:31 +0000
Subject: [PATCH 14/30] Replace 'noJsClassName' with actual required prop

---
 .../components/psammead-media-player/src/Canonical/index.jsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/psammead-media-player/src/Canonical/index.jsx b/packages/components/psammead-media-player/src/Canonical/index.jsx
index 1f273586e5..8ede55589c 100644
--- a/packages/components/psammead-media-player/src/Canonical/index.jsx
+++ b/packages/components/psammead-media-player/src/Canonical/index.jsx
@@ -39,7 +39,7 @@ const Canonical = ({ service, src, title, placeholderSrc }) => {
         <Guidance
           service={service}
           guidanceMessage="The server did not respond. Please check your connection and try again."
-          noJsClassName="no-js"
+          noJsMessage=""
         />
       ) : (
         <StyledIframe

From deca192c1742f05052a6d689e9c833ffd55dab1c Mon Sep 17 00:00:00 2001
From: Simon Sinclair <simon@simonsinclair.com>
Date: Wed, 8 Jan 2020 16:49:27 +0000
Subject: [PATCH 15/30] Update JSDoc comment on 'iframeRef'

---
 .../psammead-media-player/src/Canonical/useTimeout.jsx          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/psammead-media-player/src/Canonical/useTimeout.jsx b/packages/components/psammead-media-player/src/Canonical/useTimeout.jsx
index 214ea1e938..137a81a0f5 100644
--- a/packages/components/psammead-media-player/src/Canonical/useTimeout.jsx
+++ b/packages/components/psammead-media-player/src/Canonical/useTimeout.jsx
@@ -4,7 +4,7 @@ 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 DOM reference to an iframe.
+ * @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) => {

From 9a876fea23d86b649c6800b8e19c1613bf4cbdbd Mon Sep 17 00:00:00 2001
From: Simon Sinclair <simon@simonsinclair.com>
Date: Wed, 8 Jan 2020 16:50:07 +0000
Subject: [PATCH 16/30] Protect against nullish 'timeout' and other insane
 values

---
 .../src/Canonical/useTimeout.jsx               | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/packages/components/psammead-media-player/src/Canonical/useTimeout.jsx b/packages/components/psammead-media-player/src/Canonical/useTimeout.jsx
index 137a81a0f5..8e6f9519b1 100644
--- a/packages/components/psammead-media-player/src/Canonical/useTimeout.jsx
+++ b/packages/components/psammead-media-player/src/Canonical/useTimeout.jsx
@@ -16,15 +16,17 @@ const useTimeout = (callback, iframeRef, timeout) => {
     callback(false);
   };
 
-  // This particular effect will run on mount and (the returned function) on unmount.
+  // 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(() => {
-    // The `current` property of a React DOM reference refers to the element we're
-    // attaching a `load` event handler to. This event will be removed after firing.
-    iframeRef.current.addEventListener('load', handleLoad, { once: true });
-    timer.current = setTimeout(() => {
-      callback(true);
-    }, timeout);
-    return () => clearTimeout(timer.current);
+    if (timeout > 0) {
+      iframeRef.current.addEventListener('load', handleLoad, { once: true });
+      timer.current = setTimeout(() => {
+        callback(true);
+      }, timeout);
+      return () => clearTimeout(timer.current);
+    }
   }, []);
 };
 

From 78b962ad79663614fec7ce38e8720f7b8d002cda Mon Sep 17 00:00:00 2001
From: Simon Sinclair <simon@simonsinclair.com>
Date: Wed, 8 Jan 2020 16:51:55 +0000
Subject: [PATCH 17/30] Refactor TIMEOUT_MS to be configurable

---
 .../psammead-media-player/src/Canonical/index.jsx      | 10 +++++-----
 .../components/psammead-media-player/src/index.jsx     |  6 +++++-
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/packages/components/psammead-media-player/src/Canonical/index.jsx b/packages/components/psammead-media-player/src/Canonical/index.jsx
index 8ede55589c..f66e46a826 100644
--- a/packages/components/psammead-media-player/src/Canonical/index.jsx
+++ b/packages/components/psammead-media-player/src/Canonical/index.jsx
@@ -1,16 +1,14 @@
 import React, { useState, useRef } from 'react';
-import { string } from 'prop-types';
+import { string, number } from 'prop-types';
 import styled, { css } from 'styled-components';
 import Guidance from '../Guidance';
 import useTimeout from './useTimeout';
 
-const TIMEOUT_MS = 5000;
-
-const Canonical = ({ service, src, title, placeholderSrc }) => {
+const Canonical = ({ service, src, title, placeholderSrc, timeoutMs }) => {
   const [hasTimedOut, setHasTimedOut] = useState(null);
   const iframeRef = useRef(null);
 
-  useTimeout(setHasTimedOut, iframeRef, TIMEOUT_MS);
+  useTimeout(setHasTimedOut, iframeRef, timeoutMs);
 
   const CanonicalWrapper = styled.div`
     left: 0;
@@ -61,10 +59,12 @@ Canonical.propTypes = {
   src: string.isRequired,
   title: string.isRequired,
   placeholderSrc: string,
+  timeoutMs: number,
 };
 
 Canonical.defaultProps = {
   placeholderSrc: null,
+  timeoutMs: 5000,
 };
 
 export default Canonical;
diff --git a/packages/components/psammead-media-player/src/index.jsx b/packages/components/psammead-media-player/src/index.jsx
index 4ed6035549..b00d8d867c 100644
--- a/packages/components/psammead-media-player/src/index.jsx
+++ b/packages/components/psammead-media-player/src/index.jsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import styled from 'styled-components';
-import { string, bool, oneOf, shape } from 'prop-types';
+import { string, bool, oneOf, shape, number } from 'prop-types';
 import Placeholder from './Placeholder';
 import Amp from './Amp';
 import Canonical from './Canonical';
@@ -31,6 +31,7 @@ export const CanonicalMediaPlayer = ({
   mediaInfo,
   noJsClassName,
   noJsMessage,
+  timeoutMs,
 }) => {
   const [placeholderActive, setPlaceholderActive] = useState(showPlaceholder);
   const handlePlaceholderClick = () => setPlaceholderActive(false);
@@ -56,6 +57,7 @@ export const CanonicalMediaPlayer = ({
           src={src}
           title={title}
           placeholderSrc={placeholderSrc}
+          timeoutMs={timeoutMs}
         />
       )}
     </StyledContainer>
@@ -106,6 +108,7 @@ CanonicalMediaPlayer.propTypes = {
     type: oneOf(['video', 'audio']),
     guidanceMessage: string,
   }).isRequired,
+  timeoutMs: number,
 };
 
 CanonicalMediaPlayer.defaultProps = {
@@ -115,6 +118,7 @@ CanonicalMediaPlayer.defaultProps = {
   placeholderSrc: null,
   placeholderSrcset: null,
   noJsClassName: null,
+  timeoutMs: null,
 };
 
 AmpMediaPlayer.propTypes = {

From e163eb1880e521983544642515592a936c99c393 Mon Sep 17 00:00:00 2001
From: Simon Sinclair <simon@simonsinclair.com>
Date: Wed, 8 Jan 2020 16:52:22 +0000
Subject: [PATCH 18/30] Update 'shoulder render an iframe' test

---
 .../psammead-media-player/src/Canonical/index.test.jsx      | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/components/psammead-media-player/src/Canonical/index.test.jsx b/packages/components/psammead-media-player/src/Canonical/index.test.jsx
index 87ea57e440..90d839719f 100644
--- a/packages/components/psammead-media-player/src/Canonical/index.test.jsx
+++ b/packages/components/psammead-media-player/src/Canonical/index.test.jsx
@@ -5,6 +5,10 @@ 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"
+    />,
   );
 });

From b8395ad5ff91d5c2c12a818d1c3be89fb967282b Mon Sep 17 00:00:00 2001
From: Simon Sinclair <simon@simonsinclair.com>
Date: Wed, 8 Jan 2020 17:00:12 +0000
Subject: [PATCH 19/30] Add 'should render a timeout message...' test

---
 .../src/Canonical/index.test.jsx              | 24 +++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/packages/components/psammead-media-player/src/Canonical/index.test.jsx b/packages/components/psammead-media-player/src/Canonical/index.test.jsx
index 90d839719f..26c1e16144 100644
--- a/packages/components/psammead-media-player/src/Canonical/index.test.jsx
+++ b/packages/components/psammead-media-player/src/Canonical/index.test.jsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { render, act } from '@testing-library/react';
 import { shouldMatchSnapshot } from '@bbc/psammead-test-helpers';
 import Canonical from '.';
 
@@ -11,4 +12,27 @@ describe('Media Player: Canonical', () => {
       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(
+        'The server did not respond. Please check your connection and try again.',
+      ),
+    );
+    unmount();
+  });
 });

From ae78387d16f98bf69a4aa99a8edebbd0bda248da Mon Sep 17 00:00:00 2001
From: Simon Sinclair <simon@simonsinclair.com>
Date: Wed, 8 Jan 2020 17:15:31 +0000
Subject: [PATCH 20/30] Add 'timeoutMs' prop to README

---
 packages/components/psammead-media-player/README.md | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/components/psammead-media-player/README.md b/packages/components/psammead-media-player/README.md
index a7bdabdf43..ce910f52a5 100644
--- a/packages/components/psammead-media-player/README.md
+++ b/packages/components/psammead-media-player/README.md
@@ -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.
@@ -40,6 +40,7 @@ Assuming `showPlaceholder` is `true`, the `placeholderSrc` will be what image to
 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 `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
 
@@ -81,6 +82,7 @@ const Container = ({
   mediaInfo,
   noJsClassName,
   noJsMessage,
+  timeoutMs,
 }) => (
   <CanonicalMediaPlayer
     src={src}
@@ -94,6 +96,7 @@ const Container = ({
     mediaInfo={mediaInfo}
     noJsClassName={noJsClassName}
     noJsMessage={noJsMessage}
+    timeoutMs={timeoutMs}
   />
 )
 ```

From 6fb2afe6bf0fec0269f5c2e718fad6dd5b6fa075 Mon Sep 17 00:00:00 2001
From: Simon Sinclair <simon@simonsinclair.com>
Date: Wed, 8 Jan 2020 17:16:46 +0000
Subject: [PATCH 21/30] Editor whitespace cleanup

---
 .../psammead-media-player/README.md           | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/packages/components/psammead-media-player/README.md b/packages/components/psammead-media-player/README.md
index ce910f52a5..2e19aa2897 100644
--- a/packages/components/psammead-media-player/README.md
+++ b/packages/components/psammead-media-player/README.md
@@ -1,9 +1,9 @@
-# psammead-media-player &middot; [![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 &middot; [![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.
 
@@ -38,7 +38,7 @@ 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.
 
@@ -70,15 +70,15 @@ 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,

From e8072b014cb1127558f1bd0133ae503b818ae14f Mon Sep 17 00:00:00 2001
From: Simon Sinclair <simon@simonsinclair.com>
Date: Thu, 9 Jan 2020 10:53:23 +0000
Subject: [PATCH 22/30] Update timeout message

---
 .../components/psammead-media-player/src/Canonical/index.jsx    | 2 +-
 .../psammead-media-player/src/Canonical/index.test.jsx          | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/components/psammead-media-player/src/Canonical/index.jsx b/packages/components/psammead-media-player/src/Canonical/index.jsx
index f66e46a826..0bf45ef9c7 100644
--- a/packages/components/psammead-media-player/src/Canonical/index.jsx
+++ b/packages/components/psammead-media-player/src/Canonical/index.jsx
@@ -36,7 +36,7 @@ const Canonical = ({ service, src, title, placeholderSrc, timeoutMs }) => {
       {hasTimedOut ? (
         <Guidance
           service={service}
-          guidanceMessage="The server did not respond. Please check your connection and try again."
+          guidanceMessage="There was a problem loading this content. Please check your internet connection and try again."
           noJsMessage=""
         />
       ) : (
diff --git a/packages/components/psammead-media-player/src/Canonical/index.test.jsx b/packages/components/psammead-media-player/src/Canonical/index.test.jsx
index 26c1e16144..88a447aadb 100644
--- a/packages/components/psammead-media-player/src/Canonical/index.test.jsx
+++ b/packages/components/psammead-media-player/src/Canonical/index.test.jsx
@@ -30,7 +30,7 @@ describe('Media Player: Canonical', () => {
 
     expect(
       getByText(
-        'The server did not respond. Please check your connection and try again.',
+        'There was a problem loading this content. Please check your internet connection and try again.',
       ),
     );
     unmount();

From 299ffb7297929bc0511c137e0a628c706213abdd Mon Sep 17 00:00:00 2001
From: Simon Sinclair <simon@simonsinclair.com>
Date: Thu, 9 Jan 2020 12:47:56 +0000
Subject: [PATCH 23/30] Amend default timeoutMs value on parent for clarity

---
 packages/components/psammead-media-player/src/index.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/psammead-media-player/src/index.jsx b/packages/components/psammead-media-player/src/index.jsx
index b00d8d867c..617005e6cf 100644
--- a/packages/components/psammead-media-player/src/index.jsx
+++ b/packages/components/psammead-media-player/src/index.jsx
@@ -118,7 +118,7 @@ CanonicalMediaPlayer.defaultProps = {
   placeholderSrc: null,
   placeholderSrcset: null,
   noJsClassName: null,
-  timeoutMs: null,
+  timeoutMs: 5000,
 };
 
 AmpMediaPlayer.propTypes = {

From 6e005c70bb52477bfcbead72665929089f6fd1bd Mon Sep 17 00:00:00 2001
From: Simon Sinclair <simon.sinclair@bbc.co.uk>
Date: Thu, 9 Jan 2020 15:11:34 +0000
Subject: [PATCH 24/30] Let me fix that

Co-Authored-By: James Donohue <james.donohue@bbc.co.uk>
---
 packages/components/psammead-media-player/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/psammead-media-player/README.md b/packages/components/psammead-media-player/README.md
index 2e19aa2897..09320a9796 100644
--- a/packages/components/psammead-media-player/README.md
+++ b/packages/components/psammead-media-player/README.md
@@ -3,7 +3,7 @@
 ## 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 its 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.
 

From 48619b0d31dfadf68f96c45df223cfd0af8e46f2 Mon Sep 17 00:00:00 2001
From: Simon Sinclair <simon@simonsinclair.com>
Date: Fri, 10 Jan 2020 15:29:26 +0000
Subject: [PATCH 25/30] Improve useTimeout comments

---
 .../psammead-media-player/src/Canonical/useTimeout.jsx        | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/components/psammead-media-player/src/Canonical/useTimeout.jsx b/packages/components/psammead-media-player/src/Canonical/useTimeout.jsx
index 8e6f9519b1..135934016c 100644
--- a/packages/components/psammead-media-player/src/Canonical/useTimeout.jsx
+++ b/packages/components/psammead-media-player/src/Canonical/useTimeout.jsx
@@ -4,11 +4,11 @@ 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 {object} iframeRef A React DOM Ref providing access to an iframe 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.
+  // Persist a reference to the timer across renders. This is used to clearTimeout().
   const timer = useRef(null);
 
   const handleLoad = () => {

From a02664e9b74ad241e09347e178f3387304589762 Mon Sep 17 00:00:00 2001
From: Simon Sinclair <simon@simonsinclair.com>
Date: Fri, 10 Jan 2020 15:30:18 +0000
Subject: [PATCH 26/30] Validate iframeRef before binding events

---
 .../src/Canonical/useTimeout.jsx                    | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/packages/components/psammead-media-player/src/Canonical/useTimeout.jsx b/packages/components/psammead-media-player/src/Canonical/useTimeout.jsx
index 135934016c..0a700b2ef4 100644
--- a/packages/components/psammead-media-player/src/Canonical/useTimeout.jsx
+++ b/packages/components/psammead-media-player/src/Canonical/useTimeout.jsx
@@ -1,5 +1,13 @@
 import { useRef, useEffect } from 'react';
 
+const isValidIframeRef = iframeRef => {
+  return (
+    iframeRef &&
+    iframeRef.current &&
+    typeof iframeRef.current.addEventListener === 'function'
+  );
+};
+
 /**
  * useTimeout Hook.
  * @param {function} callback A callback function that's passed `true` if the timer
@@ -20,6 +28,11 @@ const useTimeout = (callback, iframeRef, timeout) => {
   // 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 (!isValidIframeRef(iframeRef))
+      throw Error(
+        `useTimeout expected 'iframeRef' to be a valid React DOM Ref.`,
+      );
+
     if (timeout > 0) {
       iframeRef.current.addEventListener('load', handleLoad, { once: true });
       timer.current = setTimeout(() => {

From 564b4005d2b178f42fdee5226fc002906349b2b4 Mon Sep 17 00:00:00 2001
From: Simon Sinclair <simon@simonsinclair.com>
Date: Tue, 14 Jan 2020 16:20:43 +0000
Subject: [PATCH 27/30] Use afterEach cleanup in favour of unmount

---
 .../psammead-media-player/src/Canonical/index.test.jsx     | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/components/psammead-media-player/src/Canonical/index.test.jsx b/packages/components/psammead-media-player/src/Canonical/index.test.jsx
index 88a447aadb..946a7b7a5d 100644
--- a/packages/components/psammead-media-player/src/Canonical/index.test.jsx
+++ b/packages/components/psammead-media-player/src/Canonical/index.test.jsx
@@ -1,8 +1,10 @@
 import React from 'react';
-import { render, act } from '@testing-library/react';
+import { render, act, cleanup } from '@testing-library/react';
 import { shouldMatchSnapshot } from '@bbc/psammead-test-helpers';
 import Canonical from '.';
 
+afterEach(cleanup);
+
 describe('Media Player: Canonical', () => {
   shouldMatchSnapshot(
     'should render an iframe',
@@ -15,7 +17,7 @@ describe('Media Player: Canonical', () => {
 
   it('should render a timeout message if timeout timer expires', () => {
     jest.useFakeTimers();
-    const { getByText, unmount } = render(
+    const { getByText } = render(
       <Canonical
         src="https://foo.bar/iframe"
         title="Media player"
@@ -33,6 +35,5 @@ describe('Media Player: Canonical', () => {
         'There was a problem loading this content. Please check your internet connection and try again.',
       ),
     );
-    unmount();
   });
 });

From 621414649ddbff85cc317fa31557b8dbe949c275 Mon Sep 17 00:00:00 2001
From: Simon Sinclair <simon@simonsinclair.com>
Date: Tue, 14 Jan 2020 18:31:38 +0000
Subject: [PATCH 28/30] Add 'should not render a timeout message...' test

---
 .../src/Canonical/index.test.jsx               | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/packages/components/psammead-media-player/src/Canonical/index.test.jsx b/packages/components/psammead-media-player/src/Canonical/index.test.jsx
index 946a7b7a5d..fe6ef23ab3 100644
--- a/packages/components/psammead-media-player/src/Canonical/index.test.jsx
+++ b/packages/components/psammead-media-player/src/Canonical/index.test.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, act, cleanup } from '@testing-library/react';
+import { render, act, cleanup, fireEvent } from '@testing-library/react';
 import { shouldMatchSnapshot } from '@bbc/psammead-test-helpers';
 import Canonical from '.';
 
@@ -36,4 +36,20 @@ describe('Media Player: Canonical', () => {
       ),
     );
   });
+
+  it('should not render a timeout message if it loads successfully', () => {
+    const { getByTitle, getByText } = render(
+      <Canonical
+        src="https://foo.bar/iframe"
+        title="Media player"
+        service="news"
+      />,
+    );
+    fireEvent.load(getByTitle('Media player'));
+    expect(() =>
+      getByText(
+        'There was a problem loading this content. Please check your internet connection and try again.',
+      ),
+    ).toThrow();
+  });
 });

From b27eaac7c8e8e06876a620e5f0351f9a8ad0be24 Mon Sep 17 00:00:00 2001
From: Simon Sinclair <simon@simonsinclair.com>
Date: Tue, 14 Jan 2020 18:32:05 +0000
Subject: [PATCH 29/30] Update test title for consistency

---
 .../psammead-media-player/src/Canonical/index.test.jsx          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/psammead-media-player/src/Canonical/index.test.jsx b/packages/components/psammead-media-player/src/Canonical/index.test.jsx
index fe6ef23ab3..76a80cfcb2 100644
--- a/packages/components/psammead-media-player/src/Canonical/index.test.jsx
+++ b/packages/components/psammead-media-player/src/Canonical/index.test.jsx
@@ -15,7 +15,7 @@ describe('Media Player: Canonical', () => {
     />,
   );
 
-  it('should render a timeout message if timeout timer expires', () => {
+  it('should render a timeout message if the timeout expires', () => {
     jest.useFakeTimers();
     const { getByText } = render(
       <Canonical

From 336c70bb55f40b3e32df24fa85d41e310c74f743 Mon Sep 17 00:00:00 2001
From: Simon Sinclair <simon@simonsinclair.com>
Date: Tue, 14 Jan 2020 23:17:04 +0000
Subject: [PATCH 30/30] Add useTimeout.test.jsx

---
 .../src/Canonical/useTimeout.test.jsx         | 25 +++++++++++++++++++
 1 file changed, 25 insertions(+)
 create mode 100644 packages/components/psammead-media-player/src/Canonical/useTimeout.test.jsx

diff --git a/packages/components/psammead-media-player/src/Canonical/useTimeout.test.jsx b/packages/components/psammead-media-player/src/Canonical/useTimeout.test.jsx
new file mode 100644
index 0000000000..7f3258977f
--- /dev/null
+++ b/packages/components/psammead-media-player/src/Canonical/useTimeout.test.jsx
@@ -0,0 +1,25 @@
+import React, { useRef } from 'react';
+import { cleanup, render } from '@testing-library/react';
+import useTimeout from './useTimeout';
+
+afterEach(cleanup);
+
+describe('useTimeout hook', () => {
+  it(`should throw if passed an invalid 'iframeRef'`, () => {
+    // We mock console.error for the duration of this test to eliminate
+    // the noise that would be emitted by <TestComponent /> when it throws.
+    const spy = jest.spyOn(console, 'error').mockImplementation(() => {});
+
+    const TestComponent = () => {
+      const iframeRef = useRef(null);
+      useTimeout(() => {}, '', 5000);
+      return <iframe title="iframe" ref={iframeRef} />;
+    };
+
+    expect(() => render(<TestComponent />)).toThrow(
+      Error(`useTimeout expected 'iframeRef' to be a valid React DOM Ref.`),
+    );
+
+    spy.mockRestore();
+  });
+});