From b2c24dbbb88e90a4db1bbab98d48bdd9d904e7aa Mon Sep 17 00:00:00 2001
From: Marco Kellershoff <marco@kellershoff.net>
Date: Wed, 13 Sep 2023 12:16:19 +0200
Subject: [PATCH] Implementation like in POC

---
 .../components/THEOplayerWrapper.tsx          | 35 +++++++++++++++++--
 typescript-npm/pages/index.tsx                |  3 +-
 2 files changed, 34 insertions(+), 4 deletions(-)

diff --git a/typescript-npm/components/THEOplayerWrapper.tsx b/typescript-npm/components/THEOplayerWrapper.tsx
index ff722c9..8f44197 100644
--- a/typescript-npm/components/THEOplayerWrapper.tsx
+++ b/typescript-npm/components/THEOplayerWrapper.tsx
@@ -3,6 +3,22 @@ import * as THEOplayer from 'theoplayer';
 import {Player, PlayerConfiguration} from 'theoplayer';
 import 'theoplayer/ui.css';
 
+async function loadGoogleImaSdkScript(): Promise<void> {
+  return await new Promise<void>((resolve, reject) => {
+    const script = document.createElement('script');
+    script.src = 'https://imasdk.googleapis.com/js/sdkloader/ima3.js';
+    script.onload = (): void => {
+      script.remove();
+      resolve();
+    };
+    script.onerror = (): void => {
+      script.remove();
+      reject(new Error('Google IMA SDK could not be loaded'));
+    };
+    document.head.appendChild(script);
+  });
+}
+
 function THEOplayerWrapper(props: { data: any; onPlay: any; }) {
 
     let el = React.createRef<HTMLDivElement>();
@@ -15,11 +31,26 @@ function THEOplayerWrapper(props: { data: any; onPlay: any; }) {
                     libraryLocation: process.env.theoplayerLibraryLocation
                 };
                 let player : Player = new THEOplayer.Player(element, configuration);
-                player.preload = props.data.preload;
-                player.autoplay = props.data.autoplay;
                 if (props.onPlay) {
                     player.addEventListener('play', props.onPlay);
                 }
+                const onFirstPlayCallback = (): void => {
+                  player.removeEventListener('play', onFirstPlayCallback);
+                  loadGoogleImaSdkScript().then(() => {
+                    player.source = {};
+                    player.source = {
+                      sources: props.data.source.sources,
+                      ads: [
+                        {
+                          integration: 'google-ima',
+                          sources: props.data.vastUrl,
+                        },
+                      ],
+                    };
+                  });
+                  player.play();
+                };
+                player.addEventListener('play', onFirstPlayCallback);
                 player.source = props.data.source;
             }
 
diff --git a/typescript-npm/pages/index.tsx b/typescript-npm/pages/index.tsx
index a26b7ee..e5e626d 100644
--- a/typescript-npm/pages/index.tsx
+++ b/typescript-npm/pages/index.tsx
@@ -12,8 +12,7 @@ export default function Home() {
           }],
           "poster": "//cdn.theoplayer.com/video/elephants-dream.png"
       },
-      autoplay: false,
-      preload: "auto"
+      vastUrl: "https://mwcdn.co/vast-demos/creative-1of3.xml"
   }
   return (
     <div className={styles.container}>