Implementation like in POC

stroeer · Sep 13, 2023 · b2c24db · b2c24db
1 parent 6c87e42
commit b2c24db
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 4 deletions.
diff --git 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
@@ -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}>