@playkit-js/rapt 0.4.10-canary.0-878cdb7

package/package.json

@@ -0,0 +1,75 @@
+{
+  "name": "@playkit-js/rapt",
+  "version": "0.4.10-canary.0-878cdb7",
+  "description": "Kaltura Interactive player based on Rapt engine",
+  "main": "index.js",
+  "license": "AGPL-3.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/kaltura/kaltura-interactive-player.git"
+  },
+  "keywords": [
+    "kaltura",
+    "interactive-video"
+  ],
+  "author": {
+    "name": "Kaltura Community",
+    "email": "community@kaltura.com"
+  },
+  "contributors": [
+    {
+      "name": "Jonathan Golad",
+      "email": "jonathan.gold@kaltura.com"
+    },
+    {
+      "name": "Lian Binyamin",
+      "email": "lian.binyamin@kaltura.com"
+    },
+    {
+      "name": "Sivan Agranov",
+      "email": "sivan.agranov@kaltura.com"
+    }
+  ],
+  "scripts": {
+    "tag": "scripts/tag.sh",
+    "start": "webpack --watch & webpack-dev-server --dev",
+    "serve-external": "webpack --watch & webpack-dev-server --host 0.0.0.0 --dev",
+    "clean": "rm -rf ./dist",
+    "tgz": "node scripts/dist-tgz.js",
+    "prebuild": "npm run clean",
+    "prebuild:dev": "npm run clean",
+    "prestart": "npm run clean",
+    "pushTaggedRelease": "git push --follow-tags --no-verify origin master",
+    "release": "standard-version",
+    "build": "node scripts/dist-tgz.js && webpack --mode production",
+    "build:dev": "webpack"
+  },
+  "dependencies": {
+    "kaltura-typescript-client": "file:libs/kaltura-typescript-client-7.0.1-v20200720-164020.tgz",
+    "node-sass": "^4.14.1",
+    "tslib": "^2.5.0"
+  },
+  "devDependencies": {
+    "@types/node": "^14.11.2",
+    "@types/core-js": "^2.5.0",
+    "archiver": "^3.0.0",
+    "core-js": "^2.5.7",
+    "css-loader": "^1.0.0",
+    "node-fetch": "^2.2.0",
+    "sass-loader": "^7.1.0",
+    "script-loader": "^0.7.2",
+    "style-loader": "^0.23.1",
+    "ts-loader": "^4.4.2",
+    "typescript": "^3.0.1",
+    "uglifyjs-webpack-plugin": "^2.0.1",
+    "standard-version": "^6.0.1",
+    "webpack": "^4.41.6",
+    "webpack-cli": "^3.1.0",
+    "webpack-concat-plugin": "^3.0.0",
+    "webpack-dev-server": "^3.10.3",
+    "webpack-livereload-plugin": "^2.1.1"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/scripts/dist-tgz.js

@@ -0,0 +1,25 @@
+var fs = require('fs');
+var archiver = require('archiver');
+const { version: version } = require("../package.json");
+var output = fs.createWriteStream('./dist/'+version+'.tar.gz');
+var archive = archiver('tar', {
+  gzip: true,
+  zlib: { level: 9 } // Sets the compression level.
+});
+
+archive.on('error', function(err) {
+  throw err;
+});
+
+// pipe archive data to the output file
+archive.pipe(output);
+
+// append files
+archive.file('./dist/path-kaltura-player.js', {name: 'path-kaltura-player.js'});
+archive.file('./dist/path-kaltura-player.js.map', {name: 'path-kaltura-player.js.map'});
+
+// Wait for streams to complete
+archive.finalize();
+
+console.log("Done tgz");
+

package/scripts/setversion.js

@@ -0,0 +1,22 @@
+const fs = require("fs");
+const versionFile = "./version.ts";
+const cyan = "\x1b[36m%s\x1b[0m";
+const { version: version } = require("../package.json");
+
+console.log(
+  cyan,
+  "setting the version from package.json to version.ts " + version
+);
+
+fs.readFile(versionFile, "utf8", function(err, data) {
+  if (err) {
+    return console.log(err);
+  }
+
+  const splittedFile = data.split('"');
+  const newFileContent = splittedFile[0] + '"' + version + '";';
+
+  fs.writeFile(versionFile, newFileContent, "utf8", function(err) {
+    if (err) return console.log(err);
+  });
+});

package/scripts/tag.sh

@@ -0,0 +1,6 @@
+read -p 'enter tag (e.g v0.1.18): ' version;
+echo Trying to push tag $version 
+git tag -a $version -m \"$version\"
+git push origin $version
+
+

package/src/KalturaInteractiveVideo.ts

@@ -0,0 +1,311 @@
+import { PlayersManager, RaptNode } from "./PlayersManager";
+import { KipClient } from "./KipClient";
+import { createElement } from "./helpers/CreateElement";
+import { Dispatcher, KivEvent } from "./helpers/Dispatcher";
+import { PlayersDomManager } from "./PlayersDomManager";
+import { enable as enableLog, log } from "./helpers/logger";
+import { VERSION } from "../version";
+import convertApiResponce from "./helpers/convertApiResponce";
+
+const API_EVENTS = [
+  "browser:hidden",
+  "browser:open",
+  "cue:forward",
+  "cue:reverse",
+  "hotspot:click",
+  "node:enter",
+  "node:ended",
+  "node:exit",
+  "project:load",
+  "project:ready",
+  "project:start",
+  "project:ended",
+  "project:unload",
+  "player:play",
+  "player:pause",
+  "player:progress",
+  "player:ratechange",
+  "player:timeupdate",
+  "buffer:prebuffer",
+  "buffer:bufferend",
+  "buffer:bufferstart",
+  "buffer:allbuffered",
+  "player:volumechange"
+];
+
+export enum RaptProjectStatus {
+  preInitialized = "preInitialized", // before loadMedia
+  loading = "loading", // after loadMedia - before data load
+  ready = "ready", // ideal. Project is running
+  error = "error"
+}
+
+class KalturaInteractiveVideo extends Dispatcher {
+  private playerManager: PlayersManager;
+  private mainDiv: HTMLElement; // TODO 6 should move all executions to use the playerDomManager and remove this property
+  private playlistId: string = "";
+  private client: KipClient; // Backend Client
+  private _data: any; // container to data API
+  private legacyCallback: (event: any) => void; // legacy API generic callback func
+  private playerDomManager: PlayersDomManager;
+  private kalturaInteractiveStatus: RaptProjectStatus =
+    RaptProjectStatus.preInitialized;
+
+  constructor(private config: any, private playerLibrary: any) {
+    super();
+
+    if (config && config.rapt && config.rapt.debug) {
+      enableLog();
+      log(
+        "log",
+        "KalturaInteractiveVideo",
+        "log enabled by config version " + VERSION
+      );
+    }
+  }
+
+  private isInitialized = false;
+
+  // enable log-open externally
+  public enableLog() {
+    enableLog();
+  }
+
+  // expose version
+  public get version() {
+    return VERSION;
+  }
+
+  loadMedia(obj: any): void {
+    this.kalturaInteractiveStatus = RaptProjectStatus.loading;
+    if (!obj || (!obj.entryId && !obj.playlistId)) {
+      this.printMessage("Error", "missing rapt project id");
+      this.kalturaInteractiveStatus = RaptProjectStatus.error;
+      return;
+    }
+
+    if (this.isInitialized) {
+      throw new Error(
+        'currently cannot load media twice to the same instance. Please use "setup" method again'
+      );
+    }
+    this.dispatchApi({ type: "project:load", payload: obj.playlistId });
+    this.isInitialized = true;
+
+    this.playerDomManager = new PlayersDomManager(this.config.targetId);
+    this.mainDiv = this.playerDomManager.getContainer();
+
+    let ks: string = this.config.provider.ks ? this.config.provider.ks : "";
+    let envUrl = "https://cdnapisec.kaltura.com";
+    if (
+      this.config.provider &&
+      this.config.provider.env &&
+      this.config.provider.env.serviceUrl
+    ) {
+      // player config serviceUrl is expected with "/api_v3" while the app client doesn't
+      envUrl = this.config.provider.env.serviceUrl.split("/api_v3")[0];
+    }
+
+    if(this.config.rapt && this.config.rapt.capabilityCheck){
+      console.warn("Internal Testing flag of hybrid Rapt entry is enabled in Rapt player");
+    }
+
+    this.client = new KipClient({
+      ks: ks,
+      partnerId: this.config.provider.partnerId,
+      serviceUrl: envUrl,
+      capabilityCheck: this.config.rapt.capabilityCheck,
+      widgetId: this.config.provider.widgetId
+    });
+    this.playlistId = obj.playlistId || obj.entryId;
+    this.client
+      .loadRaptData(this.playlistId)
+      .then((graphData) => {
+        const { hotspots }: any = graphData;
+        if (!hotspots) {
+          graphData = convertApiResponce(graphData);
+        }
+        this.dataLoaded(graphData);
+      })
+      .catch((err: string) => {
+        this.kalturaInteractiveStatus = RaptProjectStatus.error;
+        this.printMessage("Error", err);
+        this.dispatchApi({ type: "Error" });
+      });
+  }
+
+  /**
+   * Once the graph-data is loaded - load the 1st media and place the rapt-engine layer
+   * @param raptGraphData
+   */
+  dataLoaded(raptGraphData: object): void {
+    const config = Object.assign({}, this.config);
+    config.provider.ks = this.client.ks,
+    raptGraphData["account"] = { id: this.config.provider.partnerId };
+    this._data = raptGraphData;
+    this.playerManager = new PlayersManager(
+      config,
+      this.playerLibrary,
+      this.playlistId,
+      raptGraphData,
+      this.playerDomManager
+    );
+
+    // if we got here - playerManager constructor code went well - update status
+    this.kalturaInteractiveStatus = RaptProjectStatus.ready;
+
+    for (let eventName of API_EVENTS) {
+      this.playerManager.addListener(eventName, (event: KivEvent) => {
+        this.dispatchApi(event);
+      });
+    }
+  }
+  /**
+   * Expose API to the wrapping page/app
+   * @param event
+   * @param data
+   */
+  dispatchApi(event: KivEvent) {
+    //this is a legacy API
+    if (this.legacyCallback) {
+      let legacyEvent: any = { type: event.type };
+      // send the payload only if it exist
+      if (event.payload && Object.getOwnPropertyNames(event.payload).length) {
+        legacyEvent.payload = event.payload;
+      }
+      this.legacyCallback(legacyEvent);
+    }
+
+    // expose API, add the current node and
+    this.dispatch(event);
+  }
+
+  /**
+   * Print a message on the main div, usually used to show error messages to the end-user (E.G. missing rapt data)
+   * @param title
+   * @param text
+   */
+  printMessage(title: string, text: string = "") {
+    const messageDiv = createElement("div", null, "kiv-message__message");
+    const titleDiv = createElement("div", null, "kiv-message__title");
+    const bodeDiv = createElement("div", null, "kiv-message__body");
+    titleDiv.innerHTML = title;
+    bodeDiv.innerHTML = text;
+    messageDiv.appendChild(titleDiv);
+    messageDiv.appendChild(bodeDiv);
+    this.mainDiv.appendChild(messageDiv);
+  }
+  /**
+   * Legacy API support
+   */
+  public pause() {
+    this.playerManager.pause();
+  }
+
+  public play() {
+    this.playerManager.play();
+  }
+
+  public seek(n: number) {
+    this.playerManager.seek(n);
+  }
+
+  public replay() {
+    this.playerManager.execute({
+      type: "project:replay"
+    });
+  }
+  public reset() {
+    this.playerManager.execute({
+      type: "project:reset"
+    });
+  }
+
+  public get data(): any {
+    return this._data;
+  }
+
+  public get currentTime(): number {
+    return this.playerManager.getActiveKalturaPlayer().currentTime;
+  }
+
+  public get duration(): number {
+    return this.playerManager.getActiveKalturaPlayer().duration;
+  }
+
+  public get currentNode(): RaptNode {
+    return this.playerManager.getActiveKalturaPlayer().node;
+  }
+
+  public get volume(): number {
+    return this.playerManager.getActiveKalturaPlayer().player.player.volume;
+  }
+
+  public set volume(n: number) {
+    this.playerManager.getActiveKalturaPlayer().player.player.volume = n;
+  }
+
+  public get muted(): number {
+    return this.playerManager.getActiveKalturaPlayer().player.player.muted;
+  }
+
+  public get playbackRate(): number {
+    return this.playerManager.getActiveKalturaPlayer().playbackRate;
+  }
+
+  public jump(locator: any, autoplay: boolean) {
+    this.playerManager.execute({
+      type: "project:jump",
+      payload: { destination: locator }
+    });
+  }
+
+  // Legacy API - kBind support
+  public kBind(eventName: string, callback: (event: any) => void) {
+    if (eventName === "raptMedia_event") {
+      this.legacyCallback = callback;
+    } else {
+      this.addListener(eventName, callback);
+    }
+  }
+  // legacy API - sendNotification with rapt command data
+  public sendNotification(doCommand: string, commandObject: any) {
+    this.playerManager.execute(commandObject);
+  }
+  // direct execute
+  public execute(commandObject: any) {
+    this.playerManager.execute(commandObject);
+  }
+
+  public evaluate(key: string): any {
+    // prepare the info object with legacy data structure
+    if (key === "{raptMedia.info}") {
+      let dataCopy = Object.assign({}, this._data);
+      dataCopy.player = {
+        currentNode: this.playerManager.getActiveNode(),
+        currentTime: this.playerManager.getActiveKalturaPlayer().currentTime,
+        currentVideo: this.playerManager.getActiveNode().entryId
+      };
+      dataCopy.project = {
+        projectId: this.playerManager.raptProjectId
+      };
+      dataCopy.videos = this._data.nodes.map((item: RaptNode) => {
+        let o: any = {};
+        o.entryId = item.entryId;
+        o.id = item.id;
+        o.name = item.name;
+        if (o.customData) {
+          o.customData = item.customData;
+        }
+        return o;
+      });
+      return dataCopy;
+    } else if (key === "{raptMedia.status}") {
+      return this.kalturaInteractiveStatus;
+    } else if (this.data[key]) {
+      return this.data[key];
+    }
+  }
+}
+
+export default KalturaInteractiveVideo;

package/src/Kip.scss

@@ -0,0 +1,270 @@
+.kiv-message__message {
+  border-radius: 4px;
+  background: #eeeeee;
+}
+.kiv-player.current-playing {
+  z-index: 6;
+}
+
+.kiv-initiated {
+  .playkit-pre-playback-play-overlay {
+    display: none;
+  }
+}
+
+.kiv-player {
+  position: absolute;
+  &:not(.current-playing) {
+    display: none;
+  }
+}
+
+.kiv-hidden {
+  display: none;
+}
+
+.kiv-rapt-engine {
+  z-index: 7;
+  position: absolute;
+  html,
+  body,
+  div,
+  span,
+  applet,
+  object,
+  iframe,
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  p,
+  blockquote,
+  pre,
+  a,
+  abbr,
+  acronym,
+  address,
+  big,
+  cite,
+  code,
+  del,
+  dfn,
+  em,
+  img,
+  ins,
+  kbd,
+  q,
+  s,
+  samp,
+  small,
+  strike,
+  strong,
+  sub,
+  sup,
+  tt,
+  var,
+  b,
+  u,
+  i,
+  center,
+  dl,
+  dt,
+  dd,
+  ol,
+  ul,
+  li,
+  fieldset,
+  form,
+  label,
+  legend,
+  table,
+  caption,
+  tbody,
+  tfoot,
+  thead,
+  tr,
+  th,
+  td,
+  article,
+  aside,
+  canvas,
+  details,
+  embed,
+  figure,
+  figcaption,
+  footer,
+  header,
+  hgroup,
+  menu,
+  nav,
+  output,
+  ruby,
+  section,
+  summary,
+  time,
+  mark,
+  audio,
+  video {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font-size: 100%;
+    font: inherit;
+    vertical-align: baseline;
+  }
+  article,
+  aside,
+  details,
+  figcaption,
+  figure,
+  footer,
+  header,
+  hgroup,
+  menu,
+  nav,
+  section {
+    display: block;
+  }
+  body {
+    line-height: 1;
+  }
+  ol,
+  ul {
+    list-style: none;
+  }
+  blockquote,
+  q {
+    quotes: none;
+  }
+  blockquote:before,
+  blockquote:after,
+  q:before,
+  q:after {
+    content: "";
+    content: none;
+  }
+  table {
+    border-collapse: collapse;
+    border-spacing: 0;
+  }
+}
+
+.kiv-container {
+  position: relative;
+
+  .playkit-player.playkit-size-xs .playkit-left-controls .playkit-control-button-container
+  {
+    display: inline-block;
+  }
+
+
+  &.rapt-switching{
+    .playkit-black-cover{
+      background-color: transparent;
+    }
+    .playkit-spinner-container,
+    .playkit-poster{
+      display: none;
+    }
+
+  }
+
+  .playkit-player-gui {
+    font-family: "courier" !important;
+  }
+
+  .playkit-time-display {
+    float: left;
+    position: relative;
+    left: 0;
+    font-family: sans-serif;
+    padding: 0;
+    margin-right: 6px;
+  }
+
+  .playkit-seek-bar {
+    padding: 6px 0;
+    cursor: pointer;
+    position: relative;
+    top: 13px;
+    width: calc(100% - 126px);
+    left: 45px;
+  }
+  .hide-fullscreen .playkit-seek-bar {
+    width: calc(100% - 96px);
+  }
+  /* Scrubber width - with audio-tracks/captions */
+  .has-extra-tracks .playkit-player .playkit-seek-bar {
+    width: calc(100% - 160px) !important;
+  }
+  .has-extra-tracks .playkit-player .hide-fullscreen .playkit-seek-bar {
+    width: calc(100% - 130px) !important;
+  }
+
+  .has-timers {
+
+    /* Scrubber width (when timers are on) - without audio-tracks/captions */
+    .playkit-seek-bar {
+      width: calc(100% - 210px) !important;
+    }
+    /* Scrubber width (when timers are on) - with audio-tracks/captions */
+    .has-extra-tracks .playkit-player .playkit-seek-bar {
+      width: calc(100% - 246px) !important;
+    }
+    .has-extra-tracks .playkit-player .hide-fullscreen .playkit-seek-bar{
+      width: calc(100% - 216px) !important;
+    }
+    .playkit-player .hide-fullscreen .playkit-seek-bar{
+      width: calc(100% - 186px) !important;
+    }
+  }
+
+
+  /* Fullscreen exists - reduce the scrubber width by 30px */
+  .playkit-seek-bar{
+    //padding-right: 30px;
+  }
+
+  /* lack of fullscreen button adds 30px (or in other words removes the default 30)  */
+  .hide-fullscreen .playkit-seek-bar{
+    padding-right: 0px;
+  }
+
+  .playkit-icon-rewind-10 {
+    display: none;
+  }
+
+  .playkit-pre-playback-play-button:hover {
+    background-color: rgba(0, 0, 0, 0.8);
+    box-shadow: 0 0 10px #ffff64;
+    text-shadow: 0 0 10px #ffff64;
+  }
+
+  .playkit-player {
+    .playkit-bottom-bar {
+      padding: 0 8px;
+      position: absolute;
+    }
+    .playkit-control-button,
+    .playkit-control-button i {
+      width: 20px;
+      height: 20px;
+    }
+
+    .playkit-time-display {
+      line-height: 22px;
+      font-size: 12px;
+    }
+    .playkit-volume-control-bar {
+      bottom: 24px;
+      left: -8px;
+    }
+  }
+}
+.kiv-container,
+.kiv-player {
+  width: 100%;
+  height: 100%;
+}