byteark-player-react - npm Package Compare versions

Comparing version 2.0.1 to 2.1.0-beta.1

dist/index.js

@@ -1,6 +0,7 @@
-function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
+var React = require('react');
 
-var React = _interopDefault(require('react'));
-var isEqual = _interopDefault(require('lodash.isequal'));
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
 function _extends() {
@@ -20,80 +21,60 @@ _extends = Object.assign ? Object.assign.bind() : function (target) {
 }
-function _inheritsLoose(subClass, superClass) {
-  subClass.prototype = Object.create(superClass.prototype);
-  subClass.prototype.constructor = subClass;
-  _setPrototypeOf(subClass, superClass);
-}
-function _setPrototypeOf(o, p) {
-  _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
-    o.__proto__ = p;
-    return o;
-  };
-  return _setPrototypeOf(o, p);
-}
-function _assertThisInitialized(self) {
-  if (self === void 0) {
-    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
   }
-  return self;
+  return target;
 }
 
-// A type of promise-like that resolves synchronously and supports only one observer
-
-const _iteratorSymbol = /*#__PURE__*/ typeof Symbol !== "undefined" ? (Symbol.iterator || (Symbol.iterator = Symbol("Symbol.iterator"))) : "@@iterator";
-
-const _asyncIteratorSymbol = /*#__PURE__*/ typeof Symbol !== "undefined" ? (Symbol.asyncIterator || (Symbol.asyncIterator = Symbol("Symbol.asyncIterator"))) : "@@asyncIterator";
-
-// Asynchronously call a function and send errors to recovery continuation
-function _catch(body, recover) {
-	try {
-		var result = body();
-	} catch(e) {
-		return recover(e);
-	}
-	if (result && result.then) {
-		return result.then(void 0, recover);
-	}
-	return result;
-}
-
-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 isBrowserSupportDrm = function isBrowserSupportDrm() {
+  try {
+    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;
+      });
+    };
+    // Test each key system.
+    var tests = testKeySystems.map(function (keySystem) {
+      return testSystem(keySystem);
     });
-  };
-  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
-    };
-  });
-}
+    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
+      };
+    });
+  } catch (e) {
+    return Promise.reject(e);
+  }
+};
 
@@ -128,9 +109,9 @@ function ErrorMessage(props) {
   };
-  return /*#__PURE__*/React.createElement("div", {
+  return React__default["default"].createElement("div", {
     style: containerStyle
-  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("p", {
+  }, React__default["default"].createElement("div", null, React__default["default"].createElement("p", {
     style: primaryTextStyle
-  }, props.message), /*#__PURE__*/React.createElement("p", {
+  }, props.message), React__default["default"].createElement("p", {
     style: secondaryTextStyle
-  }, props.messageSecondary), /*#__PURE__*/React.createElement("p", {
+  }, props.messageSecondary), React__default["default"].createElement("p", {
     style: errorCodeTextStyle
@@ -140,6 +121,9 @@ }, "(", props.code, ")")));
 
-function calculatePlaceholderPaddingTopFromAspectRatio(aspectRatio) {
+function getPlaceholderPaddingTopFromAspectRatio(aspectRatio) {
   if (typeof aspectRatio === 'number') {
     return aspectRatio;
   }
+  if (typeof aspectRatio !== 'string') {
+    return 0;
+  }
   var _aspectRatio$split = aspectRatio.split(':'),
@@ -177,3 +161,3 @@ hStr = _aspectRatio$split[0],
   if (options.fluid) {
-    placeholderCustomStyle.paddingTop = calculatePlaceholderPaddingTopFromAspectRatio(props.aspectRatio || '16:9') + "%";
+    placeholderCustomStyle.paddingTop = getPlaceholderPaddingTopFromAspectRatio(props.aspectRatio || '16:9') + "%";
   }
@@ -191,15 +175,15 @@ if (!options.fluid && options.fill) {
   var shouldShowPlayIcon = options.controls === undefined || options.controls === null || options.controls === true;
-  return /*#__PURE__*/React.createElement("div", {
+  return React__default["default"].createElement("div", {
     onClick: props.onClick,
     className: props.className,
     style: placeholderCustomStyle
-  }, shouldShowPlayIcon ? /*#__PURE__*/React.createElement("svg", {
-    className: "play-icon",
-    width: "90",
-    viewBox: "0 0 60 60",
+  }, shouldShowPlayIcon ? React__default["default"].createElement("svg", {
+    className: 'play-icon',
+    width: '90',
+    viewBox: '0 0 60 60',
     style: playIconStyle
-  }, /*#__PURE__*/React.createElement("path", {
+  }, React__default["default"].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);
+    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 ? React__default["default"].createElement(ErrorMessage, _extends({}, props.error)) : null);
 }
@@ -223,3 +207,3 @@
     tag.addEventListener('load', function () {
-      tag.setAttribute('data-load-completed', new Date().getTime());
+      tag.setAttribute('data-load-completed', "" + new Date().getTime());
       resolve();
@@ -239,3 +223,2 @@ });
     tag.id = id;
-    tag.async = false;
     tag.setAttribute('rel', 'stylesheet');
@@ -245,3 +228,3 @@ tag.setAttribute('type', 'text/css');
     tag.addEventListener('load', function () {
-      tag.setAttribute('data-load-completed', new Date().getTime());
+      tag.setAttribute('data-load-completed', "" + new Date().getTime());
       resolve();
@@ -258,5 +241,2 @@ });
   try {
-    if (type === void 0) {
-      type = null;
-    }
     var existingElement = document.getElementById(id);
@@ -297,55 +277,28 @@ if (existingElement) {
 
-var playerProps = [{
-  name: 'autoplay'
-}, {
-  name: 'aspectRatio'
-}, {
-  name: 'breakpoints'
-}, {
-  name: 'controls'
-}, {
-  name: 'crossorigin'
-}, {
-  name: 'currentTime'
-}, {
-  name: 'fill'
-}, {
-  name: 'fluid'
-}, {
-  name: 'loop'
-}, {
-  name: 'language'
-}, {
-  name: 'muted'
-}, {
-  name: 'playbackRate'
-}, {
-  name: 'playsinline'
-}, {
-  name: 'poster'
-}, {
-  name: 'preload'
-}, {
-  name: 'responsive'
-}, {
-  name: 'seekButtons'
-}, {
-  name: 'sources',
-  setter: 'src'
-}, {
-  name: 'volume'
-}];
-function updatePlayerProps(player, nextProps, prevProps) {
-  playerProps.forEach(function (_ref) {
-    var name = _ref.name,
-      setter = _ref.setter;
-    var effectiveSetter = setter || name;
-    if (!isEqual(nextProps[name], prevProps[name])) {
-      player[effectiveSetter](nextProps[name]);
-    }
-  });
+var _excluded = ["createPlaceholderFunction", "createPlayerFunction", "lazyload", "playerEndpoint", "playerServerEndpoint", "playerVersion", "playerJsFileName", "playerCssFileName", "setupPlayerFunction"];
+function _catch(body, recover) {
+  try {
+    var result = body();
+  } catch (e) {
+    return recover(e);
+  }
+  if (result && result.then) {
+    return result.then(void 0, recover);
+  }
+  return result;
 }
-
-function defaultCreatePlaceholderFunction(props, state, onClickPlaceholder) {
-  return /*#__PURE__*/React.createElement(PlayerPlaceholder, {
+function _finallyRethrows(body, finalizer) {
+  try {
+    var result = body();
+  } catch (e) {
+    return finalizer(true, e);
+  }
+  if (result && result.then) {
+    return result.then(finalizer.bind(null, false), finalizer.bind(null, true));
+  }
+  return finalizer(false, result);
+}
+window.bytearkPlayer = window.bytearkPlayer || {};
+var defaultCreatePlaceholderFunction = function defaultCreatePlaceholderFunction(props, state, onClickPlaceholder) {
+  return React__default["default"].createElement(PlayerPlaceholder, {
     aspectRatio: props.aspectRatio,
@@ -358,12 +311,12 @@ onClick: onClickPlaceholder,
   });
-}
-function defaultCreatePlayerFunction(videoNode, options, onReady) {
-  if (bytearkPlayer.initAsync) {
-    return bytearkPlayer.initAsync(videoNode, options, onReady);
+};
+var defaultCreatePlayerFunction = function defaultCreatePlayerFunction(videoNode, options, onReady) {
+  if (window.bytearkPlayer.initAsync) {
+    return window.bytearkPlayer.initAsync(videoNode, options, onReady);
   }
-  return bytearkPlayer.init(videoNode, options, onReady);
-}
+  return window.bytearkPlayer.init(videoNode, options, onReady);
+};
 var defaultSetupPlayerFunction = function defaultSetupPlayerFunction(options, loaderFunction, loadPluginOptions) {
   try {
-    return Promise.resolve(bytearkPlayer.setup(options, loaderFunction, loadPluginOptions)).then(function () {});
+    return Promise.resolve(window.bytearkPlayer.setup(options, loaderFunction, loadPluginOptions)).then(function () {});
   } catch (e) {
@@ -373,160 +326,149 @@ return Promise.reject(e);
 };
-var ByteArkPlayerContainer = /*#__PURE__*/function (_React$Component) {
-  _inheritsLoose(ByteArkPlayerContainer, _React$Component);
-  function ByteArkPlayerContainer(props) {
-    var _this;
-    _this = _React$Component.call(this, props) || this;
-    _this.onPlayerLoaded = function () {
-      if (_this.props.onPlayerLoaded) {
-        try {
-          _this.props.onPlayerLoaded();
-        } catch (err) {
-          console.error(err);
-        }
+function ByteArkPlayerContainer(props) {
+  var _props$createPlacehol = props.createPlaceholderFunction,
+    createPlaceholderFunction = _props$createPlacehol === void 0 ? defaultCreatePlaceholderFunction : _props$createPlacehol,
+    _props$createPlayerFu = props.createPlayerFunction,
+    createPlayerFunction = _props$createPlayerFu === void 0 ? defaultCreatePlayerFunction : _props$createPlayerFu,
+    _props$lazyload = props.lazyload,
+    lazyload = _props$lazyload === void 0 ? false : _props$lazyload,
+    _props$playerEndpoint = props.playerEndpoint,
+    playerEndpoint = _props$playerEndpoint === void 0 ? 'https://byteark-sdk.cdn.byteark.com/player-core' : _props$playerEndpoint,
+    _props$playerServerEn = props.playerServerEndpoint,
+    playerServerEndpoint = _props$playerServerEn === void 0 ? 'https://player.byteark.com/players' : _props$playerServerEn,
+    _props$playerVersion = props.playerVersion,
+    playerVersion = _props$playerVersion === void 0 ? 'v2' : _props$playerVersion,
+    _props$playerJsFileNa = props.playerJsFileName,
+    playerJsFileName = _props$playerJsFileNa === void 0 ? 'byteark-player.min.js' : _props$playerJsFileNa,
+    _props$playerCssFileN = props.playerCssFileName,
+    playerCssFileName = _props$playerCssFileN === void 0 ? 'byteark-player.min.css' : _props$playerCssFileN,
+    _props$setupPlayerFun = props.setupPlayerFunction,
+    setupPlayerFunction = _props$setupPlayerFun === void 0 ? defaultSetupPlayerFunction : _props$setupPlayerFun,
+    rest = _objectWithoutPropertiesLoose(props, _excluded);
+  var _useState = React.useState(null),
+    player = _useState[0],
+    setPlayer = _useState[1];
+  var _useState2 = React.useState(false),
+    initializeInProgress = _useState2[0],
+    setInitializeInProgress = _useState2[1];
+  var _useState3 = React.useState({
+      mounted: false,
+      loaded: false,
+      ready: false,
+      error: null,
+      showPlaceholder: true
+    }),
+    playerState = _useState3[0],
+    setPlayerState = _useState3[1];
+  var videoRef = React.useRef(null);
+  var audioRef = React.useRef(null);
+  // constructor(props) {
+  //   this.onClickPlaceholder = this.onClickPlaceholder.bind(this)
+  // }
+  // player() {
+  //   return this.player
+  // }
+  //
+  // loaded() {
+  //   return playerState.loaded
+  // }
+  //
+  // ready() {
+  //   return playerState.ready
+  // }
+  //
+  // error() {
+  //   return playerState.error
+  // }
+  var onPlayerLoaded = function onPlayerLoaded() {
+    if (typeof rest.onPlayerLoaded === 'function') {
+      try {
+        rest.onPlayerLoaded();
+      } catch (err) {
+        console.error(err);
       }
-    };
-    _this.onPlayerLoadError = function (error, originalError) {
-      _this.setState({
+    }
+  };
+  var onPlayerLoadError = function onPlayerLoadError(error, originalError) {
+    setPlayerState(function (prevState) {
+      return _extends({}, prevState, {
         error: error
       });
-      if (_this.props.onPlayerLoadError) {
-        try {
-          _this.props.onPlayerLoadError(error, originalError);
-        } catch (err) {
-          console.error(err);
-        }
+    });
+    if (typeof rest.onPlayerLoadError === 'function') {
+      try {
+        rest.onPlayerLoadError(error, originalError);
+      } catch (err) {
+        console.error(err);
       }
-    };
-    _this.onPlayerSetup = function () {
-      _this.setState({
+    }
+  };
+  var onPlayerSetup = function onPlayerSetup() {
+    setPlayerState(function (prevState) {
+      return _extends({}, prevState, {
         loaded: true
       });
-      if (_this.props.onPlayerSetup) {
-        _this.props.onPlayerSetup();
-      }
-    };
-    _this.onPlayerSetupError = function (error, originalError) {
-      _this.setState({
+    });
+    if (rest.onPlayerSetup) {
+      rest.onPlayerSetup();
+    }
+  };
+  var onPlayerSetupError = function onPlayerSetupError(error, originalError) {
+    setPlayerState(function (prevState) {
+      return _extends({}, prevState, {
         error: error
       });
-      if (_this.props.onPlayerSetupError) {
-        try {
-          _this.props.onPlayerSetupError(error, originalError);
-        } catch (err) {
-          console.error(err);
-        }
+    });
+    if (rest.onPlayerSetupError) {
+      try {
+        rest.onPlayerSetupError(error, originalError);
+      } catch (err) {
+        console.error(err);
       }
-    };
-    _this.onPlayerCreated = function () {
-      _this.setState({
+    }
+  };
+  var onPlayerCreated = function onPlayerCreated() {
+    setPlayerState(function (prevState) {
+      return _extends({}, prevState, {
         showPlaceholder: false
       });
-      if (_this.props.onPlayerCreated) {
-        _this.props.onPlayerCreated(_this.player);
-      }
-    };
-    _this.onReady = function () {
-      _this.setState({
+    });
+    if (rest.onPlayerCreated && player) {
+      rest.onPlayerCreated(player);
+    }
+  };
+  var onReady = function onReady() {
+    setPlayerState(function (prevState) {
+      return _extends({}, prevState, {
         ready: true
       });
-      if (_this.props.onReady) {
-        _this.props.onReady(_this.player);
-      }
-    };
-    _this.createPlayerInstance = function (resultOptions) {
-      try {
-        window.bytearkPlayer.isBrowserSupportDrm = isBrowserSupportDrm;
-        var createPlayerFunction = _this.props.createPlayerFunction || defaultCreatePlayerFunction;
-        return Promise.resolve(createPlayerFunction(_this.videoNode, resultOptions, _this.onReady)).then(function (_createPlayerFunction) {
-          _this.player = _createPlayerFunction;
-          _this.onPlayerCreated();
-        });
-      } catch (e) {
-        return Promise.reject(e);
-      }
-    };
-    _this.onVideoNodeCreated = function (node) {
-      _this.videoNode = node;
-    };
-    _this.player = null;
-    _this.state = {
-      mounted: false,
-      loaded: false,
-      ready: false,
-      error: null,
-      showPlaceholder: true
-    };
-    _this.onClickPlaceholder = _this.onClickPlaceholder.bind(_assertThisInitialized(_this));
-    return _this;
-  }
-  var _proto = ByteArkPlayerContainer.prototype;
-  _proto.player = function player() {
-    return this.player;
-  };
-  _proto.loaded = function loaded() {
-    return this.state.loaded;
-  };
-  _proto.ready = function ready() {
-    return this.state.ready;
-  };
-  _proto.error = function error() {
-    return this.state.error;
-  };
-  _proto.componentDidMount = function componentDidMount() {
-    if (!this.props.lazyload) {
-      this.initializePlayer();
+    });
+    if (rest.onReady && player) {
+      rest.onReady(player);
     }
   };
-  _proto.initializePlayer = function initializePlayer() {
-    try {
-      var _this2 = this;
-      var isClient = _this2.canUserDOM();
-      if (!isClient) {
-        return Promise.resolve();
-      }
-      if (_this2.initializeInProgress) {
-        return Promise.resolve();
-      }
-      _this2.initializeInProgress = true;
-      return Promise.resolve(_catch(function () {
-        return Promise.resolve(_this2.loadPlayerResources()).then(function () {
-          return Promise.resolve(_this2.setupOptions()).then(function (resultOptions) {
-            return Promise.resolve(_this2.setupPlayer(resultOptions)).then(function () {
-              return Promise.resolve(_this2.createPlayerInstance(resultOptions)).then(function () {
-                _this2.initializeInProgress = false;
-              });
-            });
-          });
-        });
-      }, function (err) {
-        _this2.initializeInProgress = false;
-        throw err;
-      }));
-    } catch (e) {
-      return Promise.reject(e);
-    }
+  var checkIfCanUseDOM = function checkIfCanUseDOM() {
+    return typeof window !== 'undefined' && window.document && window.document.createElement !== undefined;
   };
-  _proto.loadPlayerResources = function loadPlayerResources() {
+  var loadPlayerResources = function loadPlayerResources() {
     try {
-      var _temp2 = function _temp2(_result2) {
-        if (_exit) return _result2;
-        _this3.onPlayerLoaded();
+      var _temp2 = function _temp2(_result) {
+        if (_exit) return _result;
+        onPlayerLoaded();
       };
-      var _exit = false;
-      var _this3 = this;
+      var _exit;
       var _temp = _catch(function () {
         var promises = [];
-        if (_this3.props.playerSlugId) {
-          if (_this3.props.playerJsFileName) {
-            promises.push(loadScriptOrStyle("byteark-player-script-" + _this3.props.playerSlugId, _this3.props.playerServerEndpoint + "/" + _this3.props.playerSlugId + "/libraries/" + _this3.props.playerJsFileName, 'script'));
+        if (rest.playerSlugId) {
+          if (playerJsFileName) {
+            promises.push(loadScriptOrStyle("byteark-player-script-" + rest.playerSlugId, playerServerEndpoint + "/" + rest.playerSlugId + "/libraries/" + playerJsFileName, 'script'));
           }
-          if (_this3.props.playerCssFileName) {
-            promises.push(loadScriptOrStyle("byteark-player-style-" + _this3.props.playerSlugId, _this3.props.playerServerEndpoint + "/" + _this3.props.playerSlugId + "/libraries/" + _this3.props.playerCssFileName, 'style'));
+          if (playerCssFileName) {
+            promises.push(loadScriptOrStyle("byteark-player-style-" + rest.playerSlugId, playerServerEndpoint + "/" + rest.playerSlugId + "/libraries/" + playerCssFileName, 'style'));
           }
         } else {
-          if (_this3.props.playerJsFileName) {
-            promises.push(loadScriptOrStyle("byteark-player-script-" + _this3.props.playerVersion, _this3.props.playerEndpoint + "/" + _this3.props.playerVersion + "/" + _this3.props.playerJsFileName, 'script'));
+          if (playerJsFileName) {
+            promises.push(loadScriptOrStyle("byteark-player-script-" + playerVersion, playerEndpoint + "/" + playerVersion + "/" + playerJsFileName, 'script'));
           }
-          if (_this3.props.playerCssFileName) {
-            promises.push(loadScriptOrStyle("byteark-player-style-" + _this3.props.playerVersion, _this3.props.playerEndpoint + "/" + _this3.props.playerVersion + "/" + _this3.props.playerCssFileName, 'style'));
+          if (playerCssFileName) {
+            promises.push(loadScriptOrStyle("byteark-player-style-" + playerVersion, playerEndpoint + "/" + playerVersion + "/" + playerCssFileName, 'style'));
           }
@@ -536,3 +478,3 @@ }
       }, function (originalError) {
-        _this3.onPlayerLoadError({
+        onPlayerLoadError({
           code: 'ERROR_BYTEARK_PLAYER_REACT_100001',
@@ -542,2 +484,3 @@ message: 'Sorry, something wrong when loading the video player.',
         }, originalError);
+        // Rethrow to stop following statements.
         throw originalError;
@@ -550,8 +493,7 @@ });
   };
-  _proto.setupOptions = function setupOptions() {
+  var setupOptions = function setupOptions() {
     try {
-      var _this4 = this;
       return Promise.resolve(_catch(function () {
-        return Promise.resolve(window.bytearkPlayer.canAutoplay(_this4.props)).then(function (autoplayResult) {
-          var resultPlayerOptions = _extends({}, _this4.props, {
+        return Promise.resolve(window.bytearkPlayer.canAutoplay(props)).then(function (autoplayResult) {
+          var resultPlayerOptions = _extends({}, props, {
             autoplayResult_: autoplayResult
@@ -562,3 +504,3 @@ });
       }, function (originalError) {
-        _this4.onPlayerSetupError({
+        onPlayerSetupError({
           code: 'ERROR_BYTEARK_PLAYER_REACT_100001',
@@ -568,2 +510,3 @@ message: 'Sorry, something wrong when loading the video player.',
         }, originalError);
+        // Rethrow to stop following statements.
         throw originalError;
@@ -575,15 +518,10 @@ }));
   };
-  _proto.setupPlayer = function setupPlayer(resultOptions) {
+  var setupPlayer = function setupPlayer(resultOptions) {
     try {
-      var _this5 = this;
-      if (_this5.setupPlayerPromise) {
-        return Promise.resolve(_this5.setupPlayerPromise);
-      }
       return Promise.resolve(_catch(function () {
-        var setupPlayerFunction = _this5.props.setupPlayerFunction || defaultSetupPlayerFunction;
         return Promise.resolve(setupPlayerFunction(resultOptions, loadScriptOrStyle)).then(function () {
-          _this5.onPlayerSetup();
+          onPlayerSetup();
         });
       }, function (originalError) {
-        _this5.onPlayerSetupError({
+        onPlayerSetupError({
           code: 'ERROR_BYTEARK_PLAYER_REACT_100001',
@@ -593,2 +531,3 @@ message: 'Sorry, something wrong when loading the video player.',
         }, originalError);
+        // Rethrow to stop following statements.
         throw originalError;
@@ -600,93 +539,139 @@ }));
   };
-  _proto.componentWillUnmount = function componentWillUnmount() {
-    if (this.player) {
-      this.player.dispose();
-      this.setState({
-        ready: false
+  var createPlayerInstance = function createPlayerInstance(resultOptions) {
+    try {
+      var _videoRef$current;
+      if (videoRef.current === null && audioRef.current === null) {
+        return Promise.resolve();
+      }
+      window.bytearkPlayer.isBrowserSupportDrm = isBrowserSupportDrm;
+      return Promise.resolve(createPlayerFunction((_videoRef$current = videoRef.current) != null ? _videoRef$current : audioRef.current, resultOptions, onReady)).then(function (createdPlayer) {
+        setPlayer(createdPlayer);
+        onPlayerCreated();
       });
+    } catch (e) {
+      return Promise.reject(e);
     }
   };
-  _proto.render = function render() {
-    return /*#__PURE__*/React.createElement("div", {
-      style: {
-        position: 'relative',
-        height: '100%'
+  var initializePlayer = function initializePlayer() {
+    try {
+      // We'll not create a real player on server-side rendering.
+      var isClient = checkIfCanUseDOM();
+      if (!isClient) {
+        return Promise.resolve();
       }
-    }, this.state.showPlaceholder ? this.renderPlaceholder() : null, /*#__PURE__*/React.createElement("div", {
-      style: {
-        display: this.state.showPlaceholder || !this.state.loaded ? 'none' : 'initial'
+      // Prevent double initialize
+      if (initializeInProgress) {
+        return Promise.resolve();
       }
-    }, this.state.error ? null : this.renderPlayer()));
+      setInitializeInProgress(true);
+      var _temp3 = _finallyRethrows(function () {
+        return _catch(function () {
+          return Promise.resolve(loadPlayerResources()).then(function () {
+            return Promise.resolve(setupOptions()).then(function (resultOptions) {
+              return Promise.resolve(setupPlayer(resultOptions)).then(function () {
+                return Promise.resolve(createPlayerInstance(resultOptions)).then(function () {});
+              });
+            });
+          });
+        }, function (err) {
+          console.error(err);
+        });
+      }, function (_wasThrown, _result3) {
+        setInitializeInProgress(false);
+        if (_wasThrown) throw _result3;
+        return _result3;
+      });
+      return Promise.resolve(_temp3 && _temp3.then ? _temp3.then(function () {}) : void 0);
+    } catch (e) {
+      return Promise.reject(e);
+    }
   };
-  _proto.renderPlaceholder = function renderPlaceholder() {
-    var createPlaceholderFunction = this.props.createPlaceholderFunction || defaultCreatePlaceholderFunction;
-    return createPlaceholderFunction(this.props, this.state, this.onClickPlaceholder);
+  var onClickPlaceholder = function onClickPlaceholder() {
+    return Promise.resolve(initializePlayer()).then(function () {
+      setPlayerState(function (prevState) {
+        return _extends({}, prevState, {
+          showPlaceholder: false
+        });
+      });
+      if (player) {
+        player.play();
+      }
+    });
   };
-  _proto.renderPlayer = function renderPlayer() {
+  var renderPlaceholder = function renderPlaceholder() {
+    return createPlaceholderFunction(props, {
+      error: playerState.error,
+      loaded: playerState.loaded
+    }, onClickPlaceholder);
+  };
+  var renderPlayer = function renderPlayer() {
+    // Video element should be there since the start, but hidden.
     var videoStyle = {};
     var videoClasses = '';
-    if (this.props.className) {
-      videoClasses = this.props.className;
+    if (rest.className) {
+      videoClasses = rest.className;
     }
-    if (this.props.fill === 'fluid') {
-      if (this.props.aspectRatio === '4:3') {
+    if (rest.fluid) {
+      if (rest.aspectRatio === '4:3') {
         videoClasses += ' vjs-4-3';
       }
-      if (this.props.aspectRatio === '16:9') {
+      if (rest.aspectRatio === '16:9') {
         videoClasses += ' vjs-16-9';
       }
     }
-    if (this.props.audioOnlyMode) {
-      return /*#__PURE__*/React.createElement("audio", {
-        playsInline: true,
-        ref: this.onVideoNodeCreated,
-        className: "video-js " + this.props.className,
+    if (rest.audioOnlyMode) {
+      return React__default["default"].createElement("audio", {
+        ref: audioRef,
+        className: "video-js " + rest.className,
         style: videoStyle
       });
     }
-    return /*#__PURE__*/React.createElement("video", {
+    return React__default["default"].createElement("video", {
       playsInline: true,
-      ref: this.onVideoNodeCreated,
-      className: "video-js " + videoClasses,
+      ref: videoRef,
+      className: "video-js " + videoClasses + " " + rest.className,
       style: videoStyle
     });
   };
-  _proto.componentDidUpdate = function componentDidUpdate(prevProps, prevState) {
-    if (this.player) {
-      updatePlayerProps(this.player, this.props, prevProps);
-    }
-  };
-  _proto.onClickPlaceholder = function onClickPlaceholder() {
-    try {
-      var _this6 = this;
-      return Promise.resolve(_this6.initializePlayer()).then(function () {
-        _this6.setState({
-          showPlaceholder: false
+  React.useEffect(function () {
+    var initIfNotLazyload = function initIfNotLazyload() {
+      try {
+        var _temp4 = function () {
+          if (!lazyload) {
+            return Promise.resolve(initializePlayer()).then(function () {});
+          }
+        }();
+        return Promise.resolve(_temp4 && _temp4.then ? _temp4.then(function () {}) : void 0);
+      } catch (e) {
+        return Promise.reject(e);
+      }
+    };
+    initIfNotLazyload();
+    return function () {
+      if (player) {
+        player.dispose();
+        setPlayerState(function (prevState) {
+          return _extends({}, prevState, {
+            ready: false
+          });
         });
-        _this6.player.play();
-      });
-    } catch (e) {
-      return Promise.reject(e);
+      }
+    };
+  }, []);
+  // useEffect(() => {
+  //   if (player) {
+  //     updatePlayerProps(player, props)
+  //   }
+  // }, [player, props])
+  return React__default["default"].createElement("div", {
+    style: {
+      position: 'relative',
+      height: '100%'
     }
-  };
-  _proto.canUserDOM = function canUserDOM() {
-    return typeof window !== 'undefined' && window.document && window.document.createElement;
-  };
-  return ByteArkPlayerContainer;
-}(React.Component);
-ByteArkPlayerContainer.defaultProps = {
-  autoplay: true,
-  controls: true,
-  autoplayadsmuted: false,
-  createPlaceholderFunction: defaultCreatePlaceholderFunction,
-  createPlayerFunction: defaultCreatePlayerFunction,
-  setupPlayerFunction: defaultSetupPlayerFunction,
-  playerEndpoint: 'https://byteark-sdk.cdn.byteark.com/player-core',
-  playerServerEndpoint: 'https://player.byteark.com/players',
-  playerVersion: 'v2',
-  playerJsFileName: 'byteark-player.min.js',
-  playerCssFileName: 'byteark-player.min.css',
-  playsinline: true,
-  techCanOverridePoster: false
-};
+  }, playerState.showPlaceholder ? renderPlaceholder() : null, React__default["default"].createElement("div", {
+    style: {
+      display: playerState.showPlaceholder || !playerState.loaded ? 'none' : 'initial'
+    }
+  }, playerState.error ? null : renderPlayer()));
+}
 
@@ -693,0 +678,0 @@ exports.ByteArkPlayerContainer = ByteArkPlayerContainer;

package.json

 {
   "name": "byteark-player-react",
-  "version": "2.0.1",
+  "version": "2.1.0-beta.1",
   "description": "ByteArk Player Container for React",
@@ -9,10 +9,11 @@ "author": "byteark",
   "main": "dist/index.js",
-  "module": "dist/index.modern.js",
-  "source": "src/index.js",
+  "module": "dist/index.modern.mjs",
+  "types": "types.d.ts",
+  "source": "src/index.ts",
   "engines": {
-    "node": ">=10"
+    "node": ">=16"
   },
   "scripts": {
-    "build": "microbundle-crl --no-compress --format modern,cjs",
-    "start": "microbundle-crl watch --no-compress --format modern,cjs",
+    "build": "microbundle --no-compress --format modern,cjs --jsx React.createElement",
+    "start": "microbundle watch --no-compress --format modern,cjs --jsx React.createElement",
     "prepublish": "run-s build",
@@ -23,3 +24,3 @@ "test": "run-s test:unit test:lint test:build",
     "test:unit": "cross-env CI=1 react-scripts test --env=jsdom",
-    "test:watch": "react-scripts test --env=jsdom",
+    "test:watch": "vite test --env=jsdom",
     "predeploy": "cd example && npm install && npm run build",
@@ -32,32 +33,34 @@ "deploy": "gh-pages -d example/build"
   "devDependencies": {
-    "babel-eslint": "^10.1.0",
+    "@types/react": "^18.2.59",
+    "@types/react-dom": "^18.2.19",
+    "@types/video.js": "^7.3.56",
+    "@typescript-eslint/parser": "^5.62.0",
+    "@vitejs/plugin-react": "^4.2.1",
     "cross-env": "^7.0.3",
-    "eslint": "^8.50.0",
-    "eslint-config-prettier": "^9.0.0",
-    "eslint-config-react-app": "^7.0.1",
+    "eslint": "^8.57.0",
+    "eslint-config-prettier": "^9.1.0",
     "eslint-config-standard": "^17.1.0",
     "eslint-config-standard-react": "^13.0.0",
-    "eslint-plugin-import": "^2.28.1",
+    "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-prettier": "^5.0.0",
+    "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-promise": "^6.1.1",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-standard": "^5.0.0",
-    "gh-pages": "^6.0.0",
-    "microbundle-crl": "^0.13.11",
+    "gh-pages": "^6.1.1",
+    "microbundle": "^0.15.1",
     "npm-run-all": "^4.1.5",
     "postcss-flexbugs-fixes": "^5.0.2",
-    "postcss-loader": "^7.3.3",
+    "postcss-loader": "^8.1.0",
     "postcss-normalize": "^10.0.1",
-    "prettier": "^3.0.3",
+    "prettier": "^3.2.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-scripts": "^5.0.1"
+    "typescript": "^5.3.3",
+    "vite": "^5.1.4",
+    "vite-tsconfig-paths": "^4.3.1"
   },
   "files": [
     "dist"
-  ],
-  "dependencies": {
-    "lodash.isequal": "^4.5.0"
-  }
+  ]
 }

README.md

@@ -58,3 +58,3 @@ # ByteArk Player Container for React
     aspectRatio: '16:9',
-    poster: 'https://qoder.byteark.com/images/video-frames/1/GU/cg/1GUcgd3XwsmD-large.jpg'
+    poster: 'https://qoder.byteark.com/images/video-frames/1/GU/cg/1GUcgd3XwsmD-large.jpg',
     sources: {
@@ -61,0 +61,0 @@ src: 'https://video.example.com/path/to/video/playlist.m3u8',

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

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

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

Improved metrics

Dependency count

1

decreased by-50%

Number of package files

20

increased by233.33%

Worsened metrics

Total package byte prevSize

138716

decreased by-23.96%

Dev dependency count

28

increased by21.74%

Lines of code

1199

decreased by-9.3%

Number of low quality alerts

2

increased by100%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• - Removedlodash.isequal@^4.5.0

• - Removedlodash.isequal@4.5.0(transitive)