🙈 Weird iOS quirks in IMA plugin

mistweaverco · Jun 25, 2023 · 874d96c · 874d96c
1 parent 202c380
commit 874d96c
Show file tree

Hide file tree

Showing 10 changed files with 705 additions and 710 deletions.
diff --git a/docs/examples/ima-plugin/dist/app.mjs b/docs/examples/ima-plugin/dist/app.mjs
diff --git a/docs/examples/ima-plugin/dist/app.umd.js b/docs/examples/ima-plugin/dist/app.umd.js
diff --git a/docs/examples/ima-plugin/dist/style.css b/docs/examples/ima-plugin/dist/style.css
diff --git a/docs/examples/ima-plugin/package.json b/docs/examples/ima-plugin/package.json
@@ -8,6 +8,6 @@
   },
   "dependencies": {
     "@mistweaverco/cheza.js": "1.0.3",
-    "@mistweaverco/cheza.js-ima-plugin": "1.0.7"
+    "@mistweaverco/cheza.js-ima-plugin": "1.0.8"
   }
 }
diff --git a/docs/examples/ima-plugin/yarn.lock b/docs/examples/ima-plugin/yarn.lock
@@ -24,7 +24,7 @@ __metadata:
   resolution: "@examples/ima-plugin@workspace:."
   dependencies:
     "@mistweaverco/cheza.js": 1.0.3
-    "@mistweaverco/cheza.js-ima-plugin": 1.0.7
+    "@mistweaverco/cheza.js-ima-plugin": 1.0.8
   languageName: unknown
   linkType: soft
 
@@ -42,12 +42,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@mistweaverco/cheza.js-ima-plugin@npm:1.0.7":
-  version: 1.0.7
-  resolution: "@mistweaverco/cheza.js-ima-plugin@npm:1.0.7"
+"@mistweaverco/cheza.js-ima-plugin@npm:1.0.8":
+  version: 1.0.8
+  resolution: "@mistweaverco/cheza.js-ima-plugin@npm:1.0.8"
   dependencies:
     handlebars: 4.7.7
-  checksum: 78e4ded65859235ba308eb6484f1ea5b09e61cddacec1d88ac5d28ee0ece5145dfa810ac21aa824833fecbb9afd8de054d783481f9c79bfd13b5f0af1d23d80a
+  checksum: b2bdacdea79880c57517031bb2854fa516285195103304d25242b536e03e74e243892753a35b252e7c12568497d3989c8c09543366eeb202035c05e441921308
   languageName: node
   linkType: hard
 

diff --git a/packages/ima-plugin/package.json b/packages/ima-plugin/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@mistweaverco/cheza.js-ima-plugin",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "types": "types/index.d.ts",
   "files": [
     "dist",

diff --git a/packages/ima-plugin/src/addAdsManagerEventListeners.ts b/packages/ima-plugin/src/addAdsManagerEventListeners.ts
@@ -46,8 +46,8 @@ const getButtonByName = (name: string, dataStore: ChezaIMADataStore): HTMLButton
 export const addAdsManagerEventListeners = (dataStore: ChezaIMADataStore): void => {
   const g = dataStore.google as typeof google
   const am = dataStore.adsManager as google.ima.AdsManager
-  const ev = eventDispatcher(dataStore.videoElement as HTMLVideoElement)
   const contentVideo = dataStore.videoElement as HTMLVideoElement
+  const ev = eventDispatcher(contentVideo)
 
   document.addEventListener('fullscreenchange', () => {
     if (document.fullscreenElement === dataStore.rootElement) {
@@ -132,15 +132,12 @@ export const addAdsManagerEventListeners = (dataStore: ChezaIMADataStore): void
     getButtonByName('pause', dataStore).classList.remove('hidden')
 
     const contentVideo = dataStore.videoElement as HTMLVideoElement
-    const imaVideo = dataStore.imaVideoElement as HTMLVideoElement
     if (contentVideo.muted) {
-      imaVideo.muted = true
-      // dataStore.adsManager?.setVolume(0)
+      dataStore.adsManager?.setVolume(0)
       getButtonByName('volume', dataStore).classList.add('hidden')
       getButtonByName('muted', dataStore).classList.remove('hidden')
     } else {
-      imaVideo.muted = false
-      // dataStore.adsManager?.setVolume(ve.volume)
+      dataStore.adsManager?.setVolume(1)
       getButtonByName('volume', dataStore).classList.remove('hidden')
       getButtonByName('muted', dataStore).classList.add('hidden')
     }
@@ -179,7 +176,6 @@ export const addAdsManagerEventListeners = (dataStore: ChezaIMADataStore): void
   })
 
   am.addEventListener(g.ima.AdEvent.Type.CONTENT_RESUME_REQUESTED, () => {
-    const contentVideo = dataStore.videoElement as HTMLVideoElement
-    void contentVideo.play()
+    void dataStore.videoElement?.play()
   })
 }
diff --git a/packages/ima-plugin/src/getBottomButtonOpts.ts b/packages/ima-plugin/src/getBottomButtonOpts.ts
@@ -1,4 +1,4 @@
-import type { ChezaIMADataStore } from '../types'
+import type { ChezaIMADataStore, google } from '../types'
 import type { ChezaButtonOpts } from './createButton'
 import { createSVG } from './createSVG'
 import { enterFullscreen, exitFullscreen } from './fullscreenUtils'
@@ -28,8 +28,8 @@ export const getBottomButtonOpts = (dataStore: ChezaIMADataStore, direction: Get
         {
           name: 'click',
           callback: () => {
-            const imaVideo = dataStore.imaVideoElement as HTMLVideoElement
-            void imaVideo.play()
+            const am = dataStore.adsManager as google.ima.AdsManager
+            am.resume()
           }
         }
       ]
@@ -44,8 +44,8 @@ export const getBottomButtonOpts = (dataStore: ChezaIMADataStore, direction: Get
         {
           name: 'click',
           callback: () => {
-            const imaVideo = dataStore.imaVideoElement as HTMLVideoElement
-            imaVideo.pause()
+            const am = dataStore.adsManager as google.ima.AdsManager
+            am.pause()
           }
         }
       ]
@@ -59,8 +59,8 @@ export const getBottomButtonOpts = (dataStore: ChezaIMADataStore, direction: Get
         {
           name: 'click',
           callback: () => {
-            const imaVideo = dataStore.imaVideoElement as HTMLVideoElement
-            imaVideo.muted = true
+            const am = dataStore.adsManager as google.ima.AdsManager
+            am.setVolume(0)
           }
         }
       ]
@@ -75,8 +75,8 @@ export const getBottomButtonOpts = (dataStore: ChezaIMADataStore, direction: Get
         {
           name: 'click',
           callback: () => {
-            const imaVideo = dataStore.imaVideoElement as HTMLVideoElement
-            imaVideo.muted = false
+            const am = dataStore.adsManager as google.ima.AdsManager
+            am.setVolume(1)
           }
         }
       ]

diff --git a/packages/ima-plugin/src/plugin.ts b/packages/ima-plugin/src/plugin.ts
@@ -71,7 +71,6 @@ class ChezaIMAPlugin {
     this._dataStore.adsLoaded = true
     // 📌 This works wonders and prevents the nasty play was interrupted
     // error message from appearing ..
-    // TODO: Check if it works on most mobile devices
     event.preventDefault()
     // 📌 Check if we need to load the video videoElement
     // in some circumstances via videoElement.load()
@@ -143,7 +142,8 @@ class ChezaIMAPlugin {
     const videoElement = dataStore.videoElement
     const playButton = dataStore.controlsBottom.querySelector('.button-play') as HTMLButtonElement
     const progressContainer = dataStore.progressContainer
-
+    // 📌 This is a hack to prevent IMA from replacing the videoElement on iOS
+    g.ima.settings.setDisableCustomPlaybackForIOS10Plus(true)
     g.ima.settings.setNumRedirects(this._dataStore.opts?.maxRedirects ?? 5)
     if (this._dataStore.opts?.locale !== undefined) {
       g.ima.settings.setLocale(this._dataStore.opts.locale)

diff --git a/packages/ima-plugin/styles/ima.scss b/packages/ima-plugin/styles/ima.scss
@@ -1,5 +1,6 @@
 .cheza {
   .ima-ui {
+    z-index: 99;
     position: absolute;
     width: 100%;
     height: 100%;