Merge branch 'master' into feature/types

Author: janjakubnanista

.github/workflows/metrics.yml

@@ -0,0 +1,17 @@
+name: Aggregit
+
+on:
+  schedule:
+    - cron: "0 0 * * *"
+
+jobs:
+  recordMetrics:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: michaeljolley/aggregit@v1
+      with:
+        githubToken: ${{ secrets.GITHUB_TOKEN }}
+        project_id: ${{ secrets.project_id }}
+        private_key: ${{ secrets.private_key }}
+        client_email: ${{ secrets.client_email }}
+        firebaseDbUrl: ${{ secrets.firebaseDbUrl }}

README.md

@@ -163,6 +163,7 @@ The `opentok-react` library comprises of:
 | apiKey | String | Yes | TokBox API Key
 | sessionId | String | Yes | TokBox Session ID
 | 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)
 | onConnect | Function() | No | Invoked when [session.connect](https://tokbox.com/developer/sdks/js/reference/Session.html#connect) successfully completes
 | onError | Function(err) | No | Invoked when [session.connect](https://tokbox.com/developer/sdks/js/reference/Session.html#connect) fails
@@ -250,6 +251,41 @@ However, for convenience the `OTPublisher` does watch for changes on a few keys
 
 There are plans to support more Publisher properties but for now you will have to call `getPublisher()` to retrieve the Publisher instance and make the necessary changes yourself.
 
+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
 
 | Prop | Type | Required | Description |
@@ -265,6 +301,9 @@ There are plans to support more Publisher properties but for now you will have t
 | session | [Session](https://tokbox.com/developer/sdks/js/reference/Session.html) | No | OpenTok Session instance. This is auto populated by wrapping `OTSubscriber` with `OTStreams`
 | stream | [Stream](https://tokbox.com/developer/sdks/js/reference/Stream.html) | No | OpenTok Stream instance. This is auto populated by wrapping `OTSubscriber` with `OTStreams`
 | 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`
 | onSubscribe | Function() | No | Invoked when `session.subscribe` successfully completes
 | onError | Function(err) | No | Invoked when `session.subscribe` fails
@@ -337,6 +376,44 @@ However, for convenience the `OTSubscriber` does watch for changes on a few keys
 
 There are plans to support more Subscriber properties but for now you will have to call `getSubscriber()` to retrieve the Subscriber instance and make the necessary changes yourself.
 
+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
 
 The `createSession` helper has been provided to easily create a session and monitor the current list of subscriber streams.
@@ -439,4 +516,4 @@ The unit tests are automatically run on [Travis](https://travis-ci.org/opentok/o
 ## About
 
 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/).

example/components/Subscriber.js

@@ -36,6 +36,9 @@ export default class Subscriber extends Component {
             subscribeToVideo: this.state.video
           }}
           onError={this.onError}
+          retry={true}
+          maxRetryAttempts={3}
+          retryAttemptTimeout={2000}
         />
         <CheckBox
           label="Subscribe to Audio"

package.json

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

src/.eslintrc.js

@@ -14,6 +14,7 @@ module.exports = {
   },
   rules: {
     'no-confusing-arrow': ['error', { allowParens: true }],
-    'react/jsx-filename-extension': 'off'
+    'react/jsx-filename-extension': 'off',
+    'react/forbid-prop-types': ['error', { forbid: ['any', 'array'] }]
   }
 };

src/OTPublisher.js

@@ -170,7 +170,8 @@ export default class OTPublisher extends Component {
   }
 
   render() {
-    return <div ref={(node) => { this.node = node; }} />;
+    const { className, style } = this.props;
+    return <div className={className} style={style} ref={(node) => { this.node = node; }} />;
   }
 }
 
@@ -184,6 +185,8 @@ OTPublisher.propTypes = {
     publish: PropTypes.func,
     unpublish: PropTypes.func,
   }),
+  className: PropTypes.string,
+  style: PropTypes.object, // eslint-disable-line react/forbid-prop-types
   properties: PropTypes.object, // eslint-disable-line react/forbid-prop-types
   eventHandlers: PropTypes.objectOf(PropTypes.func),
   onInit: PropTypes.func,
@@ -193,6 +196,8 @@ OTPublisher.propTypes = {
 
 OTPublisher.defaultProps = {
   session: null,
+  className: '',
+  style: {},
   properties: {},
   eventHandlers: null,
   onInit: null,

src/OTSession.js

@@ -44,6 +44,7 @@ export default class OTSession extends Component {
       onStreamsUpdated: (streams) => { this.setState({ streams }); },
       onConnect: this.props.onConnect,
       onError: this.props.onError,
+      options: this.props.options,
     });
 
     if (
@@ -85,12 +86,14 @@ OTSession.propTypes = {
   eventHandlers: PropTypes.objectOf(PropTypes.func),
   onConnect: PropTypes.func,
   onError: PropTypes.func,
+  options: PropTypes.object,
 };
 
 OTSession.defaultProps = {
   eventHandlers: null,
   onConnect: null,
   onError: null,
+  options: {},
 };
 
 OTSession.childContextTypes = {

src/OTSubscriber.js

@@ -10,7 +10,10 @@ export default class OTSubscriber extends Component {
       subscriber: null,
       stream: props.stream || context.stream || null,
       session: props.session || context.session || null,
+      currentRetryAttempt: 0,
     };
+    this.maxRetryAttempts = props.maxRetryAttempts || 5;
+    this.retryAttemptTimeout = props.retryAttemptTimeout || 1000;
   }
 
   componentDidMount() {
@@ -59,41 +62,59 @@ export default class OTSubscriber extends Component {
     const { subscriberId } = this;
 
     const subscriber = this.state.session.subscribe(
-      this.state.stream,
-      container,
-      this.props.properties,
-      (err) => {
-        if (subscriberId !== this.subscriberId) {
-          // Either this subscriber has been recreated or the
-          // component unmounted so don't invoke any callbacks
-          return;
-        }
-        if (err && typeof this.props.onError === 'function') {
-          this.props.onError(err);
-        } else if (!err && typeof this.props.onSubscribe === 'function') {
-          this.props.onSubscribe();
-        }
-      },
-    );
+            this.state.stream,
+            container,
+            this.props.properties,
+            (err) => {
+              if (subscriberId !== this.subscriberId) {
+                    // Either this subscriber has been recreated or the
+                    // component unmounted so don't invoke any callbacks
+                return;
+              }
+              if (err &&
+                this.props.retry &&
+                this.state.currentRetryAttempt < (this.maxRetryAttempts - 1)) {
+                // Error during subscribe function
+                this.handleRetrySubscriber();
+                // If there is a retry action, do we want to execute the onError props function?
+                // return;
+              }
+              if (err && typeof this.props.onError === 'function') {
+                this.props.onError(err);
+              } else if (!err && typeof this.props.onSubscribe === 'function') {
+                this.props.onSubscribe();
+              }
+            },
+        );
 
     if (
-      this.props.eventHandlers &&
-      typeof this.props.eventHandlers === 'object'
-    ) {
+            this.props.eventHandlers &&
+            typeof this.props.eventHandlers === 'object'
+        ) {
       subscriber.on(this.props.eventHandlers);
     }
 
     this.setState({ subscriber });
   }
 
+  handleRetrySubscriber() {
+    setTimeout(() => {
+      this.setState(state => ({
+        currentRetryAttempt: state.currentRetryAttempt + 1,
+        subscriber: null,
+      }));
+      this.createSubscriber();
+    }, this.retryAttemptTimeout);
+  }
+
   destroySubscriber(session = this.props.session) {
     delete this.subscriberId;
 
     if (this.state.subscriber) {
       if (
-        this.props.eventHandlers &&
-        typeof this.props.eventHandlers === 'object'
-      ) {
+                this.props.eventHandlers &&
+                typeof this.props.eventHandlers === 'object'
+            ) {
         this.state.subscriber.once('destroyed', () => {
           this.state.subscriber.off(this.props.eventHandlers);
         });
@@ -106,7 +127,8 @@ export default class OTSubscriber extends Component {
   }
 
   render() {
-    return <div ref={(node) => { this.node = node; }} />;
+    const { className, style } = this.props;
+    return <div className={className} style={style} ref={(node) => { this.node = node; }} />;
   }
 }
 
@@ -118,7 +140,12 @@ OTSubscriber.propTypes = {
     subscribe: PropTypes.func,
     unsubscribe: PropTypes.func,
   }),
+  className: PropTypes.string,
+  style: PropTypes.object, // eslint-disable-line react/forbid-prop-types
   properties: PropTypes.object, // eslint-disable-line react/forbid-prop-types
+  retry: PropTypes.bool,
+  maxRetryAttempts: PropTypes.number,
+  retryAttemptTimeout: PropTypes.number,
   eventHandlers: PropTypes.objectOf(PropTypes.func),
   onSubscribe: PropTypes.func,
   onError: PropTypes.func,
@@ -127,7 +154,12 @@ OTSubscriber.propTypes = {
 OTSubscriber.defaultProps = {
   stream: null,
   session: null,
+  className: '',
+  style: {},
   properties: {},
+  retry: false,
+  maxRetryAttempts: 5,
+  retryAttemptTimeout: 1000,
   eventHandlers: null,
   onSubscribe: null,
   onError: null,

src/createSession.js

@@ -5,6 +5,7 @@ export default function createSession({
   onStreamsUpdated,
   onConnect,
   onError,
+  options,
 } = {}) {
   if (!apiKey) {
     throw new Error('Missing apiKey');
@@ -41,7 +42,7 @@ export default function createSession({
     streamDestroyed: onStreamDestroyed,
   };
 
-  let session = OT.initSession(apiKey, sessionId);
+  let session = OT.initSession(apiKey, sessionId, options);
   session.on(eventHandlers);
   session.connect(token, (err) => {
     if (!session) {

test/OTPublisher.spec.js

@@ -38,6 +38,32 @@ describe('OTPublisher', () => {
     });
   });
 
+  describe('with className prop', () => {
+    let wrapper;
+
+    beforeEach(() => {
+      wrapper = mount(<OTPublisher className="myclass" />);
+    });
+
+    it('should render class on wrapper element', () => {
+      const divWrapper = wrapper.render().find('div.myclass');
+      expect(divWrapper.length).toBe(1);
+    });
+  });
+
+  describe('with style prop', () => {
+    let wrapper;
+    const style = { color: 'red' };
+
+    beforeEach(() => {
+      wrapper = mount(<OTPublisher style={style} />);
+    });
+
+    it('should render style attribute on wrapper element', () => {
+      expect(wrapper.containsMatchingElement(<div style={style} />)).toEqual(true);
+    });
+  });
+
   describe('with session prop', () => {
     let session;