First commit

apivideo · Mar 24, 2021 · ea22fa1 · ea22fa1
commit ea22fa1
Show file tree

Hide file tree

Showing 17 changed files with 8,703 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+node_modules
diff --git a/.npmignore b/.npmignore
@@ -0,0 +1,7 @@
+tsconfig.json
+tslint.json
+webpack.config.js
+node_modules
+test
+dist/test
+sample
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -0,0 +1,5 @@
+# Changelog
+All changes to this project will be documented in this file.
+
+## [1.0.0] - 2021-03-24
+- First release
diff --git a/LICENSE b/LICENSE
@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2020 api.video
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
diff --git a/README.md b/README.md
@@ -0,0 +1,78 @@
+![](https://github.com/apivideo/API_OAS_file/blob/master/apivideo_banner.png)
+
+# api.video player analytics module for hls.js based players
+
+hls.js module to call the api.video analytics collector. 
+
+# Module usage
+
+## Setup
+
+First include `https://unpkg.com/@api.video/hlsjs-player-analytics` in your web page.
+
+```html
+<script src="https://unpkg.com/@api.video/hlsjs-player-analytics"></script>
+```
+
+## Module instanciation
+
+Then, before having instanciated `Hls`, instanciate a `HlsJsApiVideoAnalytics` object. 
+
+The `HlsJsApiVideoAnalytics` constructor take the following parameters:
+
+| Parameter name | Mandatory | Type                                        | Description         |
+| -------------: | --------- | ------------------------------------------- | ------------------- |
+|            hls | **yes**   | `Hls` instance                              | the instance of Hls |
+|        options | no        | `HlsJsApiVideoAnalyticsOptions` (see below) | optional options    |
+
+
+Available options (`HlsJsApiVideoAnalyticsOptions`):
+
+|  Option name | Mandatory | Type                                  | Description                                                                                                  |
+| -----------: | --------- | ------------------------------------- | ------------------------------------------------------------------------------------------------------------ |
+| userMetadata | no        | ```{ [name: string]: string }[]```    | object containing [metadata](https://api.video/blog/tutorials/dynamic-metadata) (see **Full example** below) |
+|     sequence | no        | ```{start: number; end?: number;} ``` | if only a sequence of the video is going to be played                                                        |
+
+### instanciation example
+
+```javascript
+var hls = new Hls();
+
+new VideoElementApiVideoAnalytics(hls, {
+    sequence: {
+        start: 10,
+        end: 50
+    },
+    userMetadata: {
+        gender: "male"
+    }
+});
+```
+
+# Full example
+
+Include the module in your HTML file like so:
+
+```html
+<html>
+    <head>
+        <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
+        <script src="https://unpkg.com/@api.video/hlsjs-player-analytics"></script>
+    </head>
+
+    <body>
+        <video id="video" controls width=640 height=480></video>
+    <script>
+        var video = document.getElementById('video');
+        
+        var videoSrc = 'https://cdn.api.video/vod/vi5oDagRVJBSKHxSiPux5rYD/hls/manifest.m3u8';
+        if (Hls.isSupported()) {
+            var hls = new Hls();
+            new VideoElementApiVideoAnalytics(hls);
+            hls.loadSource(videoSrc);
+            hls.attachMedia(video);
+        }
+    </script>
+    </body>
+</html>
+```
diff --git a/dist/index.d.ts b/dist/index.d.ts
@@ -0,0 +1,15 @@
+import { CommonOptions } from '@api.video/player-analytics';
+import Hls from 'hls.js';
+export declare type HlsJsApiVideoAnalyticsOptions = CommonOptions;
+export declare class HlsJsApiVideoAnalytics {
+    private isFirstPlay;
+    private hls;
+    private videoElement;
+    private seekingStart?;
+    private seekingEnd?;
+    private options?;
+    private playerAnalytics;
+    constructor(hls: Hls, options?: HlsJsApiVideoAnalyticsOptions);
+    private init;
+    private onEvent;
+}
diff --git a/dist/index.js b/dist/index.js
diff --git a/dist/test/index.test.d.ts b/dist/test/index.test.d.ts
diff --git a/index.ts b/index.ts
@@ -0,0 +1,111 @@
+import { CommonOptions, PlayerAnalytics } from '@api.video/player-analytics';
+import Hls from 'hls.js';
+
+export type HlsJsApiVideoAnalyticsOptions = CommonOptions;
+
+export class HlsJsApiVideoAnalytics {
+    private isFirstPlay = true;
+    private hls: Hls;
+    private videoElement: HTMLMediaElement | null | undefined;
+    private seekingStart?: number;
+    private seekingEnd?: number;
+    private options?: CommonOptions;
+
+    private playerAnalytics!: PlayerAnalytics;
+
+    constructor(hls: Hls, options?: HlsJsApiVideoAnalyticsOptions) {
+        this.hls = hls;
+        this.options = options || {};
+
+        if (this.hls.media && (this.hls as any).url) {
+            this.init();
+        } else {
+            hls.on('hlsManifestLoaded', (event, data) => {
+                this.init();
+            });
+        }
+    }
+
+    private init() {
+        this.videoElement = this.hls.media;
+        this.isFirstPlay = true;
+
+        if (this.playerAnalytics) {
+            this.playerAnalytics.destroy();
+        } else {
+            events.forEach((eventName) => {
+                this.hls.media?.addEventListener(eventName, (e) => this.onEvent(eventName, e));
+            });
+        }
+        this.playerAnalytics = new PlayerAnalytics({
+            ...this.options,
+            mediaUrl: (this.hls as any).url
+        });
+    }
+
+
+    private onEvent(eventName: string, event: any) {
+        const currentTime = this.videoElement?.currentTime || 0;
+
+        if (eventName === 'timeupdate') {
+            this.playerAnalytics.updateTime(currentTime);
+        }
+        if (eventName === 'canplay') {
+            if (this.isFirstPlay) {
+                this.playerAnalytics.ready();
+            }
+        }
+        if (eventName === 'play') {
+            if (this.isFirstPlay) {
+                this.playerAnalytics.play();
+                this.isFirstPlay = false;
+            } else {
+                this.playerAnalytics.resume();
+            }
+        }
+        if (eventName === 'pause') {
+            this.playerAnalytics.pause();
+
+        }
+        if (eventName === 'ended') {
+            this.playerAnalytics.end();
+        }
+        if (eventName === 'seeked') {
+            this.playerAnalytics.seek(this.seekingStart || 0, this.seekingEnd || 0);
+        }
+        if (eventName === 'seeking') {
+            this.seekingEnd = currentTime;
+        }
+        if (this.videoElement?.seeking === false && eventName !== 'timeupdate') {
+            this.seekingStart = currentTime;
+        }
+    }
+}
+
+
+const events = ['abort',
+    'canplay',
+    'canplaythrough',
+    'durationchange',
+    'emptied',
+    'encrypted',
+    'ended',
+    'error',
+    'interruptbegin',
+    'interruptend',
+    'loadeddata',
+    'loadedmetadata',
+    'loadstart',
+    'mozaudioavailable',
+    'pause',
+    'play',
+    'playing',
+    'progress',
+    'ratechange',
+    'seeked',
+    'seeking',
+    'stalled',
+    'suspend',
+    'timeupdate',
+    'volumechange',
+    'waiting'];
diff --git a/jest.config.js b/jest.config.js
@@ -0,0 +1,10 @@
+const {defaults} = require('jest-config');
+
+module.exports = {
+    roots: ["./"],
+    transform: {
+      '^.+\\.ts$': 'ts-jest',
+    },
+    testRegex: '(/__tests__/.*|(\\.|/)(test|spec))\\.ts$',
+    moduleFileExtensions: ['ts', 'js', 'json', 'node']
+}