From 453eaa2273d3591813783a6d6a0e9843193576f3 Mon Sep 17 00:00:00 2001
From: Ben Barnett <ben@brushfiredesign.net>
Date: Wed, 24 May 2017 13:49:04 +0100
Subject: [PATCH] Reload captions once advertising layer has finished (#104)

* Reload captions once advertising layer has finished up

Fixes captions not displaying once ads have played (i.e. everywhere on ft.com), on Firefox 52 and later.

* Use more sensible video for captions demo

Also show advertising to demonstrate captions haven't been interfered with by the ad library.
---
 demos/src/captions.mustache |  4 ++--
 src/js/ads.js               | 14 +++++++++++---
 src/js/video.js             |  8 +++++---
 test/ads.test.js            |  3 ++-
 4 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/demos/src/captions.mustache b/demos/src/captions.mustache
index 873c3e3..d5621d4 100644
--- a/demos/src/captions.mustache
+++ b/demos/src/captions.mustache
@@ -1,7 +1,7 @@
 <div class="demo-video-container demo-video-container--large">
   <div class="o-video o-video--large"
     data-o-component="o-video"
-    data-o-video-id="21d77b6c-1901-4d1d-9c3b-84dfe9904fd2"
-    data-o-video-advertising="false">
+    data-o-video-id="f834a6d2-c84c-4c17-90fd-2b8593b1f8ba"
+    data-o-video-advertising="true">
   </div>
 </div>
diff --git a/src/js/ads.js b/src/js/ads.js
index 9367ae2..3158912 100644
--- a/src/js/ads.js
+++ b/src/js/ads.js
@@ -181,7 +181,7 @@ class VideoAds {
 		// If ads have failed to load, which resets the advertising support flag, play the video
 		// instead; otherwise, wait until the ads have loaded.
 		if (!this.video.opts.advertising) {
-			this.video.videoEl.play();
+			this.playUserVideo();
 		} else if (!this.adsLoaded) {
 			return;
 		}
@@ -199,7 +199,7 @@ class VideoAds {
 		} catch (adError) {
 			// An error may be thrown if there was a problem with the VAST response.
 			this.reportError(adError);
-			this.video.videoEl.play();
+			this.playUserVideo();
 		}
 	}
 
@@ -267,7 +267,7 @@ class VideoAds {
 				if (!ad.isLinear()) {
 					// Position AdDisplayContainer correctly for overlay.
 					// Use ad.width and ad.height.
-					this.video.videoEl.play();
+					this.playUserVideo();
 				}
 				break;
 			case google.ima.AdEvent.Type.STARTED:
@@ -343,6 +343,14 @@ class VideoAds {
 	contentResumeRequestHandler() {
 		this.video.containerEl.removeChild(this.adContainerEl);
 		this.adsCompleted = true;
+		this.playUserVideo();
+	}
+
+	playUserVideo() {
+		// Since Firefox 52, the captions need re-adding after the
+		// ad video layer has finished its thing.
+		this.video.addCaptions();
+
 		this.video.videoEl.play();
 	}
 
diff --git a/src/js/video.js b/src/js/video.js
index 1b1a938..6795b42 100644
--- a/src/js/video.js
+++ b/src/js/video.js
@@ -253,6 +253,10 @@ class Video {
 	}
 
 	addCaptions() {
+		if (this.opts.showCaptions === false) {
+			return;
+		}
+
 		if (typeof this.videoData === 'undefined') {
 			throw new Error('Please call `getData()` before calling `addCaptions()` directly.');
 		}
@@ -284,9 +288,7 @@ class Video {
 
 		this.videoEl.src = this.rendition && this.rendition.url;
 
-		if (this.opts.showCaptions === true) {
-			this.addCaptions();
-		}
+		this.addCaptions();
 	}
 
 	addPlaceholder() {
diff --git a/test/ads.test.js b/test/ads.test.js
index dad6de1..ef0c70f 100644
--- a/test/ads.test.js
+++ b/test/ads.test.js
@@ -16,7 +16,8 @@ describe('Ads', () => {
 			containerEl,
 			videoEl,
 			opts: {},
-			targeting: {}
+			targeting: {},
+			addCaptions: function() {}
 		};
 		ads = new Ads(video);
 	});