@mediakind/mkplayer 1.0.14 → 1.0.15

package/src/MKPlayer.ts

@@ -8,12 +8,16 @@ import { MKEvent } from './events/MKEvent';
 import { BufferLevel } from './BufferLevel';
 import { MKPlayerEventCallback } from './events/MKPlayerEventCallback';
 import { Logger } from './Logger';
+import { HttpRequest, HttpRequestType } from 'bitmovin-player/types/core/NetworkAPI';
+import { RequestType } from './events/RequestType';
+import { URLHelper } from './URLHelper';
 
 /**
  * MKPlayer is an HTML5 video player used for playback of HLS and DASH adaptive bitrate streams
  */
 export class MKPlayer {
   private player: PlayerAPI;
+  private stream: MKStream;
 
   /**
    * constructor used to create a new MKPlayer instance
@@ -31,20 +35,41 @@ export class MKPlayer {
       analytics: {
         key: '1c45ae9c-345e-4462-95e2-3e8faccd64f1',
       },
-      location: {
-        ui: 'mkplayer-ui.js',
-        ui_css: 'mkplayer-ui.min.css',
+      ui: {
+        disableAutoHideWhenHovered: true,
       },
       logs: {
         level: LogLevel.OFF,
         bitmovin: false,
       },
+      network: {
+        preprocessHttpRequest: (type: HttpRequestType, request: HttpRequest) => {
+          if (type === 'manifest/hls/master') {
+            if (typeof mkPlayerConfiguration.refreshToken === 'function') {
+              let token = mkPlayerConfiguration.refreshToken(RequestType.Master);
+              console.log('[MKPlayer] Appending master token: ' + token);
+              request.url = this.appendToken(request.url, token);
+            }
+          } else if (type === 'manifest/hls/variant') {
+            if (typeof mkPlayerConfiguration.refreshToken === 'function') {
+              let token = mkPlayerConfiguration.refreshToken(RequestType.Variant);
+              console.log('[MKPlayer] Appending variant token: ' + token);
+              request.url = this.appendToken(request.url, token);
+            }
+          }
+          return Promise.resolve(request);
+        },
+        preprocessHttpResponse: (type, response) => {
+          if (type === 'manifest/hls/master') {
+            let body = this.manipulateMasterPlaylist((response.body as string));
+            // @ts-ignore
+            response.body = body;
+          }
+          return Promise.resolve(response);
+        },
+      },
     };
 
-    if (mkPlayerConfiguration.ui === false) {
-      playerConfig.ui = false;
-    }
-
     if (mkPlayerConfiguration.targetLatency > 0) {
       playerConfig.live = {
         lowLatency: {
@@ -68,7 +93,7 @@ export class MKPlayer {
       if (mkPlayerConfiguration.smallScreen) {
         UIFactory.buildDefaultSmallScreenUI(player);
       } else {
-        UIFactory.buildDefaultUI(player);
+        UIFactory.buildDefaultUI(player, playerConfig.ui);
       }
     }
 
@@ -76,9 +101,7 @@ export class MKPlayer {
       Logger.enable();
     }
 
-
     this.player = player;
-
     console.log('%c MKPlayer ' + this.version() + ' www.mediakind.com', 'color: blue');
   }
 
@@ -110,6 +133,7 @@ export class MKPlayer {
    */
   load(stream: MKStream): Promise<void> {
     let playerSource: SourceConfig;
+    this.stream = stream;
     let url: string = MKPlayer.selectUrl(stream);
 
     if (url.includes('.m3u8')) {
@@ -143,7 +167,7 @@ export class MKPlayer {
       };
     }
 
-    if (stream.subtitleTracks) {
+    if (stream.subtitleTracks && !stream.subtitleTracks[0].url.includes('.m3u8')) {
       playerSource.subtitleTracks = stream.subtitleTracks.map((track) => <SubtitleTrack>{
         lang: track.language,
         url: track.url,
@@ -176,7 +200,6 @@ export class MKPlayer {
    */
   on(eventType: MKEvent, callback: MKPlayerEventCallback): void {
     let playerEventType = MKPlayer.mapEvent(eventType);
-
     return this.player.on(playerEventType, callback);
   }
 
@@ -247,7 +270,6 @@ export class MKPlayer {
    * 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);
@@ -257,7 +279,7 @@ export class MKPlayer {
    * returns the current player version
    */
   version(): string {
-    return '1.0.13';
+    return '1.0.15';
   }
 
   private static selectUrl(source: MKStream): string {
@@ -331,7 +353,37 @@ export class MKPlayer {
         playerEventType = PlayerEvent.MetadataParsed;
         break;
     }
-
     return playerEventType;
   }
+
+  private manipulateMasterPlaylist(response: string): string {
+    let body = (response as string);
+    if (this.stream.subtitleTracks && this.stream.subtitleTracks[0].url.includes('.m3u8')) {
+      this.stream.subtitleTracks.forEach((track) => {
+        body = body.concat('\n#EXT-X-MEDIA:TYPE=SUBTITLES,'
+          + 'NAME="' + track.language + '",'
+          + 'DEFAULT=YES,'
+          + 'AUTOSELECT=YES,'
+          + 'FORCED=NO,'
+          + 'LANGUAGE="' + track.language + '",GROUP-ID="subs",'
+          + 'URI="' + track.url + '"');
+      });
+    }
+
+    return body;
+  }
+
+  private appendToken(url: string, token: string): string {
+    let splitted = token.split('=');
+    if (splitted && splitted.length >= 2) {
+      let key = splitted[0];
+      let value = splitted[1];
+      let params = new Map<string, string>();
+      params.set(key, value);
+      let updatedUrl = URLHelper.appendQueryParametersToUrl(url, params);
+      return updatedUrl;
+    } else {
+      return url;
+    }
+  }
 }

package/src/MKPlayerConfiguration.ts

@@ -1,6 +1,8 @@
 /**
  * MKPlayer's configuration interface
  */
+import { RequestType } from './events/RequestType';
+
 export interface MKPlayerConfiguration {
   /**
    * Toggles debug output logging
@@ -36,4 +38,9 @@ export interface MKPlayerConfiguration {
    * license key for the video player
    */
   key: string;
+
+  /**
+   * Refresh the CDN Token
+   */
+  refreshToken?: (type: RequestType) => string;
 }

package/src/URLHelper.ts

@@ -0,0 +1,63 @@
+export class URLHelper {
+  public static appendQueryParametersToUrl(url: string, parameters: Map<string, string>): string {
+    // See if our url still has a queryString
+    let queryString = '';
+    let queryStringHasStarted = url.indexOf('?') >= 0;
+
+    if (parameters) {
+      parameters.forEach((value, key) => {
+          // Add parameter separator
+          if (!queryStringHasStarted) {
+            // Query string is separated from URL with "?"
+            queryString += '?';
+            queryStringHasStarted = true;
+          } else {
+            // Parameters within the query string are concatenated by "&"
+            queryString += '&';
+          }
+
+          // Add parameter name
+          queryString += key;
+
+          // Add optional parameter value
+          if (value != null) {
+            queryString += '=' + encodeURIComponent(value);
+          }
+      });
+      }
+    return url + queryString;
+  }
+
+  public static removeUrlParameter(url: string, parameter: string) {
+    let urlParts: string[] = url.split('?');
+
+    if (urlParts.length >= 2) {
+      // Get first part, and remove from array
+      let urlBase: string = urlParts.shift();
+
+      // Join it back up
+      let queryString: string = urlParts.join('?');
+
+      let prefix: string = encodeURIComponent(parameter) + '=';
+      let parts: string[] = queryString.split(/[&;]/g);
+
+      // Reverse iteration as may be destructive
+      for (let i = parts.length; i-- > 0;) {
+        // Idiom for string.startsWith
+        if (parts[i].lastIndexOf(prefix, 0) !== -1) {
+          parts.splice(i, 1);
+        }
+      }
+
+      // Add back any url parameters that were not removed
+      if (parts.length > 0) {
+        url = urlBase + '?' + parts.join('&');
+      } else {
+        url = urlBase;
+      }
+    }
+
+    return url;
+
+  }
+}

package/src/events/RequestType.ts

@@ -0,0 +1,5 @@
+
+export enum RequestType {
+  Master = 'master',
+  Variant = 'variant',
+}

package/doc/interfaces/mkplayerconfiguration.html

@@ -1,290 +0,0 @@
-<!doctype html>
-<html class="default no-js">
-<head>
-	<meta charset="utf-8">
-	<meta http-equiv="X-UA-Compatible" content="IE=edge">
-	<title>MKPlayerConfiguration | MKPlayer</title>
-	<meta name="description" content="Documentation for MKPlayer">
-	<meta name="viewport" content="width=device-width, initial-scale=1">
-	<link rel="stylesheet" href="../assets/css/main.css">
-</head>
-<body>
-<header>
-	<div class="tsd-page-toolbar">
-		<div class="container">
-			<div class="table-wrap">
-				<div class="table-cell" id="tsd-search" data-index="../assets/js/search.json" data-base="..">
-					<div class="field">
-						<label for="tsd-search-field" class="tsd-widget search no-caption">Search</label>
-						<input id="tsd-search-field" type="text" />
-					</div>
-					<ul class="results">
-						<li class="state loading">Preparing search index...</li>
-						<li class="state failure">The search index is not available</li>
-					</ul>
-					<a href="../index.html" class="title">MKPlayer</a>
-				</div>
-				<div class="table-cell" id="tsd-widgets">
-					<div id="tsd-filter">
-						<a href="#" class="tsd-widget options no-caption" data-toggle="options">Options</a>
-						<div class="tsd-filter-group">
-							<div class="tsd-select" id="tsd-filter-visibility">
-								<span class="tsd-select-label">All</span>
-								<ul class="tsd-select-list">
-									<li data-value="public">Public</li>
-									<li data-value="protected">Public/Protected</li>
-									<li data-value="private" class="selected">All</li>
-								</ul>
-							</div>
-							<input type="checkbox" id="tsd-filter-inherited" checked />
-							<label class="tsd-widget" for="tsd-filter-inherited">Inherited</label>
-							<input type="checkbox" id="tsd-filter-externals" checked />
-							<label class="tsd-widget" for="tsd-filter-externals">Externals</label>
-						</div>
-					</div>
-					<a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a>
-				</div>
-			</div>
-		</div>
-	</div>
-	<div class="tsd-page-title">
-		<div class="container">
-			<ul class="tsd-breadcrumb">
-				<li>
-					<a href="../globals.html">Globals</a>
-				</li>
-				<li>
-					<a href="mkplayerconfiguration.html">MKPlayerConfiguration</a>
-				</li>
-			</ul>
-			<h1>Interface MKPlayerConfiguration</h1>
-		</div>
-	</div>
-</header>
-<div class="container container-main">
-	<div class="row">
-		<div class="col-8 col-content">
-			<section class="tsd-panel tsd-comment">
-				<div class="tsd-comment tsd-typography">
-					<div class="lead">
-						<p>MKPlayer&#39;s configuration interface</p>
-					</div>
-				</div>
-			</section>
-			<section class="tsd-panel tsd-hierarchy">
-				<h3>Hierarchy</h3>
-				<ul class="tsd-hierarchy">
-					<li>
-						<span class="target">MKPlayerConfiguration</span>
-					</li>
-				</ul>
-			</section>
-			<section class="tsd-panel-group tsd-index-group">
-				<h2>Index</h2>
-				<section class="tsd-panel tsd-index-panel">
-					<div class="tsd-index-content">
-						<section class="tsd-index-section ">
-							<h3>Properties</h3>
-							<ul class="tsd-index-list">
-								<li class="tsd-kind-property tsd-parent-kind-interface"><a href="mkplayerconfiguration.html#autoplay" class="tsd-kind-icon">autoplay</a></li>
-								<li class="tsd-kind-property tsd-parent-kind-interface"><a href="mkplayerconfiguration.html#debug" class="tsd-kind-icon">debug</a></li>
-								<li class="tsd-kind-property tsd-parent-kind-interface"><a href="mkplayerconfiguration.html#key" class="tsd-kind-icon">key</a></li>
-								<li class="tsd-kind-property tsd-parent-kind-interface"><a href="mkplayerconfiguration.html#muted" class="tsd-kind-icon">muted</a></li>
-								<li class="tsd-kind-property tsd-parent-kind-interface"><a href="mkplayerconfiguration.html#smallscreen" class="tsd-kind-icon">small<wbr>Screen</a></li>
-								<li class="tsd-kind-property tsd-parent-kind-interface"><a href="mkplayerconfiguration.html#targetlatency" class="tsd-kind-icon">target<wbr>Latency</a></li>
-								<li class="tsd-kind-property tsd-parent-kind-interface"><a href="mkplayerconfiguration.html#ui" class="tsd-kind-icon">ui</a></li>
-							</ul>
-						</section>
-					</div>
-				</section>
-			</section>
-			<section class="tsd-panel-group tsd-member-group ">
-				<h2>Properties</h2>
-				<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface">
-					<a name="autoplay" class="tsd-anchor"></a>
-					<h3>autoplay</h3>
-					<div class="tsd-signature tsd-kind-icon">autoplay<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">boolean</span></div>
-					<aside class="tsd-sources">
-						<ul>
-							<li>Defined in MKPlayerConfiguration.ts:13</li>
-						</ul>
-					</aside>
-					<div class="tsd-comment tsd-typography">
-						<div class="lead">
-							<p>Option to enable the player to start playback after successfully loading a source</p>
-						</div>
-					</div>
-				</section>
-				<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface">
-					<a name="debug" class="tsd-anchor"></a>
-					<h3>debug</h3>
-					<div class="tsd-signature tsd-kind-icon">debug<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">boolean</span></div>
-					<aside class="tsd-sources">
-						<ul>
-							<li>Defined in MKPlayerConfiguration.ts:8</li>
-						</ul>
-					</aside>
-					<div class="tsd-comment tsd-typography">
-						<div class="lead">
-							<p>Toggles debug output logging</p>
-						</div>
-					</div>
-				</section>
-				<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface">
-					<a name="key" class="tsd-anchor"></a>
-					<h3>key</h3>
-					<div class="tsd-signature tsd-kind-icon">key<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string</span></div>
-					<aside class="tsd-sources">
-						<ul>
-							<li>Defined in MKPlayerConfiguration.ts:38</li>
-						</ul>
-					</aside>
-					<div class="tsd-comment tsd-typography">
-						<div class="lead">
-							<p>license key for the video player</p>
-						</div>
-					</div>
-				</section>
-				<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface">
-					<a name="muted" class="tsd-anchor"></a>
-					<h3>muted</h3>
-					<div class="tsd-signature tsd-kind-icon">muted<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">boolean</span></div>
-					<aside class="tsd-sources">
-						<ul>
-							<li>Defined in MKPlayerConfiguration.ts:18</li>
-						</ul>
-					</aside>
-					<div class="tsd-comment tsd-typography">
-						<div class="lead">
-							<p>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</p>
-						</div>
-					</div>
-				</section>
-				<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface">
-					<a name="smallscreen" class="tsd-anchor"></a>
-					<h3>small<wbr>Screen</h3>
-					<div class="tsd-signature tsd-kind-icon">small<wbr>Screen<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">boolean</span></div>
-					<aside class="tsd-sources">
-						<ul>
-							<li>Defined in MKPlayerConfiguration.ts:23</li>
-						</ul>
-					</aside>
-					<div class="tsd-comment tsd-typography">
-						<div class="lead">
-							<p>Boolean indicating if the player should load the small screen ui</p>
-						</div>
-					</div>
-				</section>
-				<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface">
-					<a name="targetlatency" class="tsd-anchor"></a>
-					<h3>target<wbr>Latency</h3>
-					<div class="tsd-signature tsd-kind-icon">target<wbr>Latency<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span></div>
-					<aside class="tsd-sources">
-						<ul>
-							<li>Defined in MKPlayerConfiguration.ts:33</li>
-						</ul>
-					</aside>
-					<div class="tsd-comment tsd-typography">
-						<div class="lead">
-							<p>number of seconds the player attempts to stay behind the live point</p>
-						</div>
-					</div>
-				</section>
-				<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface">
-					<a name="ui" class="tsd-anchor"></a>
-					<h3>ui</h3>
-					<div class="tsd-signature tsd-kind-icon">ui<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">boolean</span></div>
-					<aside class="tsd-sources">
-						<ul>
-							<li>Defined in MKPlayerConfiguration.ts:28</li>
-						</ul>
-					</aside>
-					<div class="tsd-comment tsd-typography">
-						<div class="lead">
-							<p>Boolean to enable / disable ui</p>
-						</div>
-					</div>
-				</section>
-			</section>
-		</div>
-		<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
-			<nav class="tsd-navigation primary">
-				<ul>
-					<li class="globals  ">
-						<a href="../globals.html"><em>Globals</em></a>
-					</li>
-				</ul>
-			</nav>
-			<nav class="tsd-navigation secondary menu-sticky">
-				<ul class="before-current">
-					<li class=" tsd-kind-enum">
-						<a href="../enums/mkevent.html" class="tsd-kind-icon">MKEvent</a>
-					</li>
-					<li class=" tsd-kind-class">
-						<a href="../classes/mkplayer.html" class="tsd-kind-icon">MKPlayer</a>
-					</li>
-					<li class=" tsd-kind-interface">
-						<a href="bufferlevel.html" class="tsd-kind-icon">Buffer<wbr>Level</a>
-					</li>
-				</ul>
-				<ul class="current">
-					<li class="current tsd-kind-interface">
-						<a href="mkplayerconfiguration.html" class="tsd-kind-icon">MKPlayer<wbr>Configuration</a>
-						<ul>
-							<li class=" tsd-kind-property tsd-parent-kind-interface">
-								<a href="mkplayerconfiguration.html#autoplay" class="tsd-kind-icon">autoplay</a>
-							</li>
-							<li class=" tsd-kind-property tsd-parent-kind-interface">
-								<a href="mkplayerconfiguration.html#debug" class="tsd-kind-icon">debug</a>
-							</li>
-							<li class=" tsd-kind-property tsd-parent-kind-interface">
-								<a href="mkplayerconfiguration.html#key" class="tsd-kind-icon">key</a>
-							</li>
-							<li class=" tsd-kind-property tsd-parent-kind-interface">
-								<a href="mkplayerconfiguration.html#muted" class="tsd-kind-icon">muted</a>
-							</li>
-							<li class=" tsd-kind-property tsd-parent-kind-interface">
-								<a href="mkplayerconfiguration.html#smallscreen" class="tsd-kind-icon">small<wbr>Screen</a>
-							</li>
-							<li class=" tsd-kind-property tsd-parent-kind-interface">
-								<a href="mkplayerconfiguration.html#targetlatency" class="tsd-kind-icon">target<wbr>Latency</a>
-							</li>
-							<li class=" tsd-kind-property tsd-parent-kind-interface">
-								<a href="mkplayerconfiguration.html#ui" class="tsd-kind-icon">ui</a>
-							</li>
-						</ul>
-					</li>
-				</ul>
-				<ul class="after-current">
-					<li class=" tsd-kind-interface">
-						<a href="mkplayereventcallback.html" class="tsd-kind-icon">MKPlayer<wbr>Event<wbr>Callback</a>
-					</li>
-					<li class=" tsd-kind-interface">
-						<a href="subtitletrack.html" class="tsd-kind-icon">Subtitle<wbr>Track</a>
-					</li>
-				</ul>
-			</nav>
-		</div>
-	</div>
-</div>
-<footer class="with-border-bottom">
-	<div class="container">
-		<h2>Legend</h2>
-		<div class="tsd-legend-group">
-			<ul class="tsd-legend">
-				<li class="tsd-kind-constructor tsd-parent-kind-class"><span class="tsd-kind-icon">Constructor</span></li>
-				<li class="tsd-kind-method tsd-parent-kind-class"><span class="tsd-kind-icon">Method</span></li>
-			</ul>
-			<ul class="tsd-legend">
-				<li class="tsd-kind-property tsd-parent-kind-interface"><span class="tsd-kind-icon">Property</span></li>
-			</ul>
-		</div>
-	</div>
-</footer>
-<div class="container tsd-generator">
-	<p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p>
-</div>
-<div class="overlay"></div>
-<script src="../assets/js/main.js"></script>
-</body>
-</html>