@mediakind/mkplayer 1.0.7

package/src/MKPlayer.ts

@@ -0,0 +1,289 @@
+import {
+  BufferType, HttpRequestType, LogLevel, MediaType, Player, PlayerAPI, PlayerConfig, PlayerEvent, SourceConfig,
+  SubtitleTrack,
+} from 'bitmovin-player';
+import { UIFactory } from 'bitmovin-player-ui';
+import { MKPlayerConfiguration } from './MKPlayerConfiguration';
+import { MKStream } from './MKStream';
+import { MKEvent } from './events/MKEvent';
+import { BufferLevel } from './BufferLevel';
+import { MKPlayerEventCallback } from './events/MKPlayerEventCallback';
+import { Logger } from './Logger';
+
+/**
+ * MKPlayer is an HTML5 video player used for playback of HLS and DASH adaptive bitrate streams
+ */
+export class MKPlayer {
+  private player: PlayerAPI;
+
+  /**
+   * constructor used to create a new MKPlayer instance
+   *
+   * @param containerElement - container that the video player will be rendered in
+   * @param mkPlayerConfiguration - configuration for this MKPlayer instance
+   */
+  constructor(containerElement: HTMLElement, mkPlayerConfiguration: MKPlayerConfiguration) {
+    let playerConfig: PlayerConfig = {
+      key: '84dc4716-55f9-43fa-ae8e-6fa334c5189b',
+      playback: {
+        autoplay: mkPlayerConfiguration.autoplay,
+        muted: mkPlayerConfiguration.muted,
+      },
+      analytics: {
+        key: '1c45ae9c-345e-4462-95e2-3e8faccd64f1',
+      },
+      location: {
+        ui: '//cdn.bitmovin.com/player/web/8.46.0/bitmovinplayer-ui.js',
+        ui_css: 'mkplayer-ui.min.css',
+      },
+      logs: {
+        level: LogLevel.OFF,
+        bitmovin: false,
+      },
+      network: {
+        preprocessHttpResponse: function(type, response) {
+          if (type === HttpRequestType.MANIFEST_HLS_VARIANT) {
+            // @ts-ignore
+            response.body = (response.body as string).replace('TIME-OFFSET=0',
+              'TIME-OFFSET=0,PRECISE="YES"');
+          } else if (type === HttpRequestType.MANIFEST_HLS_MASTER) {
+            // @ts-ignore
+            response.body = (response.body as string).replace(',wvtt"',
+              '"');
+          }
+          return Promise.resolve(response);
+        },
+      },
+    };
+
+    let player = new Player(document.getElementById('player'), playerConfig);
+
+    if (mkPlayerConfiguration.smallScreen) {
+      UIFactory.buildDefaultSmallScreenUI(player);
+    } else {
+      UIFactory.buildDefaultUI(player);
+    }
+
+    if (mkPlayerConfiguration.debug) {
+      Logger.enable();
+    }
+
+    this.player = player;
+
+    console.log('%c MKPlayer ' + this.version() + ' www.mediakind.com', 'color: blue');
+  }
+
+  /**
+   * start playback or resumes playback after the player has been paused
+   */
+  play(): Promise<void> {
+    return this.player.play();
+  }
+
+  /**
+   * pauses playback on the player
+   */
+  pause(): void {
+    this.player.pause();
+  }
+
+  /**
+   * destroys the video player. You must create a new MKPlayer if this method is called
+   */
+  destroy(): Promise<void> {
+    return this.player.destroy();
+  }
+
+  /**
+   * Loads a new stream for playback
+   *
+   * @param stream - the stream the player will load
+   */
+  load(stream: MKStream): Promise<void> {
+    let playerSource: SourceConfig;
+    let url: string = MKPlayer.selectUrl(stream);
+
+    if (url.includes('.m3u8')) {
+      playerSource = {
+        hls: url,
+      };
+    } else if (url.includes('.mp4')) {
+      playerSource = {
+        progressive: url,
+      };
+    } else {
+      playerSource = {
+        dash: url,
+      };
+    }
+
+    if (stream.poster) {
+      playerSource.poster = stream.poster;
+    }
+
+    if (stream.assetIdentifier) {
+      playerSource.analytics = {
+        videoId: stream.assetIdentifier,
+      };
+    }
+
+    if (stream.subtitleTracks) {
+      playerSource.subtitleTracks = stream.subtitleTracks.map((track) => <SubtitleTrack>{
+        lang: track.language,
+        url: track.url,
+        id: MKPlayer.makeId(4),
+      });
+    }
+
+    Logger.log('[MKPlayer] loading source - ' + JSON.stringify(playerSource));
+
+    return this.player.load(playerSource);
+  }
+
+  /**
+   * Removes a handler for a MKEvent
+   *
+   * @param eventType
+   * @param callback
+   */
+  off(eventType: MKEvent, callback: MKPlayerEventCallback): void {
+    let playerEventType = MKPlayer.mapEvent(eventType);
+
+    return this.player.off(playerEventType, callback);
+  }
+
+  /**
+   * Subscribes and event handler to a MKEvent
+   *
+   * @param eventType
+   * @param callback
+   */
+  on(eventType: MKEvent, callback: MKPlayerEventCallback): void {
+    let playerEventType = MKPlayer.mapEvent(eventType);
+
+    return this.player.on(playerEventType, callback);
+  }
+
+  /**
+   * unloads the current playing stream
+   */
+  unload(): Promise<void> {
+    return this.player.unload();
+  }
+
+  /**
+   * gets the player's current time
+   */
+  getCurrentTime(): number {
+    return this.player.getCurrentTime();
+  }
+
+  /**
+   * gets the current audio and video buffer levels
+   *
+   * @returns
+   */
+  getBufferLevels(): BufferLevel {
+    return {
+      audio: this.player.buffer.getLevel(BufferType.ForwardDuration, MediaType.Audio).level,
+      video: this.player.buffer.getLevel(BufferType.ForwardDuration, MediaType.Video).level,
+    };
+  }
+
+  /**
+   * mutes the player
+   */
+  mute(): void {
+    this.player.mute();
+  }
+
+  /**
+   * unmute the player
+   */
+  unmute(): void {
+    this.player.unmute();
+  }
+
+  /**
+   * sets the player's volume in the range of 0 (silent) to 100 (max volume)
+   *
+   * @param volume The volume to set between 0 and 100
+
+   */
+  setVolume(volume: number): void {
+    this.player.setVolume(volume);
+  }
+
+  /**
+   * returns the current player version
+   */
+  version(): string {
+    return '1.0.7';
+  }
+
+  private static selectUrl(source: MKStream): string {
+    let rand = MKPlayer.getRandomInt(99);
+    if (source.cdnFailoverPercent && source.secondaryUrl && rand < source.cdnFailoverPercent) {
+      Logger.log('[MKPlayer] selecting secondary source url - ' + source.secondaryUrl);
+      return source.secondaryUrl;
+    } else {
+      Logger.log('[MKPlayer] selecting primary source url - ' + source.primaryUrl);
+      return source.primaryUrl;
+    }
+  }
+
+  private static getRandomInt(max: number) {
+    return Math.floor(Math.random() * Math.floor(max));
+  }
+
+  private static makeId(length) {
+    let result = '';
+    let characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+    let charactersLength = characters.length;
+    for (let i = 0; i < length; i++) {
+      result += characters.charAt(Math.floor(Math.random() * charactersLength));
+    }
+    return result;
+  }
+
+  private static mapEvent(event: MKEvent): PlayerEvent {
+    let playerEventType: PlayerEvent;
+    switch (event) {
+      case MKEvent.BufferingStarted:
+        playerEventType = PlayerEvent.StallStarted;
+        break;
+      case MKEvent.BufferingEnded:
+        playerEventType = PlayerEvent.StallEnded;
+        break;
+      case MKEvent.Playing:
+        playerEventType = PlayerEvent.Playing;
+        break;
+      case MKEvent.TimeChanged:
+        playerEventType = PlayerEvent.TimeChanged;
+        break;
+      case MKEvent.Ready:
+        playerEventType = PlayerEvent.Ready;
+        break;
+      case MKEvent.Error:
+        playerEventType = PlayerEvent.Error;
+        break;
+      case MKEvent.StreamFinished:
+        playerEventType = PlayerEvent.PlaybackFinished;
+        break;
+      case MKEvent.Warning:
+        playerEventType = PlayerEvent.Warning;
+        break;
+      case MKEvent.QualityChanged:
+        playerEventType = PlayerEvent.VideoPlaybackQualityChanged;
+        break;
+      case MKEvent.SegmentPlayback:
+        playerEventType = PlayerEvent.SegmentPlayback;
+        break;
+      case MKEvent.Unloaded:
+        playerEventType = PlayerEvent.SourceUnloaded;
+        break;
+    }
+
+    return playerEventType;
+  }
+}

package/src/MKPlayerConfiguration.ts

@@ -0,0 +1,24 @@
+/**
+ * MKPlayer's configuration interface
+ */
+export interface MKPlayerConfiguration {
+  /**
+   * Toggles debug output logging
+   */
+  debug: boolean;
+
+  /**
+   * Option to enable the player to start playback after successfully loading a source
+   */
+  autoplay: boolean;
+
+  /**
+   * Option to enable the player to start in a muted state. The user is able to unmute via the UI or an API call through
+   */
+  muted: boolean;
+
+  /**
+   * Boolean indicating if the player should load the small screen ui
+   */
+  smallScreen: boolean;
+}

package/src/MKStream.ts

@@ -0,0 +1,74 @@
+/**
+ * Configuration object used when loading a new stream
+ */
+import { SubtitleTrack } from './SubtitleTrack';
+
+export class MKStream {
+  private readonly _assetIdentifier: string;
+  private readonly _primaryUrl?: string;
+  private readonly _secondaryUrl?: string;
+  private readonly _subtitleTracks: SubtitleTrack[];
+  private readonly _cdnFailoverPercent: number = 0;
+  private readonly _poster: string;
+
+  /**
+   *
+   * @param primaryUrl - primary stream url
+   * @param secondaryUrl - secondary backup stream url
+   * @param subtitleTracks - a list of external subtitle tracks that should be loaded with the player
+   * @param poster - url to a poster image to render on the player
+   * @param cdnFailoverPercent - percent value from 0-100 describing what percentage of users should initially playback
+   *   the secondary url
+   * @param assetIdentifier - identifier for the current stream
+   */
+  constructor(primaryUrl: string, assetIdentifier: string, subtitleTracks?: SubtitleTrack[], poster?: string, secondaryUrl?: string, cdnFailoverPercent?: number) {
+    this._cdnFailoverPercent = cdnFailoverPercent;
+    this._secondaryUrl = secondaryUrl;
+    this._primaryUrl = primaryUrl;
+    this._assetIdentifier = assetIdentifier;
+    this._subtitleTracks = subtitleTracks;
+    this._poster = poster;
+  }
+
+  /**
+   * percent value from 0-100 describing what percentage of users should playback the secondary url
+   */
+  public get cdnFailoverPercent(): number {
+    return this._cdnFailoverPercent;
+  }
+
+  /**
+   * primary stream url used during playback
+   */
+  public get primaryUrl(): string {
+    return this._primaryUrl;
+  }
+
+  /**
+   * secondary stream url used during playback
+   */
+  public get secondaryUrl(): string {
+    return this._secondaryUrl;
+  }
+
+  /**
+   * percent value from 0-100 describing what percentage of users should playback the secondary url
+   */
+  public get subtitleTracks(): SubtitleTrack[] {
+    return this._subtitleTracks;
+  }
+
+  /**
+   * identifier for the current stream
+  */
+  public get assetIdentifier(): string {
+    return this._assetIdentifier;
+  }
+
+  /**
+   * poster art for the current stream
+   */
+  public get poster(): string {
+    return this._poster;
+  }
+}

package/src/SubtitleTrack.ts

@@ -0,0 +1,14 @@
+/**
+ * Used to describe an external subtitle track (WebVtt or srt) outside of the MKStream manifest url
+ */
+export interface SubtitleTrack {
+  /**
+   * url to the external subtitle track
+   */
+  url: string;
+
+  /**
+   * language of the subtitle track. This string will be displayed in the UI
+   */
+  language: string;
+}

package/src/events/MKEvent.ts

@@ -0,0 +1,16 @@
+/**
+ * Events that are fired during playback
+ */
+export enum MKEvent {
+  Playing = 'playing',
+  Ready = 'ready',
+  TimeChanged = 'timechanged',
+  Error = 'error',
+  BufferingStarted = 'bufferingstarted',
+  BufferingEnded = 'bufferingended',
+  StreamFinished = 'streamfinished',
+  Warning = 'warning',
+  QualityChanged = 'qualitychanged',
+  SegmentPlayback = 'segmentplayback',
+  Unloaded = 'unloaded',
+}

package/src/events/MKPlayerEventCallback.ts

@@ -0,0 +1,8 @@
+import { PlayerEventBase } from 'bitmovin-player';
+
+/**
+ * Interface describing the data returned in the MKPlayer event callback
+ */
+export interface MKPlayerEventCallback {
+  (event: PlayerEventBase): void;
+}

package/src/index.ts

@@ -0,0 +1,4 @@
+export { MKPlayer } from './MKPlayer';
+export { MKPlayerConfiguration } from './MKPlayerConfiguration';
+export { MKStream } from './MKStream';
+export { MKEvent } from './events/MKEvent';

package/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "files": [
+    "src/index.ts"
+  ],
+  "compilerOptions": {
+    "outDir": "./dist",
+    "target": "es5",
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "declaration": true,
+    "lib": ["es2016", "es2015.promise", "dom"],
+    "sourceMap": true,
+    "noImplicitAny": false,
+    "removeComments": true,
+    "skipLibCheck": true
+  },
+  "include": [
+    "./src"
+  ]
+}

package/tslint.json

@@ -0,0 +1,72 @@
+{
+  "rules": {
+    "class-name": true,
+    "comment-format": [
+      true,
+      "check-space"
+    ],
+    "indent": [
+      true,
+      "spaces"
+    ],
+    "no-duplicate-variable": true,
+    "no-eval": true,
+    "no-internal-module": true,
+    "no-trailing-whitespace": true,
+    "no-var-keyword": false,
+    "one-line": [
+      true,
+      "check-open-brace",
+      "check-whitespace"
+    ],
+    "quotemark": [
+      true,
+      "single"
+    ],
+    "semicolon": [
+      true,
+      "always",
+      "ignore-bound-class-methods"
+    ],
+    "triple-equals": [
+      true,
+      "allow-null-check"
+    ],
+    "typedef-whitespace": [
+      true,
+      {
+        "call-signature": "nospace",
+        "index-signature": "nospace",
+        "parameter": "nospace",
+        "property-declaration": "nospace",
+        "variable-declaration": "nospace"
+      }
+    ],
+    "variable-name": [
+      true,
+      "ban-keywords"
+    ],
+    "whitespace": [
+      true,
+      "check-branch",
+      "check-decl",
+      "check-operator",
+      "check-separator",
+      "check-type"
+    ],
+    "trailing-comma": [
+      true,
+      {
+        "multiline": {
+          "arrays": "always",
+          "exports": "always",
+          "functions": "never",
+          "imports": "always",
+          "objects": "always",
+          "typeLiterals": "always"
+        },
+        "singleline": "never"
+      }
+    ]
+  }
+}

package/typedoc.json

@@ -0,0 +1,11 @@
+{
+  "stripInternal": "true",
+  "out": "doc",
+  "excludeNotExported": "true",
+  "name": "MKPlayer",
+  "exclude": "src/index.ts",
+  "mode": "file",
+  "excludePrivate": "true",
+  "excludeProtected": true,
+  "excludeNotDocumented": true
+}