Add error/completion handlers for sessions, publishers, subscribers

example/components/App.js

@@ -11,6 +11,7 @@ class App extends Component {
     super(props);
 
     this.state = {
+      error: null,
       connected: false
     };
 
@@ -28,14 +29,20 @@ class App extends Component {
     OT.registerScreenSharingExtension('chrome', config.CHROME_EXTENSION_ID, 2);
   }
 
+  onError = (err) => {
+    this.setState({ error: `Failed to connect: ${err.message}` });
+  }
+
   render() {
     return (
       <OTSession
         apiKey={this.props.apiKey}
         sessionId={this.props.sessionId}
         token={this.props.token}
         eventHandlers={this.sessionEvents}
+        onError={this.onError}
       >
+        {this.state.error ? <div>{this.state.error}</div> : null}
         <ConnectionStatus connected={this.state.connected} />
         <Publisher />
         <OTStreams>
@@ -46,4 +53,4 @@ class App extends Component {
   }
 }
 
-export default preloadScript(App);
+export default preloadScript(App);

example/components/Publisher.js

@@ -9,6 +9,7 @@ export default class Publisher extends Component {
     super(props);
 
     this.state = {
+      error: null,
       audio: true,
       video: true,
       videoSource: 'camera'
@@ -27,16 +28,22 @@ export default class Publisher extends Component {
     this.setState({ videoSource });
   }
 
+  onError = (err) => {
+    this.setState({ error: `Failed to publish: ${err.message}` });
+  }
+
   render() {
     return (
       <div>
+        {this.state.error ? <div>{this.state.error}</div> : null}
         <OTPublisher
           session={this.props.session}
           properties={{
             publishAudio: this.state.audio,
             publishVideo: this.state.video,
             videoSource: this.state.videoSource === 'screen' ? 'screen' : undefined
           }}
+          onError={this.onError}
         />
         <RadioButtons
           buttons={[

example/components/Subscriber.js

@@ -8,6 +8,7 @@ export default class Subscriber extends Component {
     super(props);
 
     this.state = {
+      error: null,
       audio: true,
       video: true
     };
@@ -21,16 +22,22 @@ export default class Subscriber extends Component {
     this.setState({ video });
   }
 
+  onError = (err) => {
+    this.setState({ error: `Failed to subscribe: ${err.message}` });
+  }
+
   render() {
     return (
       <div>
+        {this.state.error ? <div>{this.state.error}</div> : null}
         <OTSubscriber
           session={this.props.session}
           stream={this.props.stream}
           properties={{
             subscribeToAudio: this.state.audio,
             subscribeToVideo: this.state.video
           }}
+          onError={this.onError}
         />
         <CheckBox
           label="Subscribe to Audio"

package.json

@@ -26,9 +26,11 @@
   "author": "Aiham Hammami <aiham@aiham.net>",
   "license": "MIT",
   "dependencies": {
+    "lodash": "^4.13.1",
     "react": "^15.1.0",
     "react-display-name": "^0.2.0",
-    "scriptjs": "^2.5.8"
+    "scriptjs": "^2.5.8",
+    "uuid": "^3.0.1"
   },
   "devDependencies": {
     "babel-cli": "^6.18.0",
@@ -53,7 +55,6 @@
     "karma-firefox-launcher": "^1.0.0",
     "karma-jasmine": "^1.1.0",
     "karma-spec-reporter": "^0.0.26",
-    "lodash": "^4.13.1",
     "opentok-test-scripts": "^3.2.1",
     "react-addons-test-utils": "^15.4.1",
     "react-dom": "^15.1.0",

src/OTPublisher.js

@@ -1,4 +1,6 @@
 import React, { Component, PropTypes } from 'react';
+import once from 'lodash/once';
+import uuid from 'uuid';
 
 export default class OTPublisher extends Component {
   constructor(props) {
@@ -58,6 +60,8 @@ export default class OTPublisher extends Component {
   }
 
   destroyPublisher(session = this.props.session) {
+    delete this.publisherId;
+
     if (this.state.publisher) {
       this.state.publisher.off('streamCreated', this.streamCreatedHandler);
 
@@ -78,9 +82,18 @@ export default class OTPublisher extends Component {
   }
 
   publishToSession(publisher) {
+    const { publisherId } = this;
+
     this.props.session.publish(publisher, (err) => {
+      if (publisherId !== this.publisherId) {
+        // Either this publisher has been recreated or the
+        // component unmounted so don't invoke any callbacks
+        return;
+      }
       if (err) {
-        console.error('Failed to publish to OpenTok session:', err);
+        this.errorHandler(err);
+      } else if (typeof this.props.onPublish === 'function') {
+        this.props.onPublish();
       }
     });
   }
@@ -101,7 +114,32 @@ export default class OTPublisher extends Component {
       this.node.appendChild(container);
     }
 
-    const publisher = OT.initPublisher(container, properties);
+    this.publisherId = uuid();
+    const { publisherId } = this;
+
+    this.errorHandler = once((err) => {
+      if (publisherId !== this.publisherId) {
+        // Either this publisher has been recreated or the
+        // component unmounted so don't invoke any callbacks
+        return;
+      }
+      if (typeof this.props.onError === 'function') {
+        this.props.onError(err);
+      }
+    });
+
+    const publisher = OT.initPublisher(container, properties, (err) => {
+      if (publisherId !== this.publisherId) {
+        // Either this publisher has been recreated or the
+        // component unmounted so don't invoke any callbacks
+        return;
+      }
+      if (err) {
+        this.errorHandler(err);
+      } else if (typeof this.props.onInit === 'function') {
+        this.props.onInit();
+      }
+    });
     publisher.on('streamCreated', this.streamCreatedHandler);
 
     if (
@@ -145,10 +183,16 @@ OTPublisher.propTypes = {
   }),
   properties: PropTypes.object, // eslint-disable-line react/forbid-prop-types
   eventHandlers: PropTypes.objectOf(PropTypes.func),
+  onInit: PropTypes.func,
+  onPublish: PropTypes.func,
+  onError: PropTypes.func,
 };
 
 OTPublisher.defaultProps = {
   session: null,
   properties: {},
   eventHandlers: null,
+  onInit: null,
+  onPublish: null,
+  onError: null,
 };

src/OTSession.js

@@ -17,6 +17,8 @@ export default class OTSession extends Component {
       sessionId: this.props.sessionId,
       token: this.props.token,
       onStreamsUpdated: (streams) => { this.setState({ streams }); },
+      onConnect: this.props.onConnect,
+      onError: this.props.onError,
     });
 
     if (
@@ -65,8 +67,12 @@ OTSession.propTypes = {
   sessionId: PropTypes.string.isRequired,
   token: PropTypes.string.isRequired,
   eventHandlers: PropTypes.objectOf(PropTypes.func),
+  onConnect: PropTypes.func,
+  onError: PropTypes.func,
 };
 
 OTSession.defaultProps = {
   eventHandlers: null,
+  onConnect: null,
+  onError: null,
 };

src/OTSubscriber.js

@@ -1,4 +1,5 @@
 import React, { Component, PropTypes } from 'react';
+import uuid from 'uuid';
 
 export default class OTSubscriber extends Component {
   constructor(props) {
@@ -59,13 +60,23 @@ export default class OTSubscriber extends Component {
     container.setAttribute('class', 'OTSubscriberContainer');
     this.node.appendChild(container);
 
+    this.subscriberId = uuid();
+    const { subscriberId } = this;
+
     const subscriber = this.props.session.subscribe(
       this.props.stream,
       container,
       this.props.properties,
       (err) => {
-        if (err) {
-          console.error('Failed to publish to OpenTok session:', 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();
         }
       },
     );
@@ -81,6 +92,8 @@ export default class OTSubscriber extends Component {
   }
 
   destroySubscriber(session = this.props.session) {
+    delete this.subscriberId;
+
     if (this.state.subscriber) {
       if (
         this.props.eventHandlers &&
@@ -112,11 +125,15 @@ OTSubscriber.propTypes = {
   }),
   properties: PropTypes.object, // eslint-disable-line react/forbid-prop-types
   eventHandlers: PropTypes.objectOf(PropTypes.func),
+  onSubscribe: PropTypes.func,
+  onError: PropTypes.func,
 };
 
 OTSubscriber.defaultProps = {
   stream: null,
   session: null,
   properties: {},
   eventHandlers: null,
+  onSubscribe: null,
+  onError: null,
 };

src/createSession.js

@@ -3,6 +3,8 @@ export default function createSession({
   sessionId,
   token,
   onStreamsUpdated,
+  onConnect,
+  onError,
 } = {}) {
   if (!apiKey) {
     throw new Error('Missing apiKey');
@@ -41,7 +43,18 @@ export default function createSession({
 
   let session = OT.initSession(apiKey, sessionId);
   session.on(eventHandlers);
-  session.connect(token);
+  session.connect(token, (err) => {
+    if (!session) {
+      // Either this session has been disconnected or OTSession
+      // has been unmounted so don't invoke any callbacks
+      return;
+    }
+    if (err && typeof onError === 'function') {
+      onError(err);
+    } else if (!err && typeof onConnect === 'function') {
+      onConnect();
+    }
+  });
 
   return {
     session,

test/OTPublisher.spec.js

@@ -81,6 +81,7 @@ describe('OTPublisher', () => {
         expect(OT.initPublisher).toHaveBeenCalledWith(
           jasmine.any(HTMLDivElement),
           jasmine.any(Object),
+          jasmine.any(Function),
         );
       });
 
@@ -127,6 +128,7 @@ describe('OTPublisher', () => {
         expect(OT.initPublisher).toHaveBeenCalledWith(
           jasmine.any(HTMLDivElement),
           jasmine.any(Object),
+          jasmine.any(Function),
         );
       });
 

test/createSession.spec.js

@@ -72,7 +72,7 @@ describe('createSession', () => {
     });
 
     it('should call session.connect', () => {
-      expect(session.connect).toHaveBeenCalledWith(options.token);
+      expect(session.connect).toHaveBeenCalledWith(options.token, jasmine.any(Function));
     });
 
     it('should return session helper', () => {

yarn.lock

@@ -4054,7 +4054,7 @@ uuid@^2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-2.0.3.tgz#67e2e863797215530dff318e5bf9dcebfd47b21a"
 
-uuid@^3.0.0:
+uuid@^3.0.0, uuid@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.0.1.tgz#6544bba2dfda8c1cf17e629a3a305e2bb1fee6c1"