Merge pull request #63 from THEOplayer/feature/conviva-device-metadata

Feature/conviva device metadata

.changeset/rare-readers-talk.md

@@ -0,0 +1,5 @@
+---
+"@theoplayer/conviva-connector-web": patch
+---
+
+Fixed an issue where an asset name, provided via a `ConvivaMetadata` object in the `ConvivaConnector` initialization, stops getting reported after a `sourcechange` event.

.changeset/sixty-pots-teach.md

@@ -0,0 +1,5 @@
+---
+"@theoplayer/conviva-connector-web": minor
+---
+
+Added `deviceMetadata` property to `ConvivaConfiguration`.

conviva/README.md

@@ -43,6 +43,26 @@ First you need to define the Conviva metadata and configuration:
     };
 ```
 
+Optionally, you can include device metadata in the ConvivaConfiguration object. Note that `SCREEN_RESOLUTION_WIDTH`, `SCREEN_RESOLUTION_HEIGHT` and `SCREEN_RESOLUTION_SCALE_FACTOR` are the only fields that Conviva will auto-collect on most web-based platforms.
+
+```typescript
+const exampleDeviceMetadata: ConvivaDeviceMetadata = {
+    [Constants.DeviceMetadata.BRAND]: "Samsung",
+    [Constants.DeviceMetadata.MANUFACTURER]: "Samsung",
+    [Constants.DeviceMetadata.MODEL]: "QE43Q64BAUXXN",
+    [Constants.DeviceMetadata.TYPE]:  Constants.DeviceType.SMARTTV,
+    [Constants.DeviceMetadata.VERSION]: "6.5.0",
+    [Constants.DeviceMetadata.OS_NAME]: "Tizen",
+    [Constants.DeviceMetadata.OS_VERSION]: "6.5.0",
+    [Constants.DeviceMetadata.CATEGORY]: Constants.DeviceCategory.SAMSUNG_TV,
+    [Constants.DeviceMetadata.SCREEN_RESOLUTION_WIDTH]: 3840,
+    [Constants.DeviceMetadata.SCREEN_RESOLUTION_HEIGHT]: 2160,
+    [Constants.DeviceMetadata.SCREEN_RESOLUTION_SCALE_FACTOR]: 1
+}
+
+convivaMetadata.deviceMetadata = exampleDeviceMetadata
+```
+
 Using these configs you can create the Conviva connector with THEOplayer.
 
 * Add as a regular script:
@@ -71,6 +91,13 @@ Using these configs you can create the Conviva connector with THEOplayer.
 
 The Conviva connector is now ready to start a session once THEOplayer starts playing a source.
 
+Note that the `convivaMetadata` provided to the `ConvivaConnector` constructor is primarily used to pass on to the Conviva SDK's `reportPlaybackRequested`. If a source is set to the player after initializing the connector, you should always provide the corresponding metadata (again) through the connector's `setContentInfo` method.
+
+```js
+player.source = exampleSource;
+convivaIntegration.setContentInfo(exampleSourceMetadata);
+```
+
 ## Usage with Yospace connector
 
 If you have a Yospace SSAI stream and want to also report ad related events to Conviva, you can use this connector in combination with the Yospace connector: [@theoplayer/yospace-connector-web](https://www.npmjs.com/package/@theoplayer/yospace-connector-web)

conviva/package.json

@@ -21,7 +21,7 @@
     "bundle": "rollup -c rollup.config.mjs",
     "watch": "npm run bundle -- --watch",
     "build": "npm run clean && npm run bundle",
-    "serve": "http-server",
+    "serve": "http-server ./.. -o /conviva/test/pages/",
     "test": "jest"
   },
   "author": "THEO Technologies NV",

conviva/src/integration/ConvivaConnector.ts

@@ -20,7 +20,8 @@ export class ConvivaConnector {
     }
 
     /**
-     * Sets Conviva metadata on the Conviva video analytics.
+     * Sets Conviva metadata on the Conviva video analytics. Use this method to set source 
+     * specific metadata after setting a source to the player.
      * @param metadata object of key value pairs
      */
     setContentInfo(metadata: ConvivaMetadata): void {

conviva/src/integration/ConvivaHandler.ts

@@ -4,15 +4,16 @@ import {
     Analytics,
     Constants,
     type ConvivaMetadata,
-    type VideoAnalytics
+    type VideoAnalytics,
+    ConvivaDeviceMetadata
 } from '@convivainc/conviva-js-coresdk';
 import type { YospaceConnector } from '@theoplayer/yospace-connector-web';
 import { CONVIVA_CALLBACK_FUNCTIONS } from './ConvivaCallbackFunctions';
 import {
     calculateBufferLength,
     calculateConvivaOptions,
     collectContentMetadata,
-    collectDeviceMetadata,
+    collectDefaultDeviceMetadata,
     collectPlayerInfo,
     flattenErrorObject
 } from '../utils/Utils';
@@ -25,6 +26,7 @@ export interface ConvivaConfiguration {
     customerKey: string;
     debug?: boolean;
     gatewayUrl?: string;
+    deviceMetadata?: ConvivaDeviceMetadata;
 }
 
 export class ConvivaHandler {
@@ -48,11 +50,10 @@ export class ConvivaHandler {
     constructor(player: ChromelessPlayer, convivaMetaData: ConvivaMetadata, config: ConvivaConfiguration) {
         this.player = player;
         this.convivaMetadata = convivaMetaData;
-        this.customMetadata = convivaMetaData;
         this.convivaConfig = config;
         this.currentSource = player.source;
 
-        Analytics.setDeviceMetadata(collectDeviceMetadata());
+        Analytics.setDeviceMetadata(this.convivaConfig.deviceMetadata ?? collectDefaultDeviceMetadata());
         Analytics.init(
             this.convivaConfig.customerKey,
             CONVIVA_CALLBACK_FUNCTIONS,
@@ -243,7 +244,11 @@ export class ConvivaHandler {
     private reportMetadata() {
         const src = this.player.src ?? '';
         const streamType = this.player.duration === Infinity ? Constants.StreamType.LIVE : Constants.StreamType.VOD;
-        const assetName = this.customMetadata[Constants.ASSET_NAME] ?? this.currentSource?.metadata?.title ?? 'NA';
+        const assetName =
+            this.customMetadata[Constants.ASSET_NAME] ??
+            this.convivaMetadata[Constants.ASSET_NAME] ??
+            this.currentSource?.metadata?.title ??
+            'NA';
         const playerName = this.customMetadata[Constants.PLAYER_NAME] ?? 'THEOplayer';
         const metadata = {
             [Constants.STREAM_URL]: src,

conviva/src/utils/Utils.ts

@@ -21,7 +21,7 @@ import {
 } from 'theoplayer';
 import { ConvivaConfiguration } from '../integration/ConvivaHandler';
 
-export function collectDeviceMetadata(): ConvivaDeviceMetadata {
+export function collectDefaultDeviceMetadata(): ConvivaDeviceMetadata {
     // Most device metadata is auto-collected by Conviva.
     return {
         [Constants.DeviceMetadata.CATEGORY]: Constants.DeviceCategory.WEB

conviva/test/pages/main_esm.html

@@ -4,16 +4,23 @@
     <meta charset="UTF-8"/>
     <title>Connector test page</title>
     <link rel="stylesheet" type="text/css" href="./../../../node_modules/theoplayer/ui.css"/>
-    <script src="./../../../node_modules/theoplayer/THEOplayer.js"></script>
-    <script src="./../../../node_modules/@convivainc/conviva-js-coresdk/conviva-core-sdk.js"></script>
-    <script src="./../../dist/conviva-connector.umd.js"></script>
 </head>
 <body>
 <div id="THEOplayer" class="theoplayer-container video-js theoplayer-skin"></div>
+<script type="importmap">
+    {
+      "imports": {
+        "theoplayer": "./../../../node_modules/theoplayer/THEOplayer.esm.js",
+        "@convivainc/conviva-js-coresdk": "https://esm.sh/@convivainc/[email protected]?exports=Constants,Analytics"
+      }
+    }
+</script>
 <script type="module">
-    import { ConvivaConnector } from "/dist/conviva-connector.esm.js";
+    import { Player } from "theoplayer"
+    import { ConvivaConnector } from "./../../dist/conviva-connector.esm.js";
+    import * as Conviva from "@convivainc/conviva-js-coresdk";
     const element = document.querySelector('#THEOplayer');
-    const player = new THEOplayer.Player(element, {
+    const player = new Player(element, {
         ui: {
             fluid: true
         },

conviva/test/pages/main_umd.html

@@ -31,7 +31,7 @@
     const convivaConfig = {
         debug: false,
         gatewayUrl: 'CUSTOMER_GATEWAY_GOES_HERE',
-        customerKey: 'CUSTOMER_KEY_GOES_HERE' // Can be a test or production key.
+        customerKey: 'CUSTOMER_KEY_GOES_HERE' // Can be a test or production key. 
     };
 
     const convivaIntegration = new THEOplayerConvivaConnector.ConvivaConnector(