feat(FEC-8452): playlist (#155)

add playlist api: 
* `loadPlaylist` - to load playlist from the backend
* `loadPlaylistByEntryList` - to load playlist by entry id's
* `setPlaylist`
* `getter playlist` - for the playlist api (`playNext`, `playPrev` etc.)

new classes: `PlaylistManager`, `Playlist` and `PlaylistItem`

docs/playing-your-video.md

@@ -77,16 +77,16 @@ var mediaInfo = {
 
 **Parameters**
 
-| Name          | Type            | Required | Description                            | Possible Values                                        | Default Value |
-| ------------- | --------------- | -------- | -------------------------------------- | ------------------------------------------------------ | ------------- |
-| `entryId`     | `string`        | V        | The entry ID of the media              |
-| `mediaType`   | `string`        |          | The type of the specific media         | `"media"`, `"epg"`, `"recording"`                      | `"media"`     |
-| `assetReferenceType`   | `string`        |          | The asset type of the specific media         | `"media"`, `"epg_internal"`, `"epg_external"`                      | `"media"`     |
-| `contextType` | `string`        |          | The playback context type              | `"PLAYBACK"`, `"CATCHUP"`, `"START_OVER"`, `"TRAILER"` | `"PLAYBACK"`  |
-| `ks`          | `string`        |          | The KS (Kaltura Session) secret        |
-| `protocol`    | `string`        |          | The protocol of the specific media     | `"https"`, `"http"`                                    |
-| `fileIds`     | `string`        |          | List of comma-separated media file IDs |
-| `formats`     | `Array<string>` |          | Device types as defined in the system. |
+| Name                 | Type            | Required | Description                            | Possible Values                                        | Default Value |
+| -------------------- | --------------- | -------- | -------------------------------------- | ------------------------------------------------------ | ------------- |
+| `entryId`            | `string`        | V        | The entry ID of the media              |
+| `mediaType`          | `string`        |          | The type of the specific media         | `"media"`, `"epg"`, `"recording"`                      | `"media"`     |
+| `assetReferenceType` | `string`        |          | The asset type of the specific media   | `"media"`, `"epg_internal"`, `"epg_external"`          | `"media"`     |
+| `contextType`        | `string`        |          | The playback context type              | `"PLAYBACK"`, `"CATCHUP"`, `"START_OVER"`, `"TRAILER"` | `"PLAYBACK"`  |
+| `ks`                 | `string`        |          | The KS (Kaltura Session) secret        |
+| `protocol`           | `string`        |          | The protocol of the specific media     | `"https"`, `"http"`                                    |
+| `fileIds`            | `string`        |          | List of comma-separated media file IDs |
+| `formats`            | `Array<string>` |          | Device types as defined in the system. |
 
 ## Examples
 

flow-typed/types/kaltura-player-options.js

@@ -8,6 +8,7 @@ declare type KPOptionsObject = {
   plugins?: PKPluginsConfigObject,
   session?: PKSessionConfigObject,
   provider: ProviderOptionsObject,
+  playlist?: KPPlaylistConfigObject,
   ui: UIOptionsObject,
   cast?: { [key: string]: any }
 };

flow-typed/types/playlist-config.js

@@ -0,0 +1,10 @@
+// @flow
+import {PlaylistItem} from '../../src/common/playlist/playlist-item';
+
+declare type KPPlaylistConfigObject = {
+  id: string,
+  metadata: KPPlaylistMetadata,
+  options: KPPlaylistOptions,
+  countdown: KPPlaylistCountdownOptions,
+  items: Array<PlaylistItem>
+};

flow-typed/types/playlist-countdown-options.js

@@ -0,0 +1,6 @@
+// @flow
+declare type KPPlaylistCountdownOptions = {
+  timeToShow?: number,
+  duration: number,
+  showing: boolean
+};

flow-typed/types/playlist-item-config.js

@@ -0,0 +1,4 @@
+// @flow
+declare type KPPlaylistItemConfigObject = {
+  countdown?: KPPlaylistCountdownOptions;
+};

flow-typed/types/playlist-metadata.js

@@ -0,0 +1,5 @@
+// @flow
+declare type KPPlaylistMetadata = {
+  name: string,
+  description: string
+};

flow-typed/types/playlist-options.js

@@ -0,0 +1,4 @@
+// @flow
+declare type KPPlaylistOptions = {
+  autoContinue: boolean
+};

package.json

@@ -96,13 +96,13 @@
     "@playkit-js/playkit-js-hls": "^1.9.0",
     "@playkit-js/playkit-js-kava": "^0.2.7",
     "@playkit-js/playkit-js-ott-analytics": "^0.2.0",
-    "@playkit-js/playkit-js-ui": "^0.28.1",
+    "@playkit-js/playkit-js-ui": "canary",
     "babel-polyfill": "^6.23.0",
     "hls.js": "^0.10.1",
     "js-logger": "^1.3.0",
     "playkit-js-dash": "https://github.com/kaltura/playkit-js-dash.git#v1.6.4",
     "playkit-js-kanalytics": "https://github.com/kaltura/playkit-js-kanalytics.git#v0.9.1",
-    "playkit-js-providers": "https://github.com/kaltura/playkit-js-providers.git#v2.7.3",
+    "playkit-js-providers": "https://github.com/kaltura/playkit-js-providers.git#v2.8.0",
     "proxy-polyfill": "^0.3.0",
     "shaka-player": "https://github.com/kaltura/shaka-player.git#v2.3.3-k-4"
   },

samples/ovp/playlist-by-config.html

@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
+  <title>Title</title>
+  <link rel="stylesheet" type="text/css" href="./style.css"/>
+  <script src="./kaltura-ovp-player.js" type="text/javascript"></script>
+</head>
+<body>
+<button onclick="kalturaPlayer.playlist.playNext()">Play Next</button>
+<button onclick="kalturaPlayer.playlist.playPrev()">Play Prev</button>
+<div id="player-placeholder"></div>
+<script>
+  var config = {
+    targetId: 'player-placeholder',
+    provider: {
+      partnerId: 1091,
+      env: {
+        cdnUrl: "http://qa-apache-php7.dev.kaltura.com/",
+        serviceUrl: "http://qa-apache-php7.dev.kaltura.com/api_v3"
+      }
+    },
+    playlist: {
+      id: '1234',
+      metadata: {
+        name: 'my playlist name',
+        description: 'my playlist desc'
+      },
+      items: [{
+          sources: {
+            hls: [
+              {
+                id: "id1",
+                mimetype: "application/x-mpegURL",
+                url: "https://sportstv-live.akamaized.net/hlsl/1/Cars_TV/Cars_TV.m3u8"
+              }
+            ]
+          }
+        },
+        {
+          sources: {
+            hls: [
+              {
+                id: "id2",
+                mimetype: "application/x-mpegURL",
+                url: "http://qa-apache-php7.dev.kaltura.com/p/1091/sp/109100/playManifest/entryId/0_wifqaipd/protocol/http/format/applehttp/flavorIds/0_h65mfj7f,0_3flmvnwc,0_m131krws,0_5407xm9j/a.m3u8"
+              }
+            ]
+          }
+        },
+        {
+          sources: {
+            hls: [
+              {
+                id: "id3",
+                mimetype: "application/x-mpegURL",
+                url: "https://demo.deltatre.it/cc-test/QualityLevels(1400000)/Manifest(video,format=m3u8-aapl).m3u8"
+              }
+            ]
+          }
+        }],
+      countdown: {
+        duration: 10,
+        showing: true
+      }
+    }
+  };
+
+  try {
+    var kalturaPlayer = KalturaPlayer.setup(config);
+  } catch (e) {
+    console.error(e.message)
+  }
+</script>
+</body>
+</html>

samples/ovp/playlist-by-entry-list.html

@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
+  <title>Title</title>
+  <link rel="stylesheet" type="text/css" href="./style.css"/>
+  <script src="./kaltura-ovp-player.js" type="text/javascript"></script>
+</head>
+<body>
+<button onclick="kalturaPlayer.playlist.playNext()">Play Next</button>
+<button onclick="kalturaPlayer.playlist.playPrev()">Play Prev</button>
+<div id="player-placeholder"></div>
+<script>
+  var config = {
+    targetId: 'player-placeholder',
+    provider: {
+      partnerId: 1091,
+      env: {
+        cdnUrl: "http://qa-apache-php7.dev.kaltura.com/",
+        serviceUrl: "http://qa-apache-php7.dev.kaltura.com/api_v3"
+      }
+    }
+  };
+
+  try {
+    var kalturaPlayer = KalturaPlayer.setup(config);
+    kalturaPlayer.loadPlaylistByEntryList({entries: ['0_nwkp7jtx', '0_wifqaipd', '0_nwkp7jtx'], options: {}});
+  } catch (e) {
+    console.error(e.message)
+  }
+</script>
+</body>
+</html>

samples/ovp/playlist-by-id.html

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
+  <title>Title</title>
+  <link rel="stylesheet" type="text/css" href="./style.css"/>
+  <script src="./kaltura-ovp-player.js" type="text/javascript"></script>
+</head>
+<body>
+<button onclick="kalturaPlayer.playlist.playNext()">Play Next</button>
+<button onclick="kalturaPlayer.playlist.playPrev()">Play Prev</button>
+<div id="player-placeholder"></div>
+<script>
+  var config = {
+    targetId: 'player-placeholder',
+    provider: {
+      partnerId: 1091,
+      env: {
+        cdnUrl: "http://qa-apache-php7.dev.kaltura.com/",
+        serviceUrl: "http://qa-apache-php7.dev.kaltura.com/api_v3"
+      }
+    },
+    playback: {autoplay: true}
+  };
+
+  try {
+    var kalturaPlayer = KalturaPlayer.setup(config);
+    kalturaPlayer.loadPlaylist({playlistId: '0_jr7vpj0w'}, {options: {autoContinue: false}});
+  } catch (e) {
+    console.error(e.message)
+  }
+</script>
+</body>
+</html>

src/common/playlist/playlist-event-type.js

@@ -0,0 +1,10 @@
+// @flow
+const namespace = 'kaltura-player';
+
+const PlaylistEventType: {[event: string]: string} = {
+  PLAYLIST_LOADED: `${namespace}-playlistloaded`,
+  PLAYLIST_ITEM_CHANGED: `${namespace}-playlistitemchanged`,
+  PLAYLIST_ENDED: `${namespace}-playlistended`
+};
+
+export {PlaylistEventType};

src/common/playlist/playlist-item.js

@@ -0,0 +1,29 @@
+// @flow
+class PlaylistItem {
+  _sources: ?ProviderMediaConfigSourcesObject;
+  _config: ?KPPlaylistItemConfigObject;
+
+  constructor(sources: ?ProviderMediaConfigSourcesObject, config: ?KPPlaylistItemConfigObject) {
+    this._sources = sources;
+    this._config = config;
+  }
+
+  get sources(): ?ProviderMediaConfigSourcesObject {
+    return this._sources;
+  }
+
+  get config(): ?KPPlaylistItemConfigObject {
+    return this._config;
+  }
+
+  isPlayable(): boolean {
+    return !!(
+      this._sources &&
+      ((this._sources.hls && this._sources.hls.length) ||
+        (this._sources.dash && this._sources.dash.length) ||
+        (this._sources.progressive && this._sources.progressive.length))
+    );
+  }
+}
+
+export {PlaylistItem};