Merge pull request #29 from THEOplayer/feature/gemius

Gemius Connector

.changeset/sweet-candles-warn.md

@@ -0,0 +1,5 @@
+---
+"@theoplayer/gemius-connector-web": minor
+---
+
+Initial release.

README.md

@@ -15,6 +15,7 @@ Using the available connectors allows you to augment the features delivered thro
 | CMCD      | [![@theoplayer/cmcd-connector-web](https://img.shields.io/npm/v/%40theoplayer%2Fcmcd-connector-web?label=%40theoplayer%2Fcmcd-connector-web)](https://npmjs.com/package/@theoplayer/cmcd-connector-web)                 | [cmcd](https://github.com/THEOplayer/web-connectors/tree/main/cmcd)         |
 | Comscore  | [![@theoplayer/comscore-connector-web](https://img.shields.io/npm/v/%40theoplayer%2Fcomscore-connector-web?label=%40theoplayer%2Fcomscore-connector-web)](https://npmjs.com/package/@theoplayer/comscore-connector-web) | [comscore](https://github.com/THEOplayer/web-connectors/tree/main/comscore) |
 | Conviva   | [![@theoplayer/conviva-connector-web](https://img.shields.io/npm/v/%40theoplayer%2Fconviva-connector-web?label=%40theoplayer%2Fconviva-connector-web)](https://npmjs.com/package/@theoplayer/conviva-connector-web)     | [conviva](https://github.com/THEOplayer/web-connectors/tree/main/conviva)   |
+| Gemius    | [![@theoplayer/gemius-connector-web](https://img.shields.io/npm/v/%40theoplayer%2Fgemius-connector-web?label=%40theoplayer%2Fgemius-connector-web)](https://npmjs.com/package/@theoplayer/gemius-connector-web)         | [gemius](https://github.com/THEOplayer/web-connectors/tree/main/gemius)     |
 | Nielsen   | [![@theoplayer/nielsen-connector-web](https://img.shields.io/npm/v/%40theoplayer%2Fnielsen-connector-web?label=%40theoplayer%2Fnielsen-connector-web)](https://npmjs.com/package/@theoplayer/nielsen-connector-web)     | [nielsen](https://github.com/THEOplayer/web-connectors/tree/main/nielsen)   |
 | Yospace   | [![@theoplayer/yospace-connector-web](https://img.shields.io/npm/v/%40theoplayer%2Fyospace-connector-web?label=%40theoplayer%2Fyospace-connector-web)](https://npmjs.com/package/@theoplayer/yospace-connector-web)     | [yospace](https://github.com/THEOplayer/web-connectors/tree/main/yospace)   |
 

gemius/.gitignore

@@ -0,0 +1,10 @@
+# Node artifact files
+node_modules/
+lib/
+dist/
+
+# Generated by MacOS
+.DS_Store
+
+# Generated by Windows
+Thumbs.db

gemius/README.md

@@ -0,0 +1,133 @@
+# gemius-connector-web
+
+The Gemius connector provides a Gemius integration for THEOplayer.
+
+## Installation
+
+```sh
+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>
+```
+
+... or asynchronously
+
+```html
+<script type="text/javascript">
+<!--//--><![CDATA[//><!--
+function gemius_pending(i) { window[i] = window[i] || function() {var x = window[i+'_pdata']
+= window[i+'_pdata'] || []; x[x.length]=arguments;};};
+gemius_pending('gemius_init');
+function gemius_player_pending(obj,fun) {obj[fun] = obj[fun] || function() {var x =
+window['gemius_player_data'] = window['gemius_player_data'] || [];
+x[x.length]=[this,fun,arguments];};};
+gemius_player_pending(window,"GemiusPlayer");
+gemius_player_pending(GemiusPlayer.prototype,"newProgram");
+gemius_player_pending(GemiusPlayer.prototype,"newAd");
+gemius_player_pending(GemiusPlayer.prototype,"adEvent");
+gemius_player_pending(GemiusPlayer.prototype,"programEvent");
+gemius_player_pending(GemiusPlayer.prototype,"setVideoObject");
+(function(d,t) {try {var gt=d.createElement(t),s=d.getElementsByTagName(t)[0],
+l='http'+((location.protocol=='https:')?'s':''); gt.setAttribute('async','async');
+gt.setAttribute('defer','defer'); gt.src=l+'://PREFIX.hit.gemius.pl/gplayer.js';
+s.parentNode.insertBefore(gt,s);} catch (e) {}})(document,'script');
+//--><!]]>
+```
+
+Make sure you replace `PREFIX` with the short string of letters specifying the
+Gemius collecting server. It can be acquired as a part of the tracking code from gemiusPrism
+interface ( in Settings / Scripts / Streaming Players) or from your local Gemius Tech Support
+Department.
+
+## Usage
+
+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"
+        }
+    };
+
+    // Create the GemiusConnector:
+    const gemiusConnector = new THEOplayerGemiusConnector.GemiusConnector(player, gemiusConfig, programParameters);
+</script>
+```
+
+* Add as an ES2015 module
+
+```html
+<script type="module">
+    import {GemiusConnector} from "path/to/gemius-connector.esm.js";
+
+    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);
+```

gemius/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@theoplayer/gemius-connector-web",
+  "version": "0.0.1",
+  "description": "A connector implementing Gemius with THEOplayer",
+  "main": "dist/gemius-connector.umd.js",
+  "module": "dist/gemius-connector.esm.js",
+  "types": "dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/gemius-connector.esm.js",
+      "require": "./dist/gemius-connector.umd.js"
+    },
+    "./dist/*": "./dist/*",
+    "./package": "./package.json",
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "clean": "rimraf lib dist",
+    "bundle": "rollup -c rollup.config.mjs",
+    "watch": "npm run bundle -- --watch",
+    "build": "npm run clean && npm run bundle",
+    "serve": "http-server ./.. -o /gemius/test/pages/main_esm.html",
+    "test": "echo \"No tests yet\""
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/THEOplayer/web-connectors.git",
+    "directory": "gemius"
+  },
+  "author": "THEO Technologies NV",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/THEOplayer/web-connectors/issues"
+  },
+  "homepage": "https://github.com/THEOplayer/web-connectors/tree/main/gemius#readme",
+  "files": [
+    "dist/",
+    "CHANGELOG.md",
+    "README.md",
+    "LICENSE.md",
+    "package.json"
+  ],
+  "peerDependencies": {
+    "theoplayer": "^7.0.0"
+  }
+}

gemius/rollup.config.mjs

@@ -0,0 +1,15 @@
+import fs from "node:fs";
+import {getSharedBuildConfiguration} from "../tools/build.mjs";
+
+
+const {version} = JSON.parse(fs.readFileSync("./package.json", "utf8"));
+
+const fileName = "gemius-connector";
+const globalName = "THEOplayerGemiusConnector";
+
+const banner = `
+/**
+ * THEOplayer Gemius Web Connector v${version}
+ */`.trim();
+
+export default getSharedBuildConfiguration({fileName, globalName, banner});

gemius/src/gemius/Gemius.d.ts

@@ -0,0 +1,108 @@
+import {
+    NewAdAdditionalParameters,
+    NewProgramAdditionalParameters,
+    PlayAdEventAdditionalParameters,
+    PlayProgramEventAdditionalParameters,
+    PlayerAdditionalParameters,
+    ListEventAdditionalParameters,
+    ChangeResolutionEventAddtionalParameters,
+    ChangeVolumeEventAddtionalParameters,
+    ChangeQualityEventAddtionalParameters
+} from '../integration/GemiusParameters';
+import {
+    PlayEvent,
+    ListEvent,
+    ChangeResolutionEvent,
+    ChangeVolumeEvent,
+    ChangeQualityEvent,
+    BreakEvent,
+    BasicEvent
+} from '../integration/GemiusEvents';
+
+declare global {
+    interface Window {
+        GemiusPlayer: typeof GemiusPlayer;
+    }
+}
+
+export class GemiusPlayer {
+    constructor(playerID: string, gemiusID: string, additionalParameters?: PlayerAdditionalParameters);
+    newProgram(programID: string, additionalParameters: NewProgramAdditionalParameters);
+    newAd(adId: string, additionalParameters?: NewAdAdditionalParameters);
+
+    // List event
+    programEvent(
+        programID: string,
+        offset: number,
+        event: ListEvent,
+        additionalParameters?: ListEventAdditionalParameters
+    );
+
+    // Change resolution events
+    programEvent(
+        programID: string,
+        offset: number,
+        event: ChangeResolutionEvent,
+        additionalParameters?: ChangeResolutionEventAddtionalParameters
+    );
+    adEvent(
+        programID: string,
+        offset: number,
+        event: ChangeResolutionEvent,
+        additionalParameters?: ChangeResolutionEventAddtionalParameters
+    );
+
+    // Change volume events
+    programEvent(
+        programID: string,
+        offset: number,
+        event: ChangeVolumeEvent,
+        additionalParameters?: ChangeVolumeEventAddtionalParameters
+    );
+    adEvent(
+        programID: string,
+        adID: string,
+        offset: number,
+        event: ChangeVolumeEvent,
+        additionalParameters?: ChangeVolumeEventAddtionalParameters
+    );
+
+    // Change quality events
+    programEvent(
+        programID: string,
+        offset: number,
+        event: ChangeQualityEvent,
+        additionalParameters?: ChangeQualityEventAddtionalParameters
+    );
+    adEvent(
+        programID: string,
+        adID: string,
+        offset: number,
+        event: ChangeQualityEvent,
+        additionalParameters?: ChangeQualityEventAddtionalParameters
+    );
+
+    // Play event
+    adEvent(
+        programID: string,
+        adID: string,
+        offset: number,
+        event: PlayEvent,
+        additionalParameters: PlayAdEventAdditionalParameters
+    );
+    programEvent(
+        programID: string,
+        offset: number,
+        event: PlayEvent,
+        additionalParameters: PlayProgramEventAdditionalParameters
+    );
+
+    // Break event (program only)
+    programEvent(programID: string, offset: number, event: BreakEvent);
+
+    // Basic events for both program and ads that don't require additional parameters
+    adEvent(programID: string, adID: string, offset: number, event: BasicEvent);
+    programEvent(programID: string, offset: number, event: BasicEvent);
+
+    dispose();
+}

gemius/src/index.ts

@@ -0,0 +1,3 @@
+export { GemiusConnector } from './integration/GemiusConnector';
+export * from './integration/GemiusConfiguration';
+export * from './integration/GemiusParameters';

gemius/src/integration/GemiusConfiguration.ts

@@ -0,0 +1,4 @@
+export interface GemiusConfiguration {
+    gemiusID: string;
+    debug?: boolean;
+}

gemius/src/integration/GemiusConnector.ts

@@ -0,0 +1,34 @@
+import { ChromelessPlayer } from 'theoplayer';
+import { GemiusTHEOIntegration } from './GemiusTHEOIntegration';
+import { GemiusConfiguration } from './GemiusConfiguration';
+import { GemiusProgramParameters } from './GemiusParameters';
+
+export class GemiusConnector {
+    private gemiusIntegration: GemiusTHEOIntegration;
+
+    /**
+     * Constructor for the THEOplayer Gemius connector
+     * @param player a THEOplayer instance reference
+     * @param configuration a configuration object for the Gemius connector
+     * @param programParameters the parameters associated with the first source that will be set to the player
+     * @returns
+     */
+    constructor(
+        player: ChromelessPlayer,
+        configuration: GemiusConfiguration,
+        programParameters: GemiusProgramParameters
+    ) {
+        this.gemiusIntegration = new GemiusTHEOIntegration(player, configuration, programParameters);
+    }
+
+    update(programParameters: GemiusProgramParameters) {
+        this.gemiusIntegration.update(programParameters);
+    }
+
+    /**
+     * Destroy
+     */
+    destroy(): void {
+        this.gemiusIntegration.destroy();
+    }
+}

gemius/src/integration/GemiusEvents.ts

@@ -0,0 +1,21 @@
+export type PlayEvent = 'play';
+export type BreakEvent = 'break';
+export type ChangeResolutionEvent = 'chngRes';
+export type ChangeVolumeEvent = 'chngVol';
+export type ChangeQualityEvent = 'chngQual';
+
+export enum ListEvent {
+    NEXT = 'next',
+    PREVIOUS = 'prev'
+}
+
+export enum BasicEvent {
+    STOP = 'stop',
+    PAUSE = 'pause',
+    BUFFER = 'buffer',
+    SEEK = 'seek',
+    COMPLETE = 'complete',
+    CLOSE = 'close',
+    SKIP = 'skip',
+    NEXT = 'next'
+}