add test pages

THEOplayer · Jul 14, 2024 · a219258 · a219258
1 parent 6d4e852
commit a219258
Show file tree

Hide file tree

Showing 2 changed files with 287 additions and 0 deletions.
diff --git a/adscript/test/pages/main_esm.html b/adscript/test/pages/main_esm.html
@@ -0,0 +1,148 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <title>Connector test page</title>
+        <script src="https://imasdk.googleapis.com/js/sdkloader/ima3.js"></script>
+        <script type="text/javascript" src="//imasdk.googleapis.com/js/sdkloader/ima3_dai.js"></script>
+        <link rel="stylesheet" type="text/css" href="/node_modules/theoplayer/ui.css" />
+        <link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon"> 
+        <script>
+            !function(j,h,m,t,c,z){
+                c = c || "JHMT";
+                j[c] = j[c] || [];
+                j["JHMTApiProtocol"] = "https:";
+                z = z || 3;
+
+                var i = z%3 + 1,
+                    a = arguments.callee,
+                    b = h.createElement("script");
+
+                b.async = !0, b.readyState ? b.onreadystatechange = function() {
+                    "loaded" !== b.readyState && "complete" !== b.readyState || (
+                        b.onreadystataechange = null, j.JHMTApi.init(c,m,t)
+                    )
+                } : b.onload = function() {
+                    j.JHMTApi.init(c,m,t);
+                },
+                    b.src = j["JHMTApiProtocol"] + "//cm" + i + ".jhmt.cz/api.js",
+                    b.onerror = function() {
+                        b.parentNode.removeChild(b);
+                        z++; i = z%3 + 1; a(j,h,m,t,c,i);
+                    },
+                    h.getElementsByTagName("head")[0].appendChild(b)
+
+                try {
+                    var it = setInterval(function () {
+                        if (typeof j.JHMTApi !== "undefined") {
+                            clearInterval(it);
+                        }
+                        else {
+                            b.parentNode.removeChild(b);
+                            z++; i = z%3 + 1; a(j,h,m,t,c,i);
+                        }
+                    }, 1e3);
+                }
+                catch (e) {
+                    console.log('JHMT: ' + e);
+                }
+            } (window, document, "ImplementationId");
+        </script>
+
+        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
+
+        <style>
+            .dropdown {
+              width: 100%;
+            }
+
+            .btn-primary, .btn-primary:hover, .btn-primary:active, .btn-primary:visited {
+                background-color: #ffc50f;
+                border-color: #ffc50f;
+            }
+          </style>
+    </head>
+    <body>
+        <div class="container" style="padding-bottom: 5px; padding-top: 5px;">
+            <div class="row">
+              <div class="col-auto">
+                <button id="loadbutton" type="button" class="btn btn-primary">Load</button>
+              </div>
+              <div class="col">
+                <select id="source" class="form-control" name="source" style="width: 90%"></select>
+              </div>
+            </div>
+        </div>
+        <div id="THEOplayer" class="theoplayer-container video-js theoplayer-skin"></div>
+        <script type="importmap">
+            {
+              "imports": {
+                "theoplayer": "./../../../node_modules/theoplayer/THEOplayer.esm.js"
+              }
+            }
+        </script>
+        <script type="module" defer>
+            import * as THEOplayer  from 'theoplayer'
+            import { AdScriptConnector } from "../../dist/adscript-connector.esm.js"
+            const element = document.querySelector("#THEOplayer");
+            const selector = document.querySelector('select')
+            const loadButton = document.querySelector('#loadbutton')
+
+            let testAssets
+            let adscriptConnector
+            const adscriptConfig = {
+                implementationId: "<your implementationId>",
+                debug: true
+            };
+
+            const loadSource = () => {
+                setSourceWithAdScriptMetadata(testAssets[selector.value])
+            }
+
+            loadButton.onclick = loadSource
+
+            const player = new THEOplayer.Player(element, {
+                ui: {
+                    fluid: true
+                },
+                libraryLocation: "/node_modules/theoplayer/",
+                license: "<your license>"
+            });
+            player.ads.addEventListener('aderror',console.log)
+            window.player = player
+
+            const setSourceWithAdScriptMetadata = (testAsset) => {
+                player.source = testAsset.source
+                adscriptConnector.updateMetadata(testAsset.metadata)
+            }
+
+            const populateSourceSelector = (testAssets) => {
+                for (let i=0 ; i < testAssets.length ; i++) {
+                    const optionNode = document.createElement('option')
+                    optionNode.label = testAssets[i].label
+                    optionNode.value = i
+                    selector.appendChild(optionNode)
+                }
+            }
+
+            fetch('test-assets.json')
+                .then(res => res.json())
+                .then(jsonResponse => {
+                    testAssets = jsonResponse
+                    player.source = jsonResponse[0].source
+                    const adscriptProgramMetadata = jsonResponse[0].metadata
+                    adscriptConnector = new AdScriptConnector(
+                        player,
+                        adscriptConfig,
+                        adscriptProgramMetadata,
+                    )
+                    populateSourceSelector(jsonResponse)
+                    selector.value = 0
+                })
+
+        </script>
+        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
+        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
+    </body>
+</html>
diff --git a/adscript/test/pages/main_umd.html b/adscript/test/pages/main_umd.html
@@ -0,0 +1,139 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <title>Connector test page</title>
+        <script src="https://imasdk.googleapis.com/js/sdkloader/ima3.js"></script>
+        <script type="text/javascript" src="//imasdk.googleapis.com/js/sdkloader/ima3_dai.js"></script>
+        <link rel="stylesheet" type="text/css" href="/node_modules/theoplayer/ui.css" />
+        <link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon"> 
+        <script src="./../../dist/adscript-connector.umd.js"></script>
+        <script src="/node_modules/theoplayer/THEOplayer.js"></script>
+        <script>
+            !function(j,h,m,t,c,z){
+                c = c || "JHMT";
+                j[c] = j[c] || [];
+                j["JHMTApiProtocol"] = "https:";
+                z = z || 3;
+
+                var i = z%3 + 1,
+                    a = arguments.callee,
+                    b = h.createElement("script");
+
+                b.async = !0, b.readyState ? b.onreadystatechange = function() {
+                    "loaded" !== b.readyState && "complete" !== b.readyState || (
+                        b.onreadystataechange = null, j.JHMTApi.init(c,m,t)
+                    )
+                } : b.onload = function() {
+                    j.JHMTApi.init(c,m,t);
+                },
+                    b.src = j["JHMTApiProtocol"] + "//cm" + i + ".jhmt.cz/api.js",
+                    b.onerror = function() {
+                        b.parentNode.removeChild(b);
+                        z++; i = z%3 + 1; a(j,h,m,t,c,i);
+                    },
+                    h.getElementsByTagName("head")[0].appendChild(b)
+
+                try {
+                    var it = setInterval(function () {
+                        if (typeof j.JHMTApi !== "undefined") {
+                            clearInterval(it);
+                        }
+                        else {
+                            b.parentNode.removeChild(b);
+                            z++; i = z%3 + 1; a(j,h,m,t,c,i);
+                        }
+                    }, 1e3);
+                }
+                catch (e) {
+                    console.log('JHMT: ' + e);
+                }
+            } (window, document, "ImplementationId");
+        </script>
+        <!-- <script src="./../../dist/adscript-connector.umd.js"></script> -->
+        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
+
+        <style>
+            .dropdown {
+              width: 100%;
+            }
+
+            .btn-primary, .btn-primary:hover, .btn-primary:active, .btn-primary:visited {
+                background-color: #ffc50f;
+                border-color: #ffc50f;
+            }
+          </style>
+    </head>
+    <body>
+        <div class="container" style="padding-bottom: 5px; padding-top: 5px;">
+            <div class="row">
+              <div class="col-auto">
+                <button id="loadbutton" type="button" class="btn btn-primary">Load</button>
+              </div>
+              <div class="col">
+                <select id="source" class="form-control" name="source" style="width: 90%"></select>
+              </div>
+            </div>
+        </div>
+        <div id="THEOplayer" class="theoplayer-container video-js theoplayer-skin"></div>
+        <script type="text/javascript" defer>
+            const element = document.querySelector("#THEOplayer");
+            const selector = document.querySelector('select')
+            const loadButton = document.querySelector('#loadbutton')
+
+            let testAssets
+            let adscriptConnector
+            const adscriptConfig = {
+                implementationId: "<your implementationId>",
+                debug: true
+            };
+
+            const loadSource = () => {
+                setSourceWithAdScriptMetadata(testAssets[selector.value])
+            }
+
+            loadButton.onclick = loadSource
+
+            const player = new THEOplayer.Player(element, {
+                ui: {
+                    fluid: true
+                },
+                libraryLocation: "/node_modules/theoplayer/",
+                license: "<your license>"
+            });
+
+            const setSourceWithAdScriptMetadata = (testAsset) => {
+                player.source = testAsset.source
+                adscriptConnector.updateMetadata(testAsset.metadata)
+            }
+
+            const populateSourceSelector = (testAssets) => {
+                for (let i=0 ; i < testAssets.length ; i++) {
+                    const optionNode = document.createElement('option')
+                    optionNode.label = testAssets[i].label
+                    optionNode.value = i
+                    selector.appendChild(optionNode)
+                }
+            }
+
+            fetch('test-assets.json')
+                .then(res => res.json())
+                .then(jsonResponse => {
+                    testAssets = jsonResponse
+                    player.source = jsonResponse[0].source
+                    const adscriptMetadata = jsonResponse[0].metadata
+                    adscriptConnector = new THEOplayerAdScriptConnector.AdScriptConnector(
+                        player,
+                        adscriptConfig,
+                        adscriptMetadata,
+                    )
+                    populateSourceSelector(jsonResponse)
+                    selector.value = 0
+                })
+
+        </script>
+        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
+        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
+    </body>
+</html>