@kks-web/player-sdk 1.0.7-beta.1

package/README.md

@@ -0,0 +1,118 @@
+# Player SDK
+
+The BlendVision Player SDK allows you to create, interact with and control an
+embedded BlendVision Player.
+
+## Installation
+
+You can install the BlendVision Player SDK through npm:
+
+```bash
+npm install @web-kks/player-sdk
+```
+
+Alternatively, you can reference an up‐to‐date version on our CDN:
+
+```html
+<script src="https://unpkg.com/@web-kks/player-sdk"></script>
+```
+
+## Getting Started
+
+You can create the well-crafted BlendVision player for your event with this SDK.
+
+### Create with an element id
+
+Pass an element's `id` and a [config](#config-options) object to the `Player`
+constructor to create an embedded player inside that element. The config object should
+consist of a `token` which is the `accessToken` of the event powered by BlendVision Moment.
+
+```html
+<!-- the element where you would like to display the player -->
+<div id="my-player"></div>
+
+<script src="https://unpkg.com/@web-kks/player-sdk"></script>
+<script>
+    const config = {
+      token: "your-token", // the accessToken of the event from BlendVision Moment api
+    };
+    // Will create inside the my-player div:
+    // <iframe width="100%" height="100%" src="https://player.live.kkstream.io/?t=your-token&hl=en" title="Player" allow="autoplay; encrypted-media" allowfullscreen=""></iframe>
+    new BlendVision.Player("my-player", config);
+</script>
+```
+### Using with a module bundler
+If you’re using a module bundler like [webpack](https://webpack.js.org/) or [rollup](http://rollupjs.org/), the exported object will be the Player constructor (unlike the browser where it is attached to `window.BlendVision`):
+```js
+import Player from "@web-kks/player-sdk";
+
+new Player("my-player", {
+    token: "your-token", // the accessToken of the event from BlendVision Moment api
+});
+```
+
+### Using with React
+If you're building your projects with [React](https://github.com/facebook/react), you could follow the sample code as described below.
+Since we do not provide a React component version of our player for the time being, please instantiate our SDK in React life cycle as below:
+
+#### For React 16.8+ with hooks
+```jsx
+import React, { useEffect } from "react";
+import Player from "@web-kks/player-sdk";
+
+const App = () => {
+  useEffect(() => {
+    const options = {
+      token: "your-token"
+    }
+    new Player("my-player", options);
+  }, [])
+  return (
+    <div className="App">
+      <h1>BlendVision Player SDK</h1>
+      <div className="main">
+        <div id="my-player"/>
+      </div>
+    </div>
+  );
+};
+```
+
+#### For React Class components
+```jsx
+import React from 'react';
+import Player from "@web-kks/player-sdk";
+
+class App extends React.Component {
+  componentDidMount() {
+    const options = {
+      token: 'your-token'
+    }
+    new Player('my-player', options);
+  }
+  render() {
+    return (
+      <div className="App">
+        <h1>BlendVision Player SDK</h1>
+        <div className="main">
+          <div id="my-player"/>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default App;
+
+```
+
+## Config Options
+
+These config options are available to use as an object passed to the
+`Player` constructor.
+
+| option    | default                           | description                                                             |
+| --------- | --------------------------------- | ----------------------------------------------------------------------- |
+| token     |                                   | **Required.** The accessToken of the event from BlendVision Moment api. |
+| playerUrl | `https://player.live.kkstream.io` | The URL of the Player service.                                          |
+| locale    | en                                | The language of Player. `(en, zh, ja)`                                  |

package/index.d.ts

@@ -0,0 +1,41 @@
+interface PlayerProps {
+    token?: string;
+    playerUrl?: string;
+    locale?: string;
+    did?: string;
+    title?: string;
+    event?: any;
+    titleSpacing?: number;
+    disableFullscreen?: boolean;
+}
+declare class Player {
+    private readonly originalElement;
+    readonly targetOrigin: string;
+    element: HTMLIFrameElement | null;
+    enableWatermark: boolean;
+    lastTouchEnd: number;
+    onEnded: () => void;
+    onMessage: (event: any) => void;
+    onTouchStart: (event: any) => void;
+    onTouchEnd: (event: any) => void;
+    constructor(target: string | HTMLElement | null, config?: PlayerProps);
+    /**
+     * Workaround
+     * BM-3091: receive command from player iframe, when watermark is enabled on iOS device mobile.
+     * Implement some functions for mock fullscreen UI and zoom prevention, including fullscreen / exitFullscreen and restrictZoom / unrestrictZoom.
+     */
+    fullscreen(): void;
+    exitFullscreen(): void;
+    restrictZoom(): void;
+    unrestrictZoom(): void;
+    play(): void;
+    pause(): void;
+    setVolume(volume: number): void;
+    setQuality(quality: number): void;
+    mute(): void;
+    destroy(): void;
+    startReceiveMessage(): void;
+    handleTouchEvent(): void;
+}
+
+export { Player as default };

package/index.esm.js

@@ -0,0 +1,366 @@
+function _extends() {
+  _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends.apply(this, arguments);
+}
+
+var basicCSS = "width: 100%; height: 100%; border: none;";
+var fullscreenCSS = "\n  position: fixed;\n  inset:0;\n  z-index:99999;\n  top:0;\n  left:0;\n  right:0;\n  bottom:0;\n  background-color: black;\n  transition: 1s position;\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  " + basicCSS + "\n";
+var restrictZoomCSS = 'touch-action: pan-x pan-y;';
+var bodyCSS = 'overflow: hidden; position: relative; background-color: black;';
+
+var createEmbed = function createEmbed(_ref, element) {
+  var _ref$style = _ref.style,
+      style = _ref$style === void 0 ? basicCSS : _ref$style,
+      _ref$title = _ref.title,
+      title = _ref$title === void 0 ? 'BlendVision' : _ref$title,
+      _ref$src = _ref.src,
+      src = _ref$src === void 0 ? "https://player.madmax.kkvqa.com"  : _ref$src;
+
+  if (!element) {
+    throw new TypeError('An element must be provided');
+  }
+
+  if (element.getAttribute('data-bv-initialized') !== null) {
+    return element.querySelector('iframe');
+  }
+
+  var iframe = document.createElement('iframe'); // @ts-ignore
+
+  iframe.style = style;
+  iframe.width = '100%';
+  iframe.height = '100%';
+  iframe.src = src;
+  iframe.title = title;
+  iframe.allow = 'autoplay; encrypted-media';
+  iframe.allowFullscreen = true;
+  element.appendChild(iframe);
+  element.setAttribute('data-bv-initialized', 'true');
+  return element.querySelector('iframe');
+};
+
+var sendMessage = function sendMessage(player, command, payload) {
+  var _player$element, _player$element2;
+
+  if (!((_player$element = player.element) != null && _player$element.contentWindow) || !((_player$element2 = player.element) != null && _player$element2.contentWindow.postMessage)) {
+    return;
+  }
+
+  var message = {
+    command: command
+  };
+
+  if (payload !== undefined) {
+    message.payload = payload;
+  }
+
+  var ieVersion = parseFloat(navigator.userAgent.toLowerCase().replace(/^.*msie (\d+).*$/, '$1'));
+
+  if (ieVersion >= 8 && ieVersion < 10) {
+    message = JSON.stringify(message);
+  }
+
+  player.element.contentWindow.postMessage(message, player.targetOrigin);
+};
+
+var receiveMessage = function receiveMessage(player, event) {
+  switch (event.data.command) {
+    case 'ping':
+      sendMessage(player, 'pong');
+      break;
+
+    case 'onEnded':
+      player.onEnded == null ? void 0 : player.onEnded();
+      break;
+
+    case 'fullscreen':
+      {
+        if (player.element === document.activeElement) {
+          player.fullscreen == null ? void 0 : player.fullscreen();
+        }
+
+        break;
+      }
+
+    case 'exitFullscreen':
+      {
+        if (player.element === document.activeElement) {
+          player.exitFullscreen == null ? void 0 : player.exitFullscreen();
+        }
+
+        break;
+      }
+
+    case 'watermark':
+      {
+        player.restrictZoom == null ? void 0 : player.restrictZoom();
+        break;
+      }
+
+    case 'noWatermark':
+      {
+        player.unrestrictZoom == null ? void 0 : player.unrestrictZoom();
+        break;
+      }
+  }
+};
+
+var startTouch = function startTouch(player, event) {
+  if (player.enableWatermark && event.touches.length > 1) {
+    event.preventDefault();
+  }
+};
+
+var endTouch = function endTouch(player, event) {
+  var now = new Date().getTime();
+
+  if (player.enableWatermark && now - player.lastTouchEnd <= 300) {
+    event.preventDefault();
+  }
+
+  player.lastTouchEnd = now;
+};
+
+var toggleMetaToHead = function toggleMetaToHead() {
+  var viewportContent = 'viewport-fit=cover';
+  var metaElement = document.querySelector('meta[name="viewport"]');
+
+  if (metaElement) {
+    var content = metaElement.getAttribute('content');
+
+    if (content != null && content.includes(viewportContent)) {
+      var splitContent = content.split(',').filter(function (text) {
+        return text !== viewportContent;
+      });
+      metaElement.setAttribute('content', splitContent.join(', '));
+    } else {
+      metaElement.setAttribute('content', content ? content + ", " + viewportContent : viewportContent);
+    }
+  } else {
+    var meta = document.createElement('meta');
+    meta.name = 'viewport';
+    meta.content = 'viewport-fit=cover';
+    document.getElementsByTagName('head')[0].appendChild(meta);
+  }
+};
+
+var setElementCSS = function setElementCSS(element, css) {
+  if (element) {
+    var cssText = element.style.cssText;
+
+    if (!(cssText != null && cssText.includes(css))) {
+      element.style.cssText = cssText ? "" + cssText + css : css;
+    }
+  }
+};
+
+var toggleElementCSS = function toggleElementCSS(element, css) {
+  if (element) {
+    var cssText = element.style.cssText;
+
+    if (cssText != null && cssText.includes(css)) {
+      element.style.cssText = cssText.replaceAll(css, '');
+    }
+  }
+};
+
+var Player = /*#__PURE__*/function () {
+  function Player(target, config) {
+    var _this = this,
+        _targetElement;
+
+    if (config === void 0) {
+      config = {};
+    }
+
+    this.targetOrigin = "https://player.madmax.kkvqa.com" ;
+    this.element = null;
+    this.enableWatermark = false;
+    this.lastTouchEnd = 0;
+    var targetElement = null; // Find an element by id
+
+    if (typeof document !== 'undefined' && typeof target === 'string') {
+      targetElement = document.getElementById(target);
+    }
+
+    if (target instanceof HTMLElement) {
+      targetElement = target;
+    } // Not an element
+
+
+    if (!(targetElement instanceof Element && targetElement.nodeType === 1 && 'nodeName' in targetElement && targetElement.ownerDocument && targetElement.ownerDocument.defaultView)) {
+      throw new TypeError('You must pass either a valid element or a valid id.');
+    }
+
+    this.originalElement = targetElement;
+    setElementCSS(document.body, restrictZoomCSS);
+    var _config = config,
+        _config$playerUrl = _config.playerUrl,
+        playerUrl = _config$playerUrl === void 0 ? "https://player.madmax.kkvqa.com"  : _config$playerUrl,
+        _config$locale = _config.locale,
+        locale = _config$locale === void 0 ? 'en' : _config$locale,
+        token = _config.token,
+        did = _config.did,
+        event = _config.event,
+        titleSpacing = _config.titleSpacing,
+        _config$disableFullsc = _config.disableFullscreen,
+        disableFullscreen = _config$disableFullsc === void 0 ? false : _config$disableFullsc;
+
+    this.onMessage = function (event) {
+      return receiveMessage(_this, event);
+    };
+
+    this.targetOrigin = playerUrl;
+    this.onEnded = event == null ? void 0 : event.onEnded;
+
+    this.onTouchStart = function (event) {
+      return startTouch(_this, event);
+    };
+
+    this.lastTouchEnd = 0;
+
+    this.onTouchEnd = function (event) {
+      return endTouch(_this, event);
+    };
+
+    this.startReceiveMessage();
+    this.handleTouchEvent();
+
+    if (((_targetElement = targetElement) == null ? void 0 : _targetElement.nodeName) === 'IFRAME') {
+      this.element = target;
+    } else {
+      var _targetElement2;
+
+      var iframe = (_targetElement2 = targetElement) == null ? void 0 : _targetElement2.querySelector('iframe');
+      var url = new URL(playerUrl + "/?t=" + token + "&hl=" + locale + (did ? "&did=" + did : ''));
+
+      if (titleSpacing) {
+        url.searchParams.append('titleSpacing', titleSpacing.toString());
+      }
+
+      if (disableFullscreen) {
+        url.searchParams.append('disableFullscreen', 'true');
+      }
+
+      this.element = iframe ? iframe : createEmbed(_extends({
+        src: url.toString()
+      }, config), targetElement);
+    }
+  }
+  /**
+   * Workaround
+   * BM-3091: receive command from player iframe, when watermark is enabled on iOS device mobile.
+   * Implement some functions for mock fullscreen UI and zoom prevention, including fullscreen / exitFullscreen and restrictZoom / unrestrictZoom.
+   */
+
+
+  var _proto = Player.prototype;
+
+  _proto.fullscreen = function fullscreen() {
+    if (this.element) {
+      toggleMetaToHead();
+      setElementCSS(document.body, bodyCSS);
+      this.element.style.cssText = fullscreenCSS;
+    }
+  };
+
+  _proto.exitFullscreen = function exitFullscreen() {
+    if (this.element) {
+      toggleMetaToHead();
+      toggleElementCSS(document.body, bodyCSS);
+      this.element.style.cssText = basicCSS;
+    }
+  };
+
+  _proto.restrictZoom = function restrictZoom() {
+    this.enableWatermark = true;
+    setElementCSS(document.body, restrictZoomCSS);
+  };
+
+  _proto.unrestrictZoom = function unrestrictZoom() {
+    this.enableWatermark = false;
+    toggleElementCSS(document.body, restrictZoomCSS);
+  };
+
+  _proto.play = function play() {
+    sendMessage(this, 'play');
+  };
+
+  _proto.pause = function pause() {
+    sendMessage(this, 'pause');
+  } // Workaround BVS-556 live issue
+  // seek(time: number) {
+  //   sendMessage(this, 'seek', { time });
+  // }
+  //
+  // forward() {
+  //   sendMessage(this, 'forward');
+  // }
+  //
+  // rewind() {
+  //   sendMessage(this, 'rewind');
+  // }
+  ;
+
+  _proto.setVolume = function setVolume(volume) {
+    sendMessage(this, 'setVolume', {
+      volume: volume
+    });
+  } // Workaround BVS-556 live issue
+  // setPlaybackRate(rate: number) {
+  //   sendMessage(this, 'setPlaybackRate', { rate });
+  // }
+  ;
+
+  _proto.setQuality = function setQuality(quality) {
+    sendMessage(this, 'setQuality', {
+      quality: quality
+    });
+  };
+
+  _proto.mute = function mute() {
+    sendMessage(this, 'mute');
+  };
+
+  _proto.destroy = function destroy() {
+    var _this$element, _this$element$parentN;
+
+    if (this.originalElement) {
+      this.originalElement.removeAttribute('data-bv-initialized');
+    }
+
+    (_this$element = this.element) == null ? void 0 : (_this$element$parentN = _this$element.parentNode) == null ? void 0 : _this$element$parentN.removeChild(this.element);
+    window.removeEventListener('message', this.onMessage);
+    document.body.removeEventListener('touchstart', this.onTouchStart, {
+      passive: false
+    });
+    document.body.removeEventListener('touchend', this.onTouchEnd, false);
+  };
+
+  _proto.startReceiveMessage = function startReceiveMessage() {
+    window.addEventListener('message', this.onMessage);
+  };
+
+  _proto.handleTouchEvent = function handleTouchEvent() {
+    document.body.addEventListener('touchstart', this.onTouchStart, {
+      passive: false
+    });
+    document.body.addEventListener('touchend', this.onTouchEnd, false);
+  };
+
+  return Player;
+}();
+
+export { Player as default };

package/index.js

@@ -0,0 +1 @@
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):((e="undefined"!=typeof globalThis?globalThis:e||self).BlendVision=e.BlendVision||{},e.BlendVision.Player=t())}(this,(function(){"use strict";function e(){return e=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(e[i]=n[i])}return e},e.apply(this,arguments)}var t="width: 100%; height: 100%; border: none;",n="touch-action: pan-x pan-y;",i="overflow: hidden; position: relative; background-color: black;",o=function(e,t,n){var i,o;if(null!=(i=e.element)&&i.contentWindow&&null!=(o=e.element)&&o.contentWindow.postMessage){var r={command:t};void 0!==n&&(r.payload=n);var a=parseFloat(navigator.userAgent.toLowerCase().replace(/^.*msie (\d+).*$/,"$1"));a>=8&&a<10&&(r=JSON.stringify(r)),e.element.contentWindow.postMessage(r,e.targetOrigin)}},r=function(){var e="viewport-fit=cover",t=document.querySelector('meta[name="viewport"]');if(t){var n=t.getAttribute("content");if(null!=n&&n.includes(e)){var i=n.split(",").filter((function(t){return t!==e}));t.setAttribute("content",i.join(", "))}else t.setAttribute("content",n?n+", "+e:e)}else{var o=document.createElement("meta");o.name="viewport",o.content="viewport-fit=cover",document.getElementsByTagName("head")[0].appendChild(o)}},a=function(e,t){if(e){var n=e.style.cssText;null!=n&&n.includes(t)||(e.style.cssText=n?""+n+t:t)}},l=function(e,t){if(e){var n=e.style.cssText;null!=n&&n.includes(t)&&(e.style.cssText=n.replaceAll(t,""))}};return function(){function s(i,r){var l,s=this;void 0===r&&(r={}),this.targetOrigin="https://player.madmax.kkvqa.com",this.element=null,this.enableWatermark=!1,this.lastTouchEnd=0;var c=null;if("undefined"!=typeof document&&"string"==typeof i&&(c=document.getElementById(i)),i instanceof HTMLElement&&(c=i),!(c instanceof Element&&1===c.nodeType&&"nodeName"in c&&c.ownerDocument&&c.ownerDocument.defaultView))throw new TypeError("You must pass either a valid element or a valid id.");this.originalElement=c,a(document.body,n);var u=r,d=u.playerUrl,m=void 0===d?"https://player.madmax.kkvqa.com":d,h=u.locale,f=void 0===h?"en":h,v=u.token,p=u.did,y=u.event,g=u.titleSpacing,b=u.disableFullscreen,E=void 0!==b&&b;if(this.onMessage=function(e){return function(e,t){switch(t.data.command){case"ping":o(e,"pong");break;case"onEnded":null==e.onEnded||e.onEnded();break;case"fullscreen":e.element===document.activeElement&&(null==e.fullscreen||e.fullscreen());break;case"exitFullscreen":e.element===document.activeElement&&(null==e.exitFullscreen||e.exitFullscreen());break;case"watermark":null==e.restrictZoom||e.restrictZoom();break;case"noWatermark":null==e.unrestrictZoom||e.unrestrictZoom()}}(s,e)},this.targetOrigin=m,this.onEnded=null==y?void 0:y.onEnded,this.onTouchStart=function(e){return function(e,t){e.enableWatermark&&t.touches.length>1&&t.preventDefault()}(s,e)},this.lastTouchEnd=0,this.onTouchEnd=function(e){return function(e,t){var n=(new Date).getTime();e.enableWatermark&&n-e.lastTouchEnd<=300&&t.preventDefault(),e.lastTouchEnd=n}(s,e)},this.startReceiveMessage(),this.handleTouchEvent(),"IFRAME"===(null==(l=c)?void 0:l.nodeName))this.element=i;else{var w,T=null==(w=c)?void 0:w.querySelector("iframe"),k=new URL(m+"/?t="+v+"&hl="+f+(p?"&did="+p:""));g&&k.searchParams.append("titleSpacing",g.toString()),E&&k.searchParams.append("disableFullscreen","true"),this.element=T||function(e,n){var i=e.style,o=void 0===i?t:i,r=e.title,a=void 0===r?"BlendVision":r,l=e.src,s=void 0===l?"https://player.madmax.kkvqa.com":l;if(!n)throw new TypeError("An element must be provided");if(null!==n.getAttribute("data-bv-initialized"))return n.querySelector("iframe");var c=document.createElement("iframe");return c.style=o,c.width="100%",c.height="100%",c.src=s,c.title=a,c.allow="autoplay; encrypted-media",c.allowFullscreen=!0,n.appendChild(c),n.setAttribute("data-bv-initialized","true"),n.querySelector("iframe")}(e({src:k.toString()},r),c)}}var c=s.prototype;return c.fullscreen=function(){this.element&&(r(),a(document.body,i),this.element.style.cssText="\n  position: fixed;\n  inset:0;\n  z-index:99999;\n  top:0;\n  left:0;\n  right:0;\n  bottom:0;\n  background-color: black;\n  transition: 1s position;\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  width: 100%; height: 100%; border: none;\n")},c.exitFullscreen=function(){this.element&&(r(),l(document.body,i),this.element.style.cssText=t)},c.restrictZoom=function(){this.enableWatermark=!0,a(document.body,n)},c.unrestrictZoom=function(){this.enableWatermark=!1,l(document.body,n)},c.play=function(){o(this,"play")},c.pause=function(){o(this,"pause")},c.setVolume=function(e){o(this,"setVolume",{volume:e})},c.setQuality=function(e){o(this,"setQuality",{quality:e})},c.mute=function(){o(this,"mute")},c.destroy=function(){var e,t;this.originalElement&&this.originalElement.removeAttribute("data-bv-initialized"),null==(e=this.element)||null==(t=e.parentNode)||t.removeChild(this.element),window.removeEventListener("message",this.onMessage),document.body.removeEventListener("touchstart",this.onTouchStart,{passive:!1}),document.body.removeEventListener("touchend",this.onTouchEnd,!1)},c.startReceiveMessage=function(){window.addEventListener("message",this.onMessage)},c.handleTouchEvent=function(){document.body.addEventListener("touchstart",this.onTouchStart,{passive:!1}),document.body.addEventListener("touchend",this.onTouchEnd,!1)},s}()}));

package/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "@kks-web/player-sdk",
+  "version": "v1.0.7-beta.1",
+  "main": "index.js",
+  "module": "index.esm.js",
+  "types": "index.d.ts",
+  "files": [
+    "index.js",
+    "index.esm.js",
+    "index.d.ts"
+  ]
+}