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

package/src/helpers/CreateElement.ts

@@ -0,0 +1,14 @@
+export function createElement(
+  type: string,
+  id?: string,
+  initialClasses?: string
+): HTMLElement {
+  const newElement = document.createElement(type);
+  if (id) {
+    newElement.setAttribute("id", id);
+  }
+  if (initialClasses) {
+    newElement.setAttribute("class", initialClasses);
+  }
+  return newElement;
+}

package/src/helpers/Dispatcher.ts

@@ -0,0 +1,52 @@
+/**
+ * Simple (Event)Dispatcher class
+ * Inspiered by https://medium.com/@LeoAref/simple-event-dispatcher-implementation-using-javascript-36d0eadf5a11
+ */
+
+export interface KivEvent {
+  type: string;
+  payload?: any;
+}
+export class Dispatcher {
+  events: any;
+
+  constructor() {
+    this.events = {};
+  }
+
+  addListener(type: string, callback: (data?: any) => any) {
+    // Create the event if not exists
+    if (this.events[type] === undefined) {
+      this.events[type] = {
+        listeners: []
+      };
+    }
+    this.events[type].listeners.push(callback);
+  }
+
+  removeListener(type: string, callback: (data?: any) => any) {
+    // Check if this event not exists
+    if (this.events[type] === undefined) {
+      return false;
+    }
+    this.events[type].listeners = this.events[type].listeners.filter(
+      (listener: string) => {
+        return listener.toString() !== callback.toString();
+      }
+    );
+  }
+
+  dispatch(event: KivEvent) {
+    // If event doesn't have a listener - don't do anything
+    if (this.events[event.type] === undefined) {
+      return false;
+    }
+    this.events[event.type].listeners.forEach((listener: any) => {
+      if (event.payload) {
+        listener({ type: event.type, payload: event.payload });
+      } else {
+        listener({ type: event.type });
+      }
+    });
+  }
+}

package/src/helpers/KipEvents.ts

@@ -0,0 +1,6 @@
+export const KipEvent = {
+  API_ERROR: "apiError",
+  MISSING_FIRST_NODE: "missingFirstNode",
+  FIRST_PLAY_ERROR: "firstPlayError",
+  RAPT_DATA_LOAD_ERROR: "raptDataLoadError"
+};

package/src/helpers/convertApiResponce.ts

@@ -0,0 +1,209 @@
+import { log } from "../helpers/logger";
+
+const get = (
+  obj: Record<string, any>,
+  path: string,
+  defaultValue: any
+): any => {
+  function stringToPath(path: string) {
+    const output = [];
+    path.split(".").forEach((item) => {
+      item.split(/\[([^}]+)\]/g).forEach((key) => {
+        if (key.length > 0) {
+          output.push(key);
+        }
+      });
+    });
+    return output;
+  }
+  const pathArray = stringToPath(path);
+  let current = obj;
+  for (let i = 0; i < pathArray.length; i++) {
+    if (!current[pathArray[i]]) return defaultValue;
+    current = current[pathArray[i]];
+  }
+  return current;
+};
+
+const addSettings = (newData) => {
+  return {
+    settings: {
+      startNodeId: get(newData, "pathData.startNodeId", ""),
+      stageWidth: 720,
+      stageHeight: 405,
+    },
+  };
+};
+
+const addVersion = () => {
+  return {
+    version: "1.0.0-rc.4",
+  };
+};
+
+const makeNodesAndHotspots = (newData) => {
+  const nodes = [];
+  const hotspots = [];
+  const cues = [];
+  get(newData, "nodes", []).forEach((node) => {
+    let onEnded = [
+      {
+        type: "project:stop",
+        payload: {},
+      },
+    ];
+
+    const prefetchNodeIds = [];
+    const duration = get(node, "pathData.msDuration", 0);
+    get(node, "interactions", []).forEach((interaction) => {
+      const behavior = get(interaction, "data.behavior", {});
+      if (interaction.type === "@@core/postPlay") {
+        if (behavior.type === "GoToNode") {
+          prefetchNodeIds.push(behavior.nodeId);
+          onEnded = [
+            {
+              type: "project:jump",
+              payload: {
+                destination: behavior.nodeId,
+                startFrom: behavior.startTime ? behavior.startTime / 1000 : 0,
+              },
+            },
+          ];
+        }
+        if (behavior.type === "Loop") {
+          onEnded = [
+            {
+              type: "project:jump",
+              payload: {
+                destination: node.id,
+              },
+            },
+          ];
+        }
+      } else if (interaction.type === "@@core/cue") {
+        cues.push({
+          at: interaction.startTime / 1000 / duration,
+          customData: get(interaction, "data.customData", ""),
+          id: interaction.id,
+          nodeId: node.id,
+        });
+      } else if (interaction.type === "@@core/hotspot") {
+        const data = get(interaction, "data", {});
+        const label = get(data, "text.label", "");
+        const hotspot: any = {
+          id: interaction.id,
+          name: label,
+          nodeId: node.id,
+          label,
+          showAt: interaction.startTime ? interaction.startTime / duration : 0,
+          hideAt: interaction.endTime ? interaction.endTime / duration : 0,
+          style: data.styles || {},
+          position: data.position ? convertPosition(data.position) : {},
+          customData: get(interaction, "pathData.customData", null),
+          onClick: [],
+        };
+        if (behavior.type === "Pause") {
+          hotspot.onClick = [
+            {
+              type: "player:pause",
+              payload: {},
+            },
+          ];
+        } else if (behavior.type === "GoToNode") {
+          prefetchNodeIds.push(behavior.nodeId);
+          hotspot.onClick = [
+            {
+              type: "project:jump",
+              payload: {
+                destination: behavior.nodeId,
+                startFrom: behavior.startTime ? behavior.startTime / 1000 : 0,
+              },
+            },
+          ];
+        } else if (behavior.type === "GoToUrl") {
+          hotspot.onClick = [
+            {
+              type: "player:pause",
+              payload: {},
+            },
+            {
+              type: "browser:open",
+              payload: {
+                href: behavior.url,
+              },
+            },
+          ];
+        } else if (behavior.type === "GoToTime") {
+          hotspot.clickSeek = behavior.time / 1000;
+        }
+        hotspots.push(hotspot);
+      }
+    });
+    nodes.push({
+      id: node.id,
+      xref: null,
+      name: node.name,
+      customData: get(node, "pathData.customData", null),
+      entryId: node.entryId,
+      onEnded,
+      prefetchNodeIds,
+      startFrom: node.startTime / 1000,
+    });
+  });
+  return [nodes, hotspots, cues];
+};
+
+const convertPosition = (position) => {
+  const newPosition = { ...position };
+  newPosition.width = 720 * position.width;
+  newPosition.height = 405 * position.height;
+  newPosition.top = 405 * position.top;
+  newPosition.left = 720 * position.left;
+  return newPosition;
+};
+
+const addFonts = (newData) => {
+  return {
+    fonts: get(newData, "pathData.fonts", []),
+  };
+};
+
+const addSkins = (newData) => {
+  const result = {};
+  get(newData, "pathData.skins", []).forEach((skin) => {
+    result[skin.id] = skin;
+  });
+  return {
+    __skins: result,
+  };
+};
+
+const addAcconunt = (newData) => {
+  return {
+    account: {
+      id: get(newData, "account.id", ""),
+    },
+  };
+};
+
+const convertApiResponce = (newData) => {
+  try {
+    log("log", "Converting Vegiterians ", "Original Data:", newData);
+    const [nodes, hotspots, cues] = makeNodesAndHotspots(newData);
+    const result = {
+      ...addVersion(),
+      ...addSettings(newData),
+      ...addFonts(newData),
+      ...addSkins(newData),
+      ...addAcconunt(newData),
+      nodes,
+      hotspots,
+      cues,
+    };
+    return result;
+  } catch (e) {
+    console.error("Failed to convert data", e, newData);
+  }
+};
+
+export default convertApiResponce;

package/src/helpers/detectIe.ts

@@ -0,0 +1,23 @@
+export function getInternetExplorerVersion()
+{
+    var rv = -1;
+    if (navigator.appName == 'Microsoft Internet Explorer')
+    {
+        var ua = navigator.userAgent;
+        var re = new RegExp("MSIE ([0-9]{1,}[\\.0-9]{0,})");
+        if (re.exec(ua) != null)
+            rv = parseFloat( RegExp.$1 );
+    }
+    else if (navigator.appName == 'Netscape')
+    {
+        var ua = navigator.userAgent;
+        var re  = new RegExp("Trident/.*rv:([0-9]{1,}[\\.0-9]{0,})");
+        if (re.exec(ua) != null)
+            rv = parseFloat( RegExp.$1 );
+    }
+    return rv;
+}
+
+export function isWindows7(){
+    return navigator.userAgent.indexOf("Windows NT 6.1") != -1;
+}

package/src/helpers/logger.ts

@@ -0,0 +1,9 @@
+let isEnabled = false;
+export function enable() {
+    isEnabled = true;
+}
+export function log(level: 'log' | 'warn' | 'error', context: string, message: string, ...optionalParams: any[]) {
+    if (isEnabled) {
+        console[level](`KIV [${level}] ${context ? `[${context}]` : ''} : ${message}`, ...optionalParams);
+    }
+}

package/src/ui/PlaybackPreset.ts

@@ -0,0 +1,152 @@
+export class PlaybackPreset {
+  preset: (props: any) => any;
+  presetWithPlayButton: (props: any) => any;
+  // TODO - when we have more time - switch to TSX
+  constructor(
+    h: any,
+    c: any,
+    fullscreenCallback: () => void,
+    private raptData: any,
+    private deviceModel: string | undefined
+  ) {
+    let customSeekbarContainer: any;
+    let customLeftContainer: any;
+    let customRightContainer: any;
+
+
+    let showFullscreenClass = "show-fullscreen";
+    if (this.deviceModel === "iPhone" || raptData.showFullscreen === false) {
+      showFullscreenClass = "hide-fullscreen";
+    }
+
+    // switch showScrubber
+    if (raptData.showScrubber) {
+      customSeekbarContainer = function(props: any) {
+        return h(c.SeekBarPlaybackContainer, {
+          showFramePreview: false,
+          showTimeBubble: false,
+          player: props.player,
+          playerContainer: props.playerContainer
+        });
+      };
+    } else {
+      customSeekbarContainer = function(props: any) {
+        return null;
+      };
+    }
+
+
+    customLeftContainer = function(props: any) {
+      return h(
+          "div",
+          { className: "playkit-left-controls"},
+          h(c.PlayPauseControl, { player: props.player }),
+          h(c.RewindControl, { player: props.player, step: 10 })
+      );
+    };
+    if (this.raptData.showTimers) {
+      customRightContainer = function(props: any) {
+        return h(
+          "div",
+          { className: "playkit-right-controls" },
+          h(c.TimeDisplayPlaybackContainer, { format: "current / total" }),
+          h(c.VolumeControl, { player: props.player }),
+          h(c.LanguageControl, { player: props.player }),
+          h(customFullScreenButton)
+        );
+      };
+    }else{
+      customRightContainer = function(props: any) {
+        return h(
+          "div",
+          { className: "playkit-right-controls" },
+          h(c.VolumeControl, { player: props.player }),
+          h(c.LanguageControl, { player: props.player }),
+          h(customFullScreenButton)
+        );
+      };
+    }
+
+    const customControllers = function(props: any) {
+      return h(
+        c.BottomBar,
+        null,
+        customSeekbarContainer(props),
+        customLeftContainer(props),
+        customRightContainer(props)
+      );
+    };
+
+    // define the app fullscreen button
+    let customFullScreenButton;
+
+    if (this.deviceModel === "iPhone" || this.raptData.showFullscreen === false) {
+      // do not render the fullscreen button - return null as the button 
+      customFullScreenButton = function() {
+        return null;
+      };
+    } else {
+      customFullScreenButton = function() {
+        return h(
+          "div",
+          {
+            className:
+              "playkit-control-button-container playkit-control-fullscreen"
+          },
+          h(
+            "button",
+            {
+              tabIndex: "0",
+              "aria-label": "controls.fullscreen",
+              className: "playkit-control-button",
+              onClick: () => {
+                fullscreenCallback();
+              }
+            },
+            h("icon", {
+              className: "playkit-icon playkit-icon-maximize",
+              style: "transform: rotate(90deg)"
+            }),
+            h("icon", {
+              className: "playkit-icon playkit-icon-minimize",
+              style: "transform: rotate(90deg)"
+            })
+          )
+        );
+      };
+    }
+    this.presetWithPlayButton = function(props: any) {
+      //if U change this change the other preset
+      return h(
+        "div", null ,
+        h(c.KeyboardControl, { player: props.player, config: props.config }),
+        h(c.Loading, { player: props.player }),
+        h(
+          "div",
+          { className: "playkit-player-gui " + showFullscreenClass, id: "player-gui" },
+          h(c.OverlayPortal, null),
+          h(c.UnmuteIndication, { player: props.player }),
+          h(c.OverlayAction, { player: props.player }),
+          customControllers(props)
+        ),
+        h(c.PrePlaybackPlayOverlay, { player: props.player })
+      );
+    };
+    this.preset = function(props: any) {
+      //if U change this change the other preset
+      return h(
+        "div", null,
+        h(c.KeyboardControl, { player: props.player, config: props.config }),
+        h(c.Loading, { player: props.player }),
+        h(
+          "div",
+          { className: "playkit-player-gui " + showFullscreenClass, id: "player-gui" },
+          h(c.OverlayPortal, null),
+          h(c.UnmuteIndication, { player: props.player }),
+          h(c.OverlayAction, { player: props.player }),
+          customControllers(props)
+        )
+      );
+    };
+  }
+}

package/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "module": "commonjs",
+    "downlevelIteration": true,
+    "target": "ES5",
+    "lib": ["es2015", "es2017", "dom"],
+    "sourceMap": true,
+    "outDir": "./dist/",
+    "noImplicitAny": false
+  },
+  "exclude": ["node_modules"],
+  "include": ["src/*"]
+}

package/webpack.config.js

@@ -0,0 +1,61 @@
+"use strict";
+var LiveReloadPlugin = require('webpack-livereload-plugin');
+
+const webpack = require("webpack");
+const PROD = process.env.NODE_ENV === "production";
+const packageData = require("./package.json");
+
+let plugins = [
+  new webpack.DefinePlugin({
+    __VERSION__: JSON.stringify(packageData.version),
+    __NAME__: JSON.stringify(packageData.name)
+  })
+];
+
+if (!PROD) {
+	plugins.push(new LiveReloadPlugin());
+}
+
+module.exports = {
+  mode: PROD ? "production" : "development",
+  devServer: {
+    port: 9000
+  },
+  entry: {
+    PathKalturaPlayer: ["./src/Kip.ts"]
+  },
+  output: {
+    path: __dirname + "/dist",
+    filename: `playkit-kaltura-interactive-player.js`,
+    libraryTarget: 'umd',
+    // `library` determines the name of the global variable
+    library: '[name]',
+      umdNamedDefine: true
+  },
+  devtool: "source-map",
+  plugins: plugins,
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        use: [
+          {
+            loader: "ts-loader"
+          }
+        ],
+        exclude: [/node_modules/]
+      },
+      {
+        test: /\.scss$/,
+        use: [
+          "style-loader", // creates style nodes from JS strings
+          "css-loader", // translates CSS into CommonJS
+          "sass-loader" // compiles Sass to CSS, using Node Sass by default
+        ]
+      }
+    ]
+  },
+  resolve: {
+    extensions: [".tsx", ".ts", ".js"]
+  }
+};