Update README & test pages

THEOplayer · Aug 9, 2024 · fd880be · fd880be
1 parent 13de6fe
commit fd880be
Show file tree

Hide file tree

Showing 3 changed files with 96 additions and 25 deletions.
diff --git a/gemius/README.md b/gemius/README.md
@@ -11,6 +11,7 @@ npm install @theoplayer/gemius-connector-web
 Load the gplayer.js library from Gemius. There are two options to to this: either you do it synchronously:
 
 ```html
+
 <script type="text/javascript" src="https://PREFIX.hit.gemius.pl/gplayer.js"></script>
 ```
 
@@ -45,13 +46,88 @@ Department.
 
 ## Usage
 
-### Configuring the connector
+First you need to add the Gemius connector to your app :
+
+* Add as a regular script
+
+```html
+
+<script type="text/javascript" src="path/to/gemius-connector.umd.js"></script>
+<script type="text/javascript">
+    const player = new THEOplayer.Player(element, configuration);
+
+    // Define your configuration for the connector:
+    const gemiusConfig = {
+        gemiusID: '<your-publisher-id>',
+        debug: true
+    };
+
+    // Define the initial program parameters:
+    const programParameters = {
+        "programID": "000001",
+        "programName": "Big Buck Bunny (DASH)",
+        "programDuration": 635,
+        "programType": "video",
+        "transmissionType": 1,
+        "programGenre": 4,
+        "series": "Test Content",
+        "programSeason": "season 1",
+        "programProducer": "Blender",
+        "customAttributes": {
+            "intCategory": "Comedy",
+            "intType": "vod",
+            "intStatus": "public"
+        }
+    };
 
-```js
-import { GemiusConnector } from '../../dist/gemius-connector.esm.js';
-// TODO
+    // Create the GemiusConnector:
+    const gemiusConnector = new THEOplayerGemiusConnector.GemiusConnector(player, gemiusConfig, programParameters);
+</script>
 ```
 
-## Documentation
+* Add as an ES2015 module
+
+```html
+<script type="module">
+    import {GemiusConnector} from "path/to/gemius-connector.esm.js";
 
-Documentation can be acquired through Gemius Prism.
+    const player = new THEOplayer.Player(element, configuration);
+
+    // Define your configuration for the connector:
+    const gemiusConfig = {
+        gemiusID: '<your-publisher-id>',
+        debug: true
+    };
+
+    // Define the initial program parameters:
+    const programParameters = {
+        "programID": "000001",
+        "programName": "Big Buck Bunny (DASH)",
+        "programDuration": 635,
+        "programType": "video",
+        "transmissionType": 1,
+        "programGenre": 4,
+        "series": "Test Content",
+        "programSeason": "season 1",
+        "programProducer": "Blender",
+        "customAttributes": {
+            "intCategory": "Comedy",
+            "intType": "vod",
+            "intStatus": "public"
+        }
+    };
+
+    // Create the GemiusConnector:
+    const gemiusConnector = new GemiusConnector(player, gemiusConfig, programParameters);
+</script>
+```
+
+## Updating program parameters
+
+If the program parameters changed during playback, you can update it with:
+
+```javascript
+const newProgramParameters = { ... };
+
+gemiusConnector.update(newProgramParameters);
+```
diff --git a/gemius/test/pages/main_esm.html b/gemius/test/pages/main_esm.html
@@ -41,20 +41,18 @@
         </script>
         <script type="module">
             import * as THEOplayer  from 'theoplayer'
-            // import { GemiusConnector } from "../../dist/gemius-connector.esm.js"
+            import { GemiusConnector } from "../../dist/gemius-connector.esm.js"
             const element = document.querySelector("#THEOplayer");
             const selector = document.querySelector('select')
             const loadButton = document.querySelector('#loadbutton')
 
             let testAssets
-            // let gemiusConnector
-            // const gemiusConfig = {
-            //     publisherId: '<your publisher id>',
-            //     applicationName: 'Test App',
-            //     userConsent: "1",
-            //     adIdProcessor: (ad) => ad.id,
-            //     debug: true
-            // };
+            let gemiusConnector
+
+            const gemiusConfig = {
+                gemiusID: '<your-publisher-id>',
+                debug: true
+            };
 
             const loadSource = () => {
                 setSourceWithGemiusMetadata(testAssets[selector.value])

diff --git a/gemius/test/pages/main_umd.html b/gemius/test/pages/main_umd.html
@@ -8,7 +8,7 @@
         <link rel="stylesheet" type="text/css" href="/node_modules/theoplayer/ui.css" />
         <script src="/node_modules/theoplayer/THEOplayer.js"></script>
         <script src="https://PREFIX.hit.gemius.pl/gplayer.js"></script>
-        <!-- <script src="./../../dist/gemius-connector.umd.js"></script> -->
+         <script src="./../../dist/gemius-connector.umd.js"></script>
         <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
 
         <style>
@@ -39,15 +39,12 @@
             const selector = document.querySelector('select')
             const loadButton = document.querySelector('#loadbutton')
 
-            let testAssets
-            // let gemiusConnector
-            // const gemiusConfig = {
-            //     publisherId: '<your publisher id>',
-            //     applicationName: 'Test App',
-            //     userConsent: "1",
-            //     adIdProcessor: (ad) => ad.id,
-            //     debug: true
-            // };
+            let testAssets;
+            let gemiusConnector;
+            const gemiusConfig = {
+                gemiusID: '<your-publisher-id>',
+                debug: true
+            };
 
             const loadSource = () => {
                 setSourceWithGemiusMetadata(testAssets[selector.value])