opentok-react - npm Package Compare versions

Comparing version 0.2.5 to 0.3.0

dist/index.js

@@ -6,7 +6,7 @@ 'use strict';
 });
-exports.OTSubscriber = exports.OTPublisher = exports.createSession = undefined;
+exports.createSession = exports.OTSubscriber = exports.OTStreams = exports.OTPublisher = exports.OTSession = undefined;
 
-var _createSession = require('./createSession');
+var _OTSession = require('./OTSession');
 
-var _createSession2 = _interopRequireDefault(_createSession);
+var _OTSession2 = _interopRequireDefault(_OTSession);
 
@@ -17,2 +17,6 @@ var _OTPublisher = require('./OTPublisher');
 
+var _OTStreams = require('./OTStreams');
+
+var _OTStreams2 = _interopRequireDefault(_OTStreams);
+
 var _OTSubscriber = require('./OTSubscriber');
@@ -22,11 +26,19 @@
 
+var _createSession = require('./createSession');
+
+var _createSession2 = _interopRequireDefault(_createSession);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 exports.default = {
-  createSession: _createSession2.default,
+  OTSession: _OTSession2.default,
   OTPublisher: _OTPublisher2.default,
-  OTSubscriber: _OTSubscriber2.default
+  OTStreams: _OTStreams2.default,
+  OTSubscriber: _OTSubscriber2.default,
+  createSession: _createSession2.default
 };
-exports.createSession = _createSession2.default;
+exports.OTSession = _OTSession2.default;
 exports.OTPublisher = _OTPublisher2.default;
-exports.OTSubscriber = _OTSubscriber2.default;
+exports.OTStreams = _OTStreams2.default;
+exports.OTSubscriber = _OTSubscriber2.default;
+exports.createSession = _createSession2.default;

dist/OTPublisher.js

@@ -53,2 +53,6 @@ 'use strict';
 
+      if (!this.props.session) {
+        return;
+      }
+
       var container = document.createElement('div');
@@ -74,5 +78,9 @@ (0, _reactDom.findDOMNode)(this).appendChild(container);
     key: 'destroyPublisher',
-    value: function destroyPublisher() {
+    value: function destroyPublisher(session) {
       var _this2 = this;
 
+      if (!session) {
+        session = this.props.session;
+      }
+
       if (this.state.publisher) {
@@ -87,3 +95,5 @@ this.state.publisher.off('streamCreated', this.streamCreatedHandler);
 
-        this.props.session.unpublish(this.state.publisher);
+        if (session) {
+          session.unpublish(this.state.publisher);
+        }
         this.state.publisher.destroy();
@@ -140,2 +150,8 @@ }
       updatePublisherProperty('publishVideo', true);
+
+      if (!prevProps.session && this.props.session) {
+        this.createPublisher();
+      } else if (prevProps.session && !this.props.session) {
+        this.destroyPublisher(prevProps.session);
+      }
     }
@@ -165,3 +181,3 @@ }, {
 OTPublisher.propTypes = {
-  session: _react.PropTypes.object.isRequired,
+  session: _react.PropTypes.object,
   properties: _react.PropTypes.object,
@@ -168,0 +184,0 @@ eventHandlers: _react.PropTypes.objectOf(_react.PropTypes.func)

dist/OTSubscriber.js

@@ -40,9 +40,10 @@ 'use strict';
   _createClass(OTSubscriber, [{
-    key: 'getSubscriber',
-    value: function getSubscriber() {
-      return this.state.subscriber;
-    }
-  }, {
-    key: 'componentDidMount',
-    value: function componentDidMount() {
+    key: 'createSubscriber',
+    value: function createSubscriber() {
+      this.destroySubscriber();
+
+      if (!this.props.session || !this.props.stream) {
+        return;
+      }
+
       var container = document.createElement('div');
@@ -64,5 +65,36 @@ (0, _reactDom.findDOMNode)(this).appendChild(container);
   }, {
+    key: 'destroySubscriber',
+    value: function destroySubscriber(session) {
+      var _this2 = this;
+
+      if (!session) {
+        session = this.props.session;
+      }
+
+      if (this.state.subscriber) {
+        if (this.props.eventHandlers && _typeof(this.props.eventHandlers) === 'object') {
+          this.state.subscriber.once('destroyed', function () {
+            _this2.state.subscriber.off(_this2.props.eventHandlers);
+          });
+        }
+
+        if (session) {
+          session.unsubscribe(this.state.subscriber);
+        }
+      }
+    }
+  }, {
+    key: 'getSubscriber',
+    value: function getSubscriber() {
+      return this.state.subscriber;
+    }
+  }, {
+    key: 'componentDidMount',
+    value: function componentDidMount() {
+      this.createSubscriber();
+    }
+  }, {
     key: 'componentDidUpdate',
     value: function componentDidUpdate(prevProps, prevState) {
-      var _this2 = this;
+      var _this3 = this;
 
@@ -75,5 +107,5 @@ var cast = function cast(value, Type, defaultValue) {
         var previous = cast(prevProps.properties[key], Boolean, true);
-        var current = cast(_this2.props.properties[key], Boolean, true);
+        var current = cast(_this3.props.properties[key], Boolean, true);
         if (previous !== current) {
-          _this2.state.subscriber[key](current);
+          _this3.state.subscriber[key](current);
         }
@@ -84,2 +116,8 @@ };
       updateSubscriberProperty('subscribeToVideo');
+
+      if ((!prevProps.session || !prevProps.stream) && this.props.session && this.props.stream) {
+        this.createSubscriber();
+      } else if (prevProps.session && prevProps.stream && (!this.props.session || !this.props.stream)) {
+        this.destroySubscriber(prevProps.session);
+      }
     }
@@ -89,13 +127,3 @@ }, {
     value: function componentWillUnmount() {
-      var _this3 = this;
-
-      if (this.state.subscriber) {
-        if (this.props.eventHandlers && _typeof(this.props.eventHandlers) === 'object') {
-          this.state.subscriber.once('destroyed', function () {
-            _this3.state.subscriber.off(_this3.props.eventHandlers);
-          });
-        }
-
-        this.props.session.unsubscribe(this.state.subscriber);
-      }
+      this.destroySubscriber();
     }
@@ -116,4 +144,4 @@ }, {
 OTSubscriber.propTypes = {
-  stream: _react.PropTypes.object.isRequired,
-  session: _react.PropTypes.object.isRequired,
+  stream: _react.PropTypes.object,
+  session: _react.PropTypes.object,
   properties: _react.PropTypes.object,
@@ -120,0 +148,0 @@ eventHandlers: _react.PropTypes.objectOf(_react.PropTypes.func)

package.json

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

README.md

@@ -14,6 +14,10 @@ # opentok-react
   - [Importing opentok-react](#importing-opentok-react)
-  - [createSession Helper](#createsession-helper)
+  - [Example with OTSession Component](#example-with-otsession-component)
+  - [Example with createSession Helper](#example-with-createsession-helper)
+- [API Reference](#api-reference)
+  - [OTSession Component](#otsession-component)
   - [OTPublisher Component](#otpublisher-component)
+  - [OTStreams Component](#otstreams-component)
   - [OTSubscriber Component](#otsubscriber-component)
-  - [A Complete Example](#a-complete-example)
+  - [createSession Helper](#createsession-helper)
 - [Custom Build](#custom-build)
@@ -59,19 +63,13 @@ - [Tests](#tests)
 
-The `opentok-react` library is comprised of:
+The following sections explains how to import and use `opentok-react` in your React application.
 
-- `createSession` Helper
-- `OTPublisher` Component
-- `OTSubscriber` Component
-
-The following sections explains how to import and use them in your React application.
-
 ### Importing opentok-react
 
-Import the `opentok-react` modules into your React application:
+Import the `opentok-react` components into your React application:
 
 ```js
-import { createSession, OTPublisher, OTSubscriber } from 'opentok-react';
+import { OTSession, OTPublisher, OTStreams, OTSubscriber, createSession } from 'opentok-react';
 ```
 
-Or if you need to use CommonJS modules:
+Or `require` it if you need to use CommonJS modules:
 
@@ -81,13 +79,35 @@ ```js
 
-var createSession = otReact.createSession;
+var OTSession = otReact.OTSession;
 var OTPublisher = otReact.OTPublisher;
+var OTStreams = otReact.OTStreams;
 var OTSubscriber = otReact.OTSubscriber;
+var createSession = otReact.createSession;
 ```
 
-### createSession Helper
+### Example with OTSession Component
 
-The `createSession` helper has been provided to easily create a session and monitor the current list of subscriber streams.
+```js
+class MyApp extends React.Component {
+  render() {
+    return (
+      <OTSession apiKey="your-api-key" sessionId="your-session-id" token="your-session-token">
+        <OTPublisher />
+        <OTStreams>
+          <OTSubscriber />
+        </OTStreams>
+      </OTSession>
+    );
+  }
+}
+```
 
+### Example with createSession Helper
+
 ```js
 class MyApp extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { streams: [] };
+  }
+
   componentWillMount() {
@@ -98,5 +118,3 @@ this.sessionHelper = createSession({
       token: 'your-session-token',
-      onStreamsUpdated: streams => {
-        console.log('Current subscriber streams:', streams);
-      }
+      onStreamsUpdated: streams => { this.setState({ streams }); }
     });
@@ -108,13 +126,37 @@ }
   }
+
+  render() {
+    return (
+      <div>
+        <OTPublisher session={this.sessionHelper.session} />
+
+        {this.state.streams.map(stream => {
+          return (
+            <OTSubscriber
+              key={stream.id}
+              session={this.sessionHelper.session}
+              stream={stream}
+            />
+          );
+        })}
+      </div>
+    );
+  }
 }
 ```
 
-The `createSession` helper returns an object with the following properties:
+## API Reference
 
-- `session` - The [Session](https://tokbox.com/developer/sdks/js/reference/Session.html) instance.
-- `streams` - An up-to-date array of [Stream](https://tokbox.com/developer/sdks/js/reference/Stream.html) instances.
-- `disconnect` - A clean up function. Call this when your component unmounts.
+The `opentok-react` library is comprised of:
 
-Use of this helper is optional and you can directly call [OT.initSession](https://tokbox.com/developer/sdks/js/reference/OT.html#initSession) and listen to [streamCreated](https://tokbox.com/developer/sdks/js/reference/Session.html#event:streamCreated) events if you prefer.
+- `OTSession` Component
+- `OTPublisher` Component
+- `OTStreams` Component
+- `OTSubscriber` Component
+- `createSession` Helper
 
+### OTSession Component
+
+TODO
+
 ### OTPublisher Component
@@ -171,8 +213,11 @@
 - Explain which properties `OTPublisher` will monitor for changes.
-- Explain that `eventHandlers` are dynamically updated.
 - Explain that this component will not cause publisher to be appended to body.
 
+### OTStreams Component
+
+TODO
+
 ### OTSubscriber Component
 
-The `OTSubscriber` component will subscribe to a specified stream from a specified session upon mounting. You must specify a [Stream](https://tokbox.com/developer/sdks/js/reference/Stream.html) object using the `stream` prop and a [Session](https://tokbox.com/developer/sdks/js/reference/Session.html) object using the `session` prop.
+The `OTSubscriber` component will subscribe to a specified stream from a specified session upon mounting. You must provide a [Stream](https://tokbox.com/developer/sdks/js/reference/Stream.html) object using the `stream` prop and a [Session](https://tokbox.com/developer/sdks/js/reference/Session.html) object using the `session` prop.
 
@@ -204,31 +249,18 @@ ```js
 - Explain which properties `OTPublisher` will monitor for changes.
-- Explain that `eventHandlers` are dynamically updated.
 - Explain that this component will not cause subscriber to be appended to body.
 
-### A Complete Example
+### createSession Helper
 
+The `createSession` helper has been provided to easily create a session and monitor the current list of subscriber streams.
+
 ```js
-import { createSession, OTPublisher, OTSubscriber } from 'opentok-react';
-
-import React from 'react';
-import ReactDOM from 'react-dom';
-
-const config = {
-  API_KEY: 'your-api-key',
-  SESSION_ID: 'your-session-id',
-  TOKEN: 'your-session-token'
-};
-
 class MyApp extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = { streams: [] };
-  }
-
   componentWillMount() {
     this.sessionHelper = createSession({
-      apiKey: config.API_KEY,
-      sessionId: config.SESSION_ID,
-      token: config.TOKEN,
-      onStreamsUpdated: streams => { this.setState({ streams }); }
+      apiKey: 'your-api-key',
+      sessionId: 'your-session-id',
+      token: 'your-session-token',
+      onStreamsUpdated: streams => {
+        console.log('Current subscriber streams:', streams);
+      }
     });
@@ -240,24 +272,12 @@ }
   }
+}
+```
 
-  render() {
-    return (
-      <div>
-        <OTPublisher session={this.sessionHelper.session} />
+The `createSession` helper returns an object with the following properties:
 
-        {this.state.streams.map(stream => {
-          return (
-            <OTSubscriber
-              key={stream.id}
-              session={this.sessionHelper.session}
-              stream={stream}
-            />
-          );
-        })}
-      </div>
-    );
-  }
-}
+- `session` - The [Session](https://tokbox.com/developer/sdks/js/reference/Session.html) instance.
+- `streams` - An up-to-date array of [Stream](https://tokbox.com/developer/sdks/js/reference/Stream.html) instances.
+- `disconnect` - A clean up function. Call this when your component unmounts.
 
-ReactDOM.render(<MyApp />, document.getElementById('content'));
-```
+Use of this helper is optional and you can instead use the `OTSession` component or directly call [OT.initSession](https://tokbox.com/developer/sdks/js/reference/OT.html#initSession) and listen to [streamCreated](https://tokbox.com/developer/sdks/js/reference/Session.html#event:streamCreated) events if you prefer.
 
@@ -264,0 +284,0 @@ ## Custom Build

No alert changes

Improved metrics

Total package byte prevSize

28627

increased by31.64%

Number of package files

10

increased by25%

Lines of code

447

increased by50.51%

Number of lines in readme file

288

increased by7.46%

No dependency changes