From 9e52296dc62c3efab3e00204ab2e561b712c8965 Mon Sep 17 00:00:00 2001
From: Arthur Hulsman <a.hulsman@orangegames.com>
Date: Wed, 17 Jan 2018 12:19:32 +0100
Subject: [PATCH] Moved the ads container to be outside of the video wrapper.
 This way we can easily move the ad in front or behind the video controls
 based on content resume or pause IMA events.

---
 src/js/plugins/ads.js     | 18 +++++++++++++++---
 src/sass/plugins/ads.scss |  2 +-
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/js/plugins/ads.js b/src/js/plugins/ads.js
index 87ce61a1..48a5e4da 100644
--- a/src/js/plugins/ads.js
+++ b/src/js/plugins/ads.js
@@ -276,7 +276,11 @@ class Ads {
     }
 
     setupAdDisplayContainer() {
-        const { wrapper } = this.player.elements;
+        // Create the container for our advertisements.
+        const container = utils.createElement('div', {
+            class: this.player.config.classNames.ads,
+        });
+        this.player.elements.container.appendChild(container);
 
         // So we can run VPAID2.
         google.ima.settings.setVpaidMode(google.ima.ImaSdkSettings.VpaidMode.ENABLED);
@@ -287,9 +291,9 @@ class Ads {
 
         // We assume the adContainer is the video container of the plyr element
         // that will house the ads.
-        this.adDisplayContainer = new google.ima.AdDisplayContainer(wrapper);
+        this.adDisplayContainer = new google.ima.AdDisplayContainer(container);
 
-        this.adsDisplayElement = wrapper.firstChild;
+        this.adsDisplayElement = container.firstChild;
 
         // The AdDisplayContainer call from google IMA sets the style attribute
         // by default. We remove the inline style and set it through the stylesheet.
@@ -298,6 +302,14 @@ class Ads {
         // Set class name on the adDisplayContainer element.
         this.adsDisplayElement.setAttribute('class', this.player.config.classNames.ads);
 
+        // Make sure our advertisement container has the right z-index.
+        this.on('CONTENT_PAUSE_REQUESTED', () => {
+            container.style.zIndex = '3';
+        });
+        this.on('CONTENT_RESUME_REQUESTED', () => {
+            container.style.zIndex = '1';
+        });
+
         // Play ads when clicked. Wait until the adsManager and adsLoader
         // are both resolved.
         Promise.all([
diff --git a/src/sass/plugins/ads.scss b/src/sass/plugins/ads.scss
index 41d4d8d1..b6664fe9 100644
--- a/src/sass/plugins/ads.scss
+++ b/src/sass/plugins/ads.scss
@@ -9,7 +9,7 @@
     position: absolute;
     right: 0;
     top: 0;
-    z-index: 10;
+    z-index: 1;
 
     video {
         left: 0;