byteark-player-react - npm Package Compare versions

Comparing version 1.0.0-beta3 to 1.0.0-beta4

dist/index.js

@@ -5,2 +5,20 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
 
+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);
+}
+
 function _inheritsLoose(subClass, superClass) {
@@ -242,5 +260,13 @@ subClass.prototype = Object.create(superClass.prototype);
 function defaultCreatePlayerFunction(videoNode, options, onReady) {
-  return bytearkPlayer(videoNode, options, onReady);
+  return bytearkPlayer.init(videoNode, options, onReady);
 }
 
+var defautlSetupPlayerFunction = function defautlSetupPlayerFunction(options, loaderFunction, loadPluginOptions) {
+  try {
+    return Promise.resolve(bytearkPlayer.setup(options, loaderFunction, loadPluginOptions)).then(function () {});
+  } catch (e) {
+    return Promise.reject(e);
+  }
+};
+
 var ByteArkPlayerContainer = /*#__PURE__*/function (_React$Component) {
@@ -255,6 +281,2 @@ _inheritsLoose(ByteArkPlayerContainer, _React$Component);
     _this.onPlayerLoaded = function () {
-      _this.setState({
-        loaded: true
-      });
-
       if (_this.props.onPlayerLoaded) {
@@ -283,2 +305,26 @@ try {
 
+    _this.onPlayerSetup = function () {
+      _this.setState({
+        loaded: true
+      });
+
+      if (_this.props.onPlayerSetup) {
+        _this.props.onPlayerSetup();
+      }
+    };
+
+    _this.onPlayerSetupError = function (error, originalError) {
+      _this.setState({
+        error: error
+      });
+
+      if (_this.props.onPlayerSetupError) {
+        try {
+          _this.props.onPlayerSetupError(error, originalError);
+        } catch (err) {
+          console.error(err);
+        }
+      }
+    };
+
     _this.onPlayerCreated = function () {
@@ -299,3 +345,5 @@ if (_this.props.onPlayerCreated) {
         return Promise.resolve(_this.loadPlayerResources()).then(function () {
-          return Promise.resolve(_this.createPlayerInstance()).then(function () {});
+          return Promise.resolve(_this.setupPlayer()).then(function () {
+            return Promise.resolve(_this.createPlayerInstance()).then(function () {});
+          });
         });
@@ -308,5 +356,17 @@ } catch (e) {
     _this.createPlayerInstance = function () {
-      _this.player = _this.props.createPlayerFunction(_this.videoNode, _this.props, _this.onReady);
+      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
+          });
 
-      _this.onPlayerCreated();
+          _this.player = _this.props.createPlayerFunction(_this.videoNode, options, _this.onReady);
+
+          _this.onPlayerCreated();
+        });
+      } catch (e) {
+        return Promise.reject(e);
+      }
     };
@@ -385,2 +445,24 @@
 
+  _proto.setupPlayer = function setupPlayer() {
+    try {
+      var _this5 = this;
+
+      return Promise.resolve(_catch(function () {
+        return Promise.resolve(_this5.props.setupPlayerFunction(_this5.props, loadScriptOrStyle)).then(function () {
+          _this5.onPlayerSetup();
+        });
+      }, function (originalError) {
+        _this5.onPlayerSetupError({
+          code: 'ERROR_BYTEARK_PLAYER_REACT_100001',
+          message: 'Sorry, something wrong when loading the video player.',
+          messageSecondary: 'Please refresh the page to try again.'
+        }, originalError);
+
+        throw originalError;
+      }));
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+
   _proto.componentWillUnmount = function componentWillUnmount() {
@@ -438,6 +520,8 @@ if (this.player) {
   controls: true,
+  autoplayadsmuted: false,
   createPlaceholderFunction: defaultCreatePlaceholderFunction,
   createPlayerFunction: defaultCreatePlayerFunction,
-  playerEndpoint: 'https://byteark-sdk.cdn.byteark.com/player/',
-  playerVersion: 'v1',
+  setupPlayerFunction: defautlSetupPlayerFunction,
+  playerEndpoint: 'https://byteark-sdk.cdn.byteark.com/player-core/',
+  playerVersion: 'v2',
   playerJsFileName: 'byteark-player.min.js',
@@ -444,0 +528,0 @@ playerCssFileName: 'byteark-player.min.css',

dist/index.modern.js

 import React from 'react';
 
+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);
+}
+
 function _inheritsLoose(subClass, superClass) {
@@ -239,5 +257,13 @@ subClass.prototype = Object.create(superClass.prototype);
 function defaultCreatePlayerFunction(videoNode, options, onReady) {
-  return bytearkPlayer(videoNode, options, onReady);
+  return bytearkPlayer.init(videoNode, options, onReady);
 }
 
+var defautlSetupPlayerFunction = function defautlSetupPlayerFunction(options, loaderFunction, loadPluginOptions) {
+  try {
+    return Promise.resolve(bytearkPlayer.setup(options, loaderFunction, loadPluginOptions)).then(function () {});
+  } catch (e) {
+    return Promise.reject(e);
+  }
+};
+
 var ByteArkPlayerContainer = /*#__PURE__*/function (_React$Component) {
@@ -252,6 +278,2 @@ _inheritsLoose(ByteArkPlayerContainer, _React$Component);
     _this.onPlayerLoaded = function () {
-      _this.setState({
-        loaded: true
-      });
-
       if (_this.props.onPlayerLoaded) {
@@ -280,2 +302,26 @@ try {
 
+    _this.onPlayerSetup = function () {
+      _this.setState({
+        loaded: true
+      });
+
+      if (_this.props.onPlayerSetup) {
+        _this.props.onPlayerSetup();
+      }
+    };
+
+    _this.onPlayerSetupError = function (error, originalError) {
+      _this.setState({
+        error: error
+      });
+
+      if (_this.props.onPlayerSetupError) {
+        try {
+          _this.props.onPlayerSetupError(error, originalError);
+        } catch (err) {
+          console.error(err);
+        }
+      }
+    };
+
     _this.onPlayerCreated = function () {
@@ -296,3 +342,5 @@ if (_this.props.onPlayerCreated) {
         return Promise.resolve(_this.loadPlayerResources()).then(function () {
-          return Promise.resolve(_this.createPlayerInstance()).then(function () {});
+          return Promise.resolve(_this.setupPlayer()).then(function () {
+            return Promise.resolve(_this.createPlayerInstance()).then(function () {});
+          });
         });
@@ -305,5 +353,17 @@ } catch (e) {
     _this.createPlayerInstance = function () {
-      _this.player = _this.props.createPlayerFunction(_this.videoNode, _this.props, _this.onReady);
+      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
+          });
 
-      _this.onPlayerCreated();
+          _this.player = _this.props.createPlayerFunction(_this.videoNode, options, _this.onReady);
+
+          _this.onPlayerCreated();
+        });
+      } catch (e) {
+        return Promise.reject(e);
+      }
     };
@@ -382,2 +442,24 @@
 
+  _proto.setupPlayer = function setupPlayer() {
+    try {
+      var _this5 = this;
+
+      return Promise.resolve(_catch(function () {
+        return Promise.resolve(_this5.props.setupPlayerFunction(_this5.props, loadScriptOrStyle)).then(function () {
+          _this5.onPlayerSetup();
+        });
+      }, function (originalError) {
+        _this5.onPlayerSetupError({
+          code: 'ERROR_BYTEARK_PLAYER_REACT_100001',
+          message: 'Sorry, something wrong when loading the video player.',
+          messageSecondary: 'Please refresh the page to try again.'
+        }, originalError);
+
+        throw originalError;
+      }));
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+
   _proto.componentWillUnmount = function componentWillUnmount() {
@@ -435,6 +517,8 @@ if (this.player) {
   controls: true,
+  autoplayadsmuted: false,
   createPlaceholderFunction: defaultCreatePlaceholderFunction,
   createPlayerFunction: defaultCreatePlayerFunction,
-  playerEndpoint: 'https://byteark-sdk.cdn.byteark.com/player/',
-  playerVersion: 'v1',
+  setupPlayerFunction: defautlSetupPlayerFunction,
+  playerEndpoint: 'https://byteark-sdk.cdn.byteark.com/player-core/',
+  playerVersion: 'v2',
   playerJsFileName: 'byteark-player.min.js',
@@ -441,0 +525,0 @@ playerCssFileName: 'byteark-player.min.css',

package.json

 {
   "name": "byteark-player-react",
-  "version": "1.0.0-beta3",
+  "version": "1.0.0-beta4",
   "description": "ByteArk Player Container for React",
@@ -5,0 +5,0 @@ "author": "byteark",

README.md

@@ -5,2 +5,18 @@ # ByteArk Player Container for React
 
+* [Demo](#demo)
+* [Features](#features)
+* [Installation](#installation)
+* [Usages](#usages)
+* [Basic Props](#basic-props)
+    * [Source Object](#source-object)
+* [Callback Props](#callback-props)
+* [API Methods](#api-methods)
+* [Advance Usages](#advance-usages)
+    * [Controlling Players](#controlling-players)
+    * [Request Media/Encryption with credentials](#request-media-encryption-with-credentials)
+
+## Demo
+
+You can try on [the demo page](https://byteark.github.io/byteark-player-react).
+
 ## Features
@@ -37,2 +53,4 @@
     fluid: true,
+    aspectRatio: '16:9',
+    poster: 'https://qoder.byteark.com/images/video-frames/1/GU/cg/1GUcgd3XwsmD-large.jpg'
     sources: {
@@ -42,3 +60,5 @@ src: 'https://video.example.com/path/to/video/playlist.m3u8',
       // Optional
-      title: 'Video Title'
+      title: 'Video Title',
+      videoId: 'RI2PimuHxDXw',
+      poster: 'https://qoder.byteark.com/images/video-frames/1/GU/cg/1GUcgd3XwsmD-large.jpg'
     }
@@ -52,2 +72,30 @@ }
 
+If the video will be displayed on the fixed-size container,
+you may want to use fill mode instead.
+
+```jsx
+import React from 'react'
+import { render } from 'react-dom'
+import { ByteArkPlayerContainer } from 'byteark-player-react'
+
+const App = () => {
+  const playerOptions = {
+    autoplay: true,
+    fill: true,
+    poster: 'https://qoder.byteark.com/images/video-frames/1/GU/cg/1GUcgd3XwsmD-large.jpg'
+    sources: {
+      src: 'https://video.example.com/path/to/video/playlist.m3u8',
+      type: 'application/x-mpegURL',
+      // Optional
+      title: 'Video Title',
+      videoId: 'RI2PimuHxDXw',
+      poster: 'https://qoder.byteark.com/images/video-frames/1/GU/cg/1GUcgd3XwsmD-large.jpg'
+    }
+  }
+  return <ByteArkPlayerContainer {...playerOptions} />
+}
+
+render(<App />, document.getElementById('root'))
+```
+
 ## Basic Props
@@ -76,11 +124,18 @@
 
-### Source Props
+You can also use other props not listed here,
+but appear as [VideoJS's options](https://docs.videojs.com/tutorial-options.html#playbackrates).
+However, changing props will not effective after the player is created.
 
-The `sources` object has 2 fields:
+### Source Object
 
-| Name | Type   | Description         |
-|------|--------|---------------------|
-| src  | String | URL to the video.   |
-| type | String | Video content type. |
+The `sources` object has 2 required fields, and more optional field:
 
+| Name    | Type   | Description                            |
+|---------|--------|----------------------------------------|
+| src     | String | URL to the video.                      |
+| type    | String | Video content type.                    |
+| title   | String | Video title to display on the player.  |
+| videoId | String | Video's ID, usaully used on Analytics. |
+| poster  | String | Poster image URL for the video.        |
+
 To provide multiple version of sources, you can use array of source objects.
@@ -112,4 +167,116 @@
 
+## Methods
+
+### `getPlayer()`
+
+Return a player instance, if it is created.
+
+## Advance Usages
+
+### Controlling Players
+
+You may access the player directly via `getPlayer()` method,
+or using the player instance that sent from `onReady` callback.
+
+```jsx
+// This following example allows user to play/pause the video playback
+// from custom buttons outside.
+
+import React from 'react'
+import { render } from 'react-dom'
+import { ByteArkPlayerContainer } from 'byteark-player-react'
+
+const App = () => {
+  const playerOptions = {
+    autoplay: true,
+    fluid: true,
+    sources: {
+      src: 'https://video.example.com/path/to/video/playlist.m3u8',
+      type: 'application/x-mpegURL',
+      // Optional
+      title: 'Video Title'
+    }
+  }
+
+  let playerInstance = null
+  const onReady = (newPlayerInstance) => {
+    playerInstance = newPlayerInstance
+  }
+
+  return <div>
+    <ByteArkPlayerContainer {...playerOptions} />
+    <button onClick={() => playerInstance.play()}>Play</button>
+    <button onClick={() => playerInstance.pause()}>Pause</button>
+  </div>
+}
+
+render(<App />, document.getElementById('root'))
+```
+
+### Using VideoJS Plugins
+
+```jsx
+import React from 'react'
+import { render } from 'react-dom'
+import { ByteArkPlayerContainer } from 'byteark-player-react'
+
+const App = () => {
+  const playerOptions = {
+    autoplay: true,
+    fluid: true,
+    sources: {
+      src: 'https://video.example.com/path/to/video/playlist.m3u8',
+      type: 'application/x-mpegURL',
+      // Optional
+      title: 'Video Title'
+    }
+  }
+
+  const onReady = (newPlayerInstance) => {
+    // The player is ready! Initialize plugins here.
+  }
+
+  return <ByteArkPlayerContainer {...playerOptions} />
+}
+
+render(<App />, document.getElementById('root'))
+```
+
+### Request Media/Encryption with credentials
+
+```jsx
+import React from 'react'
+import { render } from 'react-dom'
+import { ByteArkPlayerContainer } from 'byteark-player-react'
+
+const App = () => {
+  const playerOptions = {
+    autoplay: true,
+    fluid: true,
+    sources: {
+      src: 'https://video.example.com/path/to/video/playlist.m3u8',
+      type: 'application/x-mpegURL',
+      // Optional
+      title: 'Video Title'
+    },
+    html5: {
+      hlsjs: {
+        xhrSetup: function(xhr, url) {
+          xhr.withCredentials = true
+        }
+      }
+    }
+  }
+
+  const onReady = (newPlayerInstance) => {
+    // The player is ready! Initialize plugins here.
+  }
+
+  return <ByteArkPlayerContainer {...playerOptions} />
+}
+
+
+
 ## License
 
 MIT © [ByteArk Co. Ltd.](https://github.com/byteark)

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

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

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

Total package byte prevSize

134717

increased by11.68%

Lines of code

889

increased by11.54%

Number of lines in readme file

277

increased by151.82%

Worsened metrics

Number of package files

6

decreased by-14.29%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes