byteark-player-react - npm Package Compare versions

Comparing version 1.0.0-beta9 to 1.1.0

dist/index.js

 function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
 
 var React = _interopDefault(require('react'));
+var isEqual = _interopDefault(require('lodash.isequal'));
 
-function _extends() {
-  _extends = Object.assign || function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
+function _inheritsLoose(subClass, superClass) {
+  subClass.prototype = Object.create(superClass.prototype);
+  subClass.prototype.constructor = subClass;
 
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
+  _setPrototypeOf(subClass, superClass);
+}
 
-    return target;
+function _setPrototypeOf(o, p) {
+  _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
+    o.__proto__ = p;
+    return o;
   };
 
-  return _extends.apply(this, arguments);
+  return _setPrototypeOf(o, p);
 }
 
-function _inheritsLoose(subClass, superClass) {
-  subClass.prototype = Object.create(superClass.prototype);
-  subClass.prototype.constructor = subClass;
-  subClass.__proto__ = superClass;
+function _assertThisInitialized(self) {
+  if (self === void 0) {
+    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+  }
+
+  return self;
 }
@@ -48,2 +49,47 @@
 
+function isBrowserSupportDrm() {
+  var testKeySystems = ['com.widevine.alpha', 'com.apple.fps.3_0', 'com.apple.fps.2_0', 'com.apple.fps.1_0', 'com.apple.fps'];
+  var basicVideoCapabilities = [{
+    contentType: 'video/mp4; codecs="avc1.42E01E"'
+  }, {
+    contentType: 'video/webm; codecs="vp8"'
+  }];
+  var basicConfig = {
+    initDataTypes: ['cenc'],
+    videoCapabilities: basicVideoCapabilities
+  };
+  var offlineConfig = {
+    videoCapabilities: basicVideoCapabilities,
+    persistentState: 'required',
+    sessionTypes: ['persistent-license']
+  };
+  var configs = [offlineConfig, basicConfig];
+  var support = {};
+
+  var testSystem = function testSystem(keySystem) {
+    return navigator.requestMediaKeySystemAccess(keySystem, configs).then(function () {
+      support[keySystem] = true;
+    })["catch"](function (e) {
+      support[keySystem] = false;
+    });
+  };
+
+  var tests = testKeySystems.map(function (keySystem) {
+    return testSystem(keySystem);
+  });
+  return Promise.all(tests).then(function () {
+    var isSupportWidevine = support['com.widevine.alpha'] === true;
+    var isSupportFairPlay = support['com.apple.fps.3_0'] === true || support['com.apple.fps.2_0'] === true || support['com.apple.fps.1_0'] === true || support['com.apple.fps'] === true;
+
+    if (!isSupportWidevine && !isSupportFairPlay) {
+      return Promise.reject(new Error('Browser does not support DRM'));
+    }
+
+    return {
+      widevine: isSupportWidevine,
+      fairplay: isSupportFairPlay
+    };
+  });
+}
+
 function ErrorMessage(props) {
@@ -101,14 +147,33 @@ var containerStyle = {
 function PlayerPlaceholder(props) {
+  var options = props.playerOptions;
   var placeholderCustomStyle = {
-    position: 'absolute',
+    position: 'relative',
     width: '100%',
     minWidth: '100%',
-    backgroundColor: '#000000'
+    background: '#000000',
+    backgroundImage: "url(" + options.poster + ")",
+    backgroundSize: 'cover',
+    backgroundRepeat: 'no-repeat',
+    cursor: 'pointer'
   };
+  var playIconStyle = {
+    position: 'absolute',
+    width: '90px',
+    top: '50%',
+    left: '50%',
+    marginTop: '-2.75em',
+    marginLeft: '-2.75em',
+    background: 'rgba(0, 0, 0, 0.85)',
+    borderRadius: '50%'
+  };
+  var pathStyle = {
+    fill: '#FFF',
+    transform: 'translateX(13px) translateY(9px) scale(0.7)'
+  };
 
-  if (props.fluid) {
+  if (options.fluid) {
     placeholderCustomStyle.paddingTop = calculatePlaceholderPaddingTopFromAspectRatio(props.aspectRatio || '16:9') + "%";
   }
 
-  if (!props.fluid && props.fill) {
+  if (!options.fluid && options.fill) {
     placeholderCustomStyle.height = '100%';
@@ -118,6 +183,24 @@ placeholderCustomStyle.minHeight = '100%';
 
+  if (options.lazyload && !props.loaded) {
+    placeholderCustomStyle.position = 'relative';
+  }
+
+  if (options.lazyload && props.loaded) {
+    placeholderCustomStyle.position = 'absolute';
+  }
+
+  var shouldShowPlayIcon = options.controls === undefined || options.controls === null || options.controls === true;
   return /*#__PURE__*/React.createElement("div", {
+    onClick: props.onClick,
     className: props.className,
     style: placeholderCustomStyle
-  }, props.error ? /*#__PURE__*/React.createElement(ErrorMessage, props.error) : null);
+  }, shouldShowPlayIcon ? /*#__PURE__*/React.createElement("svg", {
+    className: "play-icon",
+    width: "90",
+    viewBox: "0 0 60 60",
+    style: playIconStyle
+  }, /*#__PURE__*/React.createElement("path", {
+    style: pathStyle,
+    d: "M47.43,27.26,14.11,5.87A3.34,3.34,0,0,0,9,8.79V51.56a3.34,3.34,0,0,0,5.11,2.91L47.43,33.09A3.49,3.49,0,0,0,47.43,27.26Z"
+  })) : null, props.error ? /*#__PURE__*/React.createElement(ErrorMessage, props.error) : null);
 }
@@ -256,2 +339,4 @@
 }, {
+  name: 'seekButtons'
+}, {
   name: 'sources',
@@ -262,9 +347,9 @@ setter: 'src'
 }];
-function updatePlayerProps(player, currentProps, nextProps) {
+function updatePlayerProps(player, nextProps, prevProps) {
   playerProps.forEach(function (_ref) {
     var name = _ref.name,
         setter = _ref.setter;
+    var effectiveSetter = setter || name;
 
-    if (currentProps[name] !== nextProps[name]) {
-      var effectiveSetter = setter || name;
+    if (!isEqual(nextProps[name], prevProps[name])) {
       player[effectiveSetter](nextProps[name]);
@@ -275,10 +360,10 @@ }
 
-function defaultCreatePlaceholderFunction(props, _ref) {
-  var error = _ref.error;
+function defaultCreatePlaceholderFunction(props, state, onClickPlaceholder) {
   return /*#__PURE__*/React.createElement(PlayerPlaceholder, {
+    aspectRatio: props.aspectRatio,
+    onClick: onClickPlaceholder,
     className: props.className,
-    aspectRatio: props.aspectRatio,
-    error: error,
-    fill: props.fill,
-    fluid: props.fluid
+    error: state.error,
+    loaded: state.loaded,
+    playerOptions: props
   });
@@ -288,3 +373,3 @@ }
 function defaultCreatePlayerFunction(videoNode, options, onReady) {
-  return bytearkPlayer.init(videoNode, options, onReady);
+  return bytearkPlayer.initAsync(videoNode, options, onReady);
 }
@@ -357,2 +442,6 @@
     _this.onPlayerCreated = function () {
+      _this.setState({
+        showPlaceholder: false
+      });
+
       if (_this.props.onPlayerCreated) {
@@ -364,2 +453,6 @@ _this.props.onPlayerCreated(_this.player);
     _this.onReady = function () {
+      _this.setState({
+        ready: true
+      });
+
       if (_this.props.onReady) {
@@ -372,12 +465,7 @@ _this.props.onReady(_this.player);
       try {
-        return Promise.resolve(window.bytearkPlayer.canAutoplay(_this.props)).then(function (autoplayResult_) {
-          var options = _extends({}, _this.props, {
-            autoplayResult_: autoplayResult_,
-            autoplay: autoplayResult_.autoplay,
-            muted: autoplayResult_.muted
-          });
+        window.bytearkPlayer.isBrowserSupportDrm = isBrowserSupportDrm;
+        var createPlayerFunction = _this.props.createPlayerFunction || defaultCreatePlayerFunction;
+        return Promise.resolve(createPlayerFunction(_this.videoNode, _this.props, _this.onReady)).then(function (_createPlayerFunction) {
+          _this.player = _createPlayerFunction;
 
-          var createPlayerFunction = _this.props.createPlayerFunction || defaultCreatePlayerFunction;
-          _this.player = createPlayerFunction(_this.videoNode, options, _this.onReady);
-
           _this.onPlayerCreated();
@@ -399,4 +487,6 @@ });
       ready: false,
-      error: null
+      error: null,
+      showPlaceholder: true
     };
+    _this.onClickPlaceholder = _this.onClickPlaceholder.bind(_assertThisInitialized(_this));
     return _this;
@@ -424,3 +514,5 @@ }
   _proto.componentDidMount = function componentDidMount() {
-    this.initializePlayer();
+    if (!this.props.lazyload) {
+      this.initializePlayer();
+    }
   };
@@ -462,6 +554,2 @@
     try {
-      var _exit2 = false;
-
-      var _this5 = this;
-
       var _temp3 = function _temp3(_result2) {
@@ -473,2 +561,6 @@ if (_exit2) return _result2;
 
+      var _exit2 = false;
+
+      var _this5 = this;
+
       var _temp4 = _catch(function () {
@@ -532,3 +624,5 @@ var promises = [];
       this.player.dispose();
-      this.ready = false;
+      this.setState({
+        ready: false
+      });
     }
@@ -538,3 +632,12 @@ };
   _proto.render = function render() {
-    return /*#__PURE__*/React.createElement(React.Fragment, null, this.renderPlaceholder(), this.state.error ? null : this.renderPlayer());
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        position: 'relative',
+        height: '100%'
+      }
+    }, this.state.showPlaceholder ? this.renderPlaceholder() : null, /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: this.state.showPlaceholder ? 'none' : 'initial'
+      }
+    }, this.state.error ? null : this.renderPlayer()));
   };
@@ -544,3 +647,3 @@
     var createPlaceholderFunction = this.props.createPlaceholderFunction || defaultCreatePlaceholderFunction;
-    return createPlaceholderFunction(this.props, this.state);
+    return createPlaceholderFunction(this.props, this.state, this.onClickPlaceholder);
   };
@@ -587,8 +690,18 @@
 
-  _proto.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
-    if (!this.player) {
-      return;
+  _proto.componentDidUpdate = function componentDidUpdate(prevProps, prevState) {
+    if (this.player) {
+      updatePlayerProps(this.player, this.props, prevProps);
     }
+  };
 
-    updatePlayerProps(this.player, this.props, nextProps);
+  _proto.onClickPlaceholder = function onClickPlaceholder() {
+    var _this8 = this;
+
+    this.initializePlayer().then(function () {
+      _this8.setState({
+        showPlaceholder: false
+      });
+
+      _this8.player.play();
+    });
   };
@@ -609,3 +722,3 @@
   setupPlayerFunction: defaultSetupPlayerFunction,
-  playerEndpoint: 'https://byteark-sdk.cdn.byteark.com/player-core/',
+  playerEndpoint: 'https://byteark-sdk.cdn.byteark.com/player-core',
   playerVersion: 'v2',
@@ -619,2 +732,3 @@ playerJsFileName: 'byteark-player.min.js',
 exports.ByteArkPlayerContainer = ByteArkPlayerContainer;
+exports.isBrowserSupportDrm = isBrowserSupportDrm;
 //# sourceMappingURL=index.js.map

dist/index.modern.js

 import React from 'react';
+import isEqual from 'lodash.isequal';
 
-function _extends() {
-  _extends = Object.assign || function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
+function _inheritsLoose(subClass, superClass) {
+  subClass.prototype = Object.create(superClass.prototype);
+  subClass.prototype.constructor = subClass;
 
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
+  _setPrototypeOf(subClass, superClass);
+}
 
-    return target;
+function _setPrototypeOf(o, p) {
+  _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
+    o.__proto__ = p;
+    return o;
   };
 
-  return _extends.apply(this, arguments);
+  return _setPrototypeOf(o, p);
 }
 
-function _inheritsLoose(subClass, superClass) {
-  subClass.prototype = Object.create(superClass.prototype);
-  subClass.prototype.constructor = subClass;
-  subClass.__proto__ = superClass;
+function _assertThisInitialized(self) {
+  if (self === void 0) {
+    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+  }
+
+  return self;
 }
@@ -46,2 +47,47 @@
 
+function isBrowserSupportDrm() {
+  var testKeySystems = ['com.widevine.alpha', 'com.apple.fps.3_0', 'com.apple.fps.2_0', 'com.apple.fps.1_0', 'com.apple.fps'];
+  var basicVideoCapabilities = [{
+    contentType: 'video/mp4; codecs="avc1.42E01E"'
+  }, {
+    contentType: 'video/webm; codecs="vp8"'
+  }];
+  var basicConfig = {
+    initDataTypes: ['cenc'],
+    videoCapabilities: basicVideoCapabilities
+  };
+  var offlineConfig = {
+    videoCapabilities: basicVideoCapabilities,
+    persistentState: 'required',
+    sessionTypes: ['persistent-license']
+  };
+  var configs = [offlineConfig, basicConfig];
+  var support = {};
+
+  var testSystem = function testSystem(keySystem) {
+    return navigator.requestMediaKeySystemAccess(keySystem, configs).then(function () {
+      support[keySystem] = true;
+    })["catch"](function (e) {
+      support[keySystem] = false;
+    });
+  };
+
+  var tests = testKeySystems.map(function (keySystem) {
+    return testSystem(keySystem);
+  });
+  return Promise.all(tests).then(function () {
+    var isSupportWidevine = support['com.widevine.alpha'] === true;
+    var isSupportFairPlay = support['com.apple.fps.3_0'] === true || support['com.apple.fps.2_0'] === true || support['com.apple.fps.1_0'] === true || support['com.apple.fps'] === true;
+
+    if (!isSupportWidevine && !isSupportFairPlay) {
+      return Promise.reject(new Error('Browser does not support DRM'));
+    }
+
+    return {
+      widevine: isSupportWidevine,
+      fairplay: isSupportFairPlay
+    };
+  });
+}
+
 function ErrorMessage(props) {
@@ -99,14 +145,33 @@ var containerStyle = {
 function PlayerPlaceholder(props) {
+  var options = props.playerOptions;
   var placeholderCustomStyle = {
-    position: 'absolute',
+    position: 'relative',
     width: '100%',
     minWidth: '100%',
-    backgroundColor: '#000000'
+    background: '#000000',
+    backgroundImage: "url(" + options.poster + ")",
+    backgroundSize: 'cover',
+    backgroundRepeat: 'no-repeat',
+    cursor: 'pointer'
   };
+  var playIconStyle = {
+    position: 'absolute',
+    width: '90px',
+    top: '50%',
+    left: '50%',
+    marginTop: '-2.75em',
+    marginLeft: '-2.75em',
+    background: 'rgba(0, 0, 0, 0.85)',
+    borderRadius: '50%'
+  };
+  var pathStyle = {
+    fill: '#FFF',
+    transform: 'translateX(13px) translateY(9px) scale(0.7)'
+  };
 
-  if (props.fluid) {
+  if (options.fluid) {
     placeholderCustomStyle.paddingTop = calculatePlaceholderPaddingTopFromAspectRatio(props.aspectRatio || '16:9') + "%";
   }
 
-  if (!props.fluid && props.fill) {
+  if (!options.fluid && options.fill) {
     placeholderCustomStyle.height = '100%';
@@ -116,6 +181,24 @@ placeholderCustomStyle.minHeight = '100%';
 
+  if (options.lazyload && !props.loaded) {
+    placeholderCustomStyle.position = 'relative';
+  }
+
+  if (options.lazyload && props.loaded) {
+    placeholderCustomStyle.position = 'absolute';
+  }
+
+  var shouldShowPlayIcon = options.controls === undefined || options.controls === null || options.controls === true;
   return /*#__PURE__*/React.createElement("div", {
+    onClick: props.onClick,
     className: props.className,
     style: placeholderCustomStyle
-  }, props.error ? /*#__PURE__*/React.createElement(ErrorMessage, props.error) : null);
+  }, shouldShowPlayIcon ? /*#__PURE__*/React.createElement("svg", {
+    className: "play-icon",
+    width: "90",
+    viewBox: "0 0 60 60",
+    style: playIconStyle
+  }, /*#__PURE__*/React.createElement("path", {
+    style: pathStyle,
+    d: "M47.43,27.26,14.11,5.87A3.34,3.34,0,0,0,9,8.79V51.56a3.34,3.34,0,0,0,5.11,2.91L47.43,33.09A3.49,3.49,0,0,0,47.43,27.26Z"
+  })) : null, props.error ? /*#__PURE__*/React.createElement(ErrorMessage, props.error) : null);
 }
@@ -254,2 +337,4 @@
 }, {
+  name: 'seekButtons'
+}, {
   name: 'sources',
@@ -260,9 +345,9 @@ setter: 'src'
 }];
-function updatePlayerProps(player, currentProps, nextProps) {
+function updatePlayerProps(player, nextProps, prevProps) {
   playerProps.forEach(function (_ref) {
     var name = _ref.name,
         setter = _ref.setter;
+    var effectiveSetter = setter || name;
 
-    if (currentProps[name] !== nextProps[name]) {
-      var effectiveSetter = setter || name;
+    if (!isEqual(nextProps[name], prevProps[name])) {
       player[effectiveSetter](nextProps[name]);
@@ -273,10 +358,10 @@ }
 
-function defaultCreatePlaceholderFunction(props, _ref) {
-  var error = _ref.error;
+function defaultCreatePlaceholderFunction(props, state, onClickPlaceholder) {
   return /*#__PURE__*/React.createElement(PlayerPlaceholder, {
+    aspectRatio: props.aspectRatio,
+    onClick: onClickPlaceholder,
     className: props.className,
-    aspectRatio: props.aspectRatio,
-    error: error,
-    fill: props.fill,
-    fluid: props.fluid
+    error: state.error,
+    loaded: state.loaded,
+    playerOptions: props
   });
@@ -286,3 +371,3 @@ }
 function defaultCreatePlayerFunction(videoNode, options, onReady) {
-  return bytearkPlayer.init(videoNode, options, onReady);
+  return bytearkPlayer.initAsync(videoNode, options, onReady);
 }
@@ -355,2 +440,6 @@
     _this.onPlayerCreated = function () {
+      _this.setState({
+        showPlaceholder: false
+      });
+
       if (_this.props.onPlayerCreated) {
@@ -362,2 +451,6 @@ _this.props.onPlayerCreated(_this.player);
     _this.onReady = function () {
+      _this.setState({
+        ready: true
+      });
+
       if (_this.props.onReady) {
@@ -370,12 +463,7 @@ _this.props.onReady(_this.player);
       try {
-        return Promise.resolve(window.bytearkPlayer.canAutoplay(_this.props)).then(function (autoplayResult_) {
-          var options = _extends({}, _this.props, {
-            autoplayResult_: autoplayResult_,
-            autoplay: autoplayResult_.autoplay,
-            muted: autoplayResult_.muted
-          });
+        window.bytearkPlayer.isBrowserSupportDrm = isBrowserSupportDrm;
+        var createPlayerFunction = _this.props.createPlayerFunction || defaultCreatePlayerFunction;
+        return Promise.resolve(createPlayerFunction(_this.videoNode, _this.props, _this.onReady)).then(function (_createPlayerFunction) {
+          _this.player = _createPlayerFunction;
 
-          var createPlayerFunction = _this.props.createPlayerFunction || defaultCreatePlayerFunction;
-          _this.player = createPlayerFunction(_this.videoNode, options, _this.onReady);
-
           _this.onPlayerCreated();
@@ -397,4 +485,6 @@ });
       ready: false,
-      error: null
+      error: null,
+      showPlaceholder: true
     };
+    _this.onClickPlaceholder = _this.onClickPlaceholder.bind(_assertThisInitialized(_this));
     return _this;
@@ -422,3 +512,5 @@ }
   _proto.componentDidMount = function componentDidMount() {
-    this.initializePlayer();
+    if (!this.props.lazyload) {
+      this.initializePlayer();
+    }
   };
@@ -460,6 +552,2 @@
     try {
-      var _exit2 = false;
-
-      var _this5 = this;
-
       var _temp3 = function _temp3(_result2) {
@@ -471,2 +559,6 @@ if (_exit2) return _result2;
 
+      var _exit2 = false;
+
+      var _this5 = this;
+
       var _temp4 = _catch(function () {
@@ -530,3 +622,5 @@ var promises = [];
       this.player.dispose();
-      this.ready = false;
+      this.setState({
+        ready: false
+      });
     }
@@ -536,3 +630,12 @@ };
   _proto.render = function render() {
-    return /*#__PURE__*/React.createElement(React.Fragment, null, this.renderPlaceholder(), this.state.error ? null : this.renderPlayer());
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        position: 'relative',
+        height: '100%'
+      }
+    }, this.state.showPlaceholder ? this.renderPlaceholder() : null, /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: this.state.showPlaceholder ? 'none' : 'initial'
+      }
+    }, this.state.error ? null : this.renderPlayer()));
   };
@@ -542,3 +645,3 @@
     var createPlaceholderFunction = this.props.createPlaceholderFunction || defaultCreatePlaceholderFunction;
-    return createPlaceholderFunction(this.props, this.state);
+    return createPlaceholderFunction(this.props, this.state, this.onClickPlaceholder);
   };
@@ -585,8 +688,18 @@
 
-  _proto.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
-    if (!this.player) {
-      return;
+  _proto.componentDidUpdate = function componentDidUpdate(prevProps, prevState) {
+    if (this.player) {
+      updatePlayerProps(this.player, this.props, prevProps);
     }
+  };
 
-    updatePlayerProps(this.player, this.props, nextProps);
+  _proto.onClickPlaceholder = function onClickPlaceholder() {
+    var _this8 = this;
+
+    this.initializePlayer().then(function () {
+      _this8.setState({
+        showPlaceholder: false
+      });
+
+      _this8.player.play();
+    });
   };
@@ -607,3 +720,3 @@
   setupPlayerFunction: defaultSetupPlayerFunction,
-  playerEndpoint: 'https://byteark-sdk.cdn.byteark.com/player-core/',
+  playerEndpoint: 'https://byteark-sdk.cdn.byteark.com/player-core',
   playerVersion: 'v2',
@@ -616,3 +729,3 @@ playerJsFileName: 'byteark-player.min.js',
 
-export { ByteArkPlayerContainer };
+export { ByteArkPlayerContainer, isBrowserSupportDrm };
 //# sourceMappingURL=index.modern.js.map

package.json

 {
   "name": "byteark-player-react",
-  "version": "1.0.0-beta9",
+  "version": "1.1.0",
   "description": "ByteArk Player Container for React",
@@ -27,3 +27,3 @@ "author": "byteark",
   "peerDependencies": {
-    "react": "^17.0.1"
+    "react": "^17.0.2"
   },
@@ -48,9 +48,12 @@ "devDependencies": {
     "prettier": "^2.0.5",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
-    "react-scripts": "^4.0.1"
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-scripts": "^4.0.3"
   },
   "files": [
     "dist"
-  ]
+  ],
+  "dependencies": {
+    "lodash.isequal": "^4.5.0"
+  }
 }

README.md

@@ -8,10 +8,11 @@ # ByteArk Player Container for React
 * [Installation](#installation)
-* [Usages](#usages)
+* [Usage](#usage)
 * [Basic Props](#basic-props)
     * [Source Object](#source-object)
 * [Callback Props](#callback-props)
+* [Advanced Props](#advanced-props)
 * [API Methods](#api-methods)
-* [Advance Usages](#advance-usages)
+* [Advanced Usages](#advanced-usages)
     * [Controlling Players](#controlling-players)
-    * [Request Media/Encryption with credentials](#request-media-encryption-with-credentials)
+    * [Request Media/Encryption with credentials](#request-mediaencryption-with-credentials)
 
@@ -118,2 +119,3 @@ ## Demo
 | responsive           | Boolean        | -       | Auto show/hide controls depending on the screen size.                        |
+| seekButtons          | Boolean        | false   | Show 10 seconds seek buttons and allow double-tap to seek on mobile.         |
 | sources              | Object/Array   | -       | Source of videos to be played.                                               |
@@ -151,3 +153,3 @@ | volume               | Number         | -       | Video's volume, between 0 to 1.                                              |
 
-## Advance Props
+## Advanced Props
 
@@ -161,2 +163,3 @@ We also provide some ways to custom the appearance of the video placeholder,
 | createPlayerFunction      | Function | Custom video instance. This function should return a VideoJS's player instance. |
+| lazyload                  | Boolean  | The player loads its asset files once it got rendered on the webpage. By passing this prop, the player then loads its asset files once the user clicked on the player instead. |
 | playerEndpoint            | String   | Endpoint to the video player (without version part).                            |
@@ -166,4 +169,18 @@ | playerJsFileName          | String   | File name of player's JS.                                                       |
 
-## Methods
+```jsx
+import { ByteArkPlayerContainer } from 'byteark-player-react'
 
+const App = () => {
+  // An Advanced Props Example
+  return
+    <ByteArkPlayerContainer
+      {...playerOptions}
+      playerEndpoint='my-custom-endpoint'
+      lazyload />
+}
+```
+
+
+## API Methods
+
 ### `getPlayer()`
@@ -173,3 +190,3 @@
 
-## Advance Usages
+## Advanced Usages
 
@@ -176,0 +193,0 @@ ### Controlling Players

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

169034

increased by15.57%

Lines of code

1218

increased by20.24%

Number of low quality alerts

1

decreased by-50%

Number of lines in readme file

294

increased by6.14%

Worsened metrics

Dependency count

2

increased by100%

Dependency changes

• + Addedlodash.isequal@^4.5.0

• + Addedlodash.isequal@4.5.0(transitive)