opentok-react - npm Package Compare versions

Comparing version 0.9.0 to 0.10.0

dist/createSession.js

@@ -14,3 +14,4 @@ 'use strict';
       onConnect = _ref.onConnect,
-      onError = _ref.onError;
+      onError = _ref.onError,
+      options = _ref.options;
 
@@ -56,3 +57,3 @@ if (!apiKey) {
 
-  var session = OT.initSession(apiKey, sessionId);
+  var session = OT.initSession(apiKey, sessionId, options);
   session.on(eventHandlers);
@@ -59,0 +60,0 @@ session.connect(token, function (err) {

dist/OTPublisher.js

@@ -227,3 +227,7 @@ 'use strict';
 
-      return _react2.default.createElement('div', { ref: function ref(node) {
+      var _props = this.props,
+          className = _props.className,
+          style = _props.style;
+
+      return _react2.default.createElement('div', { className: className, style: style, ref: function ref(node) {
           _this6.node = node;
@@ -250,2 +254,4 @@ } });
   }),
+  className: _propTypes2.default.string,
+  style: _propTypes2.default.object, // eslint-disable-line react/forbid-prop-types
   properties: _propTypes2.default.object, // eslint-disable-line react/forbid-prop-types
@@ -260,2 +266,4 @@ eventHandlers: _propTypes2.default.objectOf(_propTypes2.default.func),
   session: null,
+  className: '',
+  style: {},
   properties: {},
@@ -262,0 +270,0 @@ eventHandlers: null,

dist/OTSession.js

@@ -82,3 +82,4 @@ 'use strict';
         onConnect: this.props.onConnect,
-        onError: this.props.onError
+        onError: this.props.onError,
+        options: this.props.options
       });
@@ -128,3 +129,4 @@
   onConnect: _propTypes2.default.func,
-  onError: _propTypes2.default.func
+  onError: _propTypes2.default.func,
+  options: _propTypes2.default.object
 };
@@ -135,3 +137,4 @@
   onConnect: null,
-  onError: null
+  onError: null,
+  options: {}
 };
@@ -138,0 +141,0 @@

dist/OTSubscriber.js

@@ -42,4 +42,7 @@ 'use strict';
       stream: props.stream || context.stream || null,
-      session: props.session || context.session || null
+      session: props.session || context.session || null,
+      currentRetryAttempt: 0
     };
+    _this.maxRetryAttempts = props.maxRetryAttempts || 5;
+    _this.retryAttemptTimeout = props.retryAttemptTimeout || 1000;
     return _this;
@@ -112,2 +115,8 @@ }
         }
+        if (err && _this3.props.retry && _this3.state.currentRetryAttempt < _this3.maxRetryAttempts - 1) {
+          // Error during subscribe function
+          _this3.handleRetrySubscriber();
+          // If there is a retry action, do we want to execute the onError props function?
+          // return;
+        }
         if (err && typeof _this3.props.onError === 'function') {
@@ -127,5 +136,20 @@ _this3.props.onError(err);
   }, {
+    key: 'handleRetrySubscriber',
+    value: function handleRetrySubscriber() {
+      var _this4 = this;
+
+      setTimeout(function () {
+        _this4.setState(function (state) {
+          return {
+            currentRetryAttempt: state.currentRetryAttempt + 1,
+            subscriber: null
+          };
+        });
+        _this4.createSubscriber();
+      }, this.retryAttemptTimeout);
+    }
+  }, {
     key: 'destroySubscriber',
     value: function destroySubscriber() {
-      var _this4 = this;
+      var _this5 = this;
 
@@ -139,3 +163,3 @@ var session = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.props.session;
           this.state.subscriber.once('destroyed', function () {
-            _this4.state.subscriber.off(_this4.props.eventHandlers);
+            _this5.state.subscriber.off(_this5.props.eventHandlers);
           });
@@ -152,6 +176,10 @@ }
     value: function render() {
-      var _this5 = this;
+      var _this6 = this;
 
-      return _react2.default.createElement('div', { ref: function ref(node) {
-          _this5.node = node;
+      var _props = this.props,
+          className = _props.className,
+          style = _props.style;
+
+      return _react2.default.createElement('div', { className: className, style: style, ref: function ref(node) {
+          _this6.node = node;
         } });
@@ -175,3 +203,8 @@ }
   }),
+  className: _propTypes2.default.string,
+  style: _propTypes2.default.object, // eslint-disable-line react/forbid-prop-types
   properties: _propTypes2.default.object, // eslint-disable-line react/forbid-prop-types
+  retry: _propTypes2.default.bool,
+  maxRetryAttempts: _propTypes2.default.number,
+  retryAttemptTimeout: _propTypes2.default.number,
   eventHandlers: _propTypes2.default.objectOf(_propTypes2.default.func),
@@ -185,3 +218,8 @@ onSubscribe: _propTypes2.default.func,
   session: null,
+  className: '',
+  style: {},
   properties: {},
+  retry: false,
+  maxRetryAttempts: 5,
+  retryAttemptTimeout: 1000,
   eventHandlers: null,
@@ -188,0 +226,0 @@ onSubscribe: null,

package.json

 {
   "name": "opentok-react",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "description": "React components for OpenTok.js",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

README.md

@@ -166,2 +166,3 @@ # opentok-react
 | token | String | Yes | TokBox token
+| options | Object | No | TokBox options [options](https://tokbox.com/developer/sdks/js/reference/OT.html#initSession)
 | eventHandlers | Object<Function> | No | Event handlers passed into [session.on](https://tokbox.com/developer/sdks/js/reference/Session.html#on)
@@ -254,2 +255,37 @@ | onConnect | Function() | No | Invoked when [session.connect](https://tokbox.com/developer/sdks/js/reference/Session.html#connect) successfully completes
 
+You can also get access to the `publisher` object by calling the `getPublisher` method using a [Ref](https://reactjs.org/docs/refs-and-the-dom.html). For example:
+```js
+class MyApp extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      publisher: null,
+    };
+    this.otPublisher = React.createRef();
+  }
+
+  componentDidMount() {
+    this.getPublisher();
+  }
+
+  getPublisher() {
+    if (this.otPublisher) {
+      this.setState({
+        publisher: this.otPublisher.current.getPublisher(),
+      });
+    }
+  }
+
+  render() {
+    return (
+      <OTSession apiKey="your-api-key" sessionId="your-session-id" token="your-session-token">
+        <OTPublisher
+          ref={this.otPublisher}
+        />
+      </OTSession>
+    );
+  }
+}
+```
+
 ### OTStreams Component
@@ -270,2 +306,5 @@
 | properties | Object | No | Properties passed into `session.subscribe`
+| retry | Boolean | No | Set true to retry the subscribe process in case of failure (Default: false)
+| maxRetryAttempts | Number | No | Max retry attempts in case of subscribe failure (Default: 5)
+| retryAttemptTimeout | Number | No | Timeout value between every subscribe retry attempt, expressed in ms (Default: 1000ms)
 | eventHandlers | Object&lt;Function&gt; | No | Event handlers passed into `subscriber.on`
@@ -343,2 +382,40 @@ | onSubscribe | Function() | No | Invoked when `session.subscribe` successfully completes
 
+You can also get access to the `subscriber` object by calling the `getSubscriber` method using a Ref. For example:
+
+```js
+class MyApp extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      subscriber: null,
+    };
+    this.otSubscriber = React.createRef();
+  }
+
+  componentDidMount() {
+    this.getSubscriber();
+  }
+
+  getSubscriber() {
+    if (this.otSubscriber) {
+      this.setState({
+        subscriber: this.otSubscriber.current.getSubscriber(),
+      });
+    }
+  }
+
+  render() {
+    return (
+      <OTSession apiKey="your-api-key" sessionId="your-session-id" token="your-session-token">
+        <OTStreams>
+          <OTSubscriber
+            ref={this.otSubscriber}
+          />
+        </OTStreams>
+      </OTSession>
+    );
+  }
+}
+```
+
 ### createSession Helper
@@ -446,2 +523,2 @@
 Originally authored by [Aiham Hammami](https://github.com/aiham).
-Currently maintained by [TokBox Inc.](https://tokbox.com/).
+Currently maintained by OpenTok Engineers and community members. Please note that this is not officially supported by [TokBox](https://tokbox.com/).

Fixed alerts

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

Improved metrics

Total package byte prevSize

215476

increased by1.83%

Lines of code

826

increased by6.03%

Number of lines in readme file

520

increased by17.38%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes