opentok-react-native - npm Package Compare versions

Comparing version 0.5.3 to 0.6.0

package.json

 {
   "name": "opentok-react-native",
-  "version": "0.5.3",
+  "version": "0.6.0",
   "description": "React Native components for OpenTok iOS and Android SDKs",
@@ -28,5 +28,6 @@ "main": "src/index.js",
   "dependencies": {
+    "axios": "^0.18.0",
+    "prop-types": "^15.6.0",
     "underscore": "^1.8.3",
-    "prop-types": "^15.6.0",
-    "axios": "^0.18.0"
+    "uuid": "^3.2.1"
   },
@@ -33,0 +34,0 @@ "devDependencies": {

README.md

@@ -8,6 +8,6 @@ ![OpenTok Labs](https://d26dzxoao6i3hh.cloudfront.net/items/0U1R0a0e2g1E361H0x3c/Image%202017-11-22%20at%2012.16.38%20PM.png?v=2507a2df)
   - [Android Installation](#android-installation)
-- [API Reference](#api-reference)
-  - [OTSession Component](#otsession-component)
-  - [OTPublisher Component](#otpublisher-component)
-  - [OTSubscriber Component](#otsubscriber-component)
+- API Reference
+  - [OTSession Component](https://github.com/opentok/opentok-react-native/tree/master/docs/OTSession.md)
+  - [OTPublisher Component](https://github.com/opentok/opentok-react-native/tree/master/docs/OTPublisher.md)
+  - [OTSubscriber Component](https://github.com/opentok/opentok-react-native/tree/master/docs/OTSubscriber.md)
 - [Contributing](#contributing)
@@ -121,142 +121,6 @@
 
-Newer versions of Android–`API Level 23` (Android 6.0)–have a different permissions model that is already handled by this lib.
+Newer versions of Android–`API Level 23` (Android 6.0)–have a different permissions model that is already handled by this library.
 
-## API Reference
-
-The `OpenTok React Native` library comprises of:
-
-- `OTSession` Component
-- `OTPublisher` Component
-- `OTSubscriber` Component
-
-### OTSession Component
-
-| Prop | Type | Required | Description |
-| --- | --- | --- | --- |
-| apiKey | String | Yes | TokBox API Key
-| sessionId | String | Yes | TokBox Session ID
-| token | String | Yes | TokBox token
-| signal | Object | No | Used to send a signal to the session
-| eventHandlers | Object<Function> | No | Event handlers passed into the native session instance.
-
-The `OTSession` component manages the connection to an OpenTok Session. It passes the sessionId to the `sessionId` prop to its child components. To disconnect the session, unmount the `OTSession` component. To publish and subscribe, you must nest `OTPublisher` and `OTSubscriber` inside `OTSession`:
-
-
-```html
-<OTSession apiKey="your-api-key" sessionId="your-session-id" token="your-session-token">
-  <OTPublisher style={{ width: 100, height: 100 }}/>
-  <OTSubscriber style={{ width: 100, height: 100 }} />
-</OTSession>
-```
-
-### OTPublisher Component
-
-| Prop | Type | Required | Description |
-| --- | --- | --- | --- |
-| sessionId | String | No | OpenTok sessionId. This is auto populated by wrapping `OTPublisher` with `OTSession`
-| properties | Object | No | Properties passed into the native publisher instance
-| eventHandlers | Object&lt;Function&gt; | No | Event handlers passed into native publsiher instance
-
-* **Properties** 
-  * **audioBitrate** (Number) — The desired bitrate for the published audio, in bits per second. The supported range of values is 6,000 - 510,000. (Invalid values are ignored.) Set this value to enable high-quality audio (or to reduce bandwidth usage with lower-quality audio).
-  The following are recommended settings:
-
-    * **8,000 - 12,000 for narrowband (NB) speech**
-    * **16,000 - 20,000 for wideband (WB) speech**
-    * **28,000 - 40,000 for full-band (FB) speech**
-    * **48,000 - 64,000 for full-band (FB) music**
-    * **64,000 - 128,000 for full-band (FB) stereo music**
-    
-    * **The default value is 40,000.**
-
-  * **audioFallbackEnabled** (Boolean) — Whether to turn on audio fallback or not.
-
-  * **audioTrack** (Boolean) — If this property is set to false, the audio subsystem will not be initialized for the publisher, and setting the publishAudio property will have no effect. If your application does not require the use of audio, it is recommended to set this property rather than use the publishAudio property, which only temporarily disables the audio track.
-
-  * **cameraPosition** (String) - The preferred camera position. When setting this property, if the change is possible, the publisher will use the camera with the specified position. Valid Inputs: 'front' or 'back'
-  
-  * **frameRate** (Number) - The desired frame rate, in frames per second, of the video. Valid values are 30, 15, 7, and 1. The published stream will use the closest value supported on the publishing client. The frame rate can differ slightly from the value you set, depending on the device of the client. And the video will only use the desired frame rate if the client configuration supports it. 
-
-  * **name** (String) — A string that will be associated with this publisher’s stream. This string is displayed at the bottom of publisher videos and at the bottom of subscriber videos associated with the published stream. If you do not specify a value, the name is set to the device name.
-
-  * **publishAudio** (Boolean) — Whether to publish audio.
-
-  * **publishVideo** (Boolean) — Whether to publish video.
-
-  * **resolution** (String) - The desired resolution of the video. The format of the string is "widthxheight", where the width and height are represented in pixels. Valid values are "1280x720", "640x480", and "352x288". The published video will only use the desired resolution if the client configuration supports it. Some devices and clients do not support each of these resolution settings.
-
-  * **videoTrack** (Boolean) — If this property is set to false, the video subsystem will not be initialized for the publisher, and setting the publishVideo property will have no effect. If your application does not require the use of video, it is recommended to set this property rather than use the publishVideo property, which only temporarily disables the video track.
-
-
-
-The `OTPublisher` component will initialize a publisher and publish to the specified session upon mounting. To destroy the publisher, unmount the `OTPublisher` component. Please keep in mind that the publisher view is not removed unless you specifically unmount the `OTPublisher` component.
-
-```html
-<OTSession apiKey="your-api-key" sessionId="your-session-id" token="your-session-token">
-  <OTPublisher style={{ width: 100, height: 100 }} />
-</OTSession>
-```
-```js
-class App extends Component {
-  constructor(props) {
-    super(props);
-
-    this.publisherProperties = {
-      publishAudio: false,
-      cameraPosition: 'front'
-    };
-
-    this.publisherEventHandlers = {
-      streamCreated: event => {
-        console.log('Publisher stream created!', event);
-      },
-      streamDestroyed: event => {
-        console.log('Publisher stream destroyed!', event);
-      }
-    };
-  }
-
-  render() {
-    return (
-      <OTSession apiKey="your-api-key" sessionId="your-session-id" token="your-session-token">
-        <OTPublisher
-          properties={this.publisherProperties}
-          eventHandlers={this.publisherEventHandlers}
-          style={{ height: 100, width: 100 }}
-        />
-      </OTSession>
-    );
-  }
-}
-```
-
-The `properties` prop is used for initial set up of the Publisher and making changes to it will update the Publisher. For convenience the `OTPublisher` watches for changes on a few keys of the `properties` object and makes the necessary changes. Currently these are:
-
-| Publisher Property | Action |
-| --- | --- |
-| cameraPosition | Calls OT.changeCameraPosition() to toggle the camera |
-| publishAudio | Calls OT.publishAudio() to toggle audio on and off |
-| publishVideo | Calls OT.publishVideo() to toggle video on and off |
-
-Please keep in mind that `OT` is not the same as `OT` in the JS SDK, the `OT` in this library refers to the iOS and Android `OTSessionManager` class.
-
-### OTSubscriber Component
-
-| Prop | Type | Required | Description |
-| --- | --- | --- | --- |
-| sessionId | String | No | OpenTok Session Id. This is auto populated by wrapping `OTSubscriber` with `OTSession`
-| streamId | String| No | OpenTok Subscriber streamId. This is auto populated inside the `OTSubscriber` component when `streamCreated` event is fired from the native session delegate(iOS)/ interface(Android)
-| properties | Object | No | Properties passed into the native subscriber instance
-| eventHandlers | Object&lt;Function&gt; | No | Event handlers passed into the native subscriber instance
-
-* **Properties** 
-  * **subscribeToAudio** (Boolean) — Whether to subscribe to audio.
-
-  * **subscribeToVideo** (Boolean) — Whether to subscribe video.
-
-
-The `OTSubscriber` component will subscribe to a specified stream from a specified session upon mounting. The `OTSubscriber` component will stop subscribing and unsubscribing when it's unmounting.
-
 ## Contributing
 
 If you make changes to the project that you would like to contribute back then please follow the [contributing guidelines](CONTRIBUTING.md). All contributions are greatly appreciated!

src/helpers/OTHelper.js

@@ -6,3 +6,3 @@ import { Platform } from 'react-native';
 
-const reassignEvents = (type, customEvents, events) => {
+const reassignEvents = (type, customEvents, events, publisherId) => {
   const newEvents = {};
@@ -12,3 +12,5 @@ const preface = `${type}:`;
   each(events, (eventHandler, eventType) => {
-    if (customEvents[platform][eventType] !== undefined) {
+    if (customEvents[platform][eventType] !== undefined && publisherId !== undefined) {
+      newEvents[`${publisherId}:${preface}${customEvents[platform][eventType]}`] = eventHandler;
+    } else if(customEvents[platform][eventType] !== undefined ) {    
       newEvents[`${preface}${customEvents[platform][eventType]}`] = eventHandler;
@@ -15,0 +17,0 @@ } else {

src/helpers/OTPublisherHelper.js

@@ -31,2 +31,4 @@ import { sanitizeBooleanProperty, reassignEvents } from './OTHelper';
 
+const sanitizeVideoSource = (videoSource = 'camera') => (videoSource === 'camera' ? 'camera' : 'screen');
+
 const sanitizeAudioBitrate = (audioBitrate = 40000) =>
@@ -48,2 +50,3 @@ (audioBitrate < 80000 || audioBitrate > 128000 ? 40000 : audioBitrate);
       resolution: sanitizeResolution(),
+      videoSource: 'camera',
     };
@@ -62,6 +65,7 @@ }
     resolution: sanitizeResolution(properties.resolution),
+    videoSource: sanitizeVideoSource(properties.videoSource),
   };
 };
 
-const sanitizePublisherEvents = (events) => {
+const sanitizePublisherEvents = (publisherId, events) => {
   if (typeof events !== 'object') {
@@ -84,3 +88,3 @@ return {};
   };
-  return reassignEvents('publisher', customEvents, events);
+  return reassignEvents('publisher', customEvents, events, publisherId);
 };
@@ -87,0 +91,0 @@

src/OTPublisher.js

@@ -9,2 +9,4 @@ import React, { Component } from 'react';
 
+const uuid = require('uuid/v4');
+
 class OTPublisher extends Component {
@@ -15,2 +17,3 @@ constructor(props) {
       publisher: null,
+      publisherId: uuid(),
     };
@@ -23,3 +26,3 @@ this.componentEvents = {
   componentWillMount() {
-    const publisherEvents = sanitizePublisherEvents(this.props.eventHandlers);
+    const publisherEvents = sanitizePublisherEvents(this.state.publisherId, this.props.eventHandlers);
     setNativeEvents(publisherEvents);
@@ -44,5 +47,5 @@ OT.setJSComponentEvents(this.componentEventsArray);
         if (key === 'cameraPosition') {
-          OT.changeCameraPosition(value);
+          OT.changeCameraPosition(this.state.publisherId, value);
         } else {
-          OT[key](value);          
+          OT[key](this.state.publisherId, value);          
         }
@@ -57,9 +60,9 @@ }
   componentWillUnmount() {
-    OT.destroyPublisher((error) => {
+    OT.destroyPublisher(this.state.publisherId, (error) => {
       if (error) {
-        handleError(error);        
+        handleError(error);
       } else {
         this.sessionConnected.remove();        
         OT.removeJSComponentEvents(this.componentEventsArray);         
-        const events = sanitizePublisherEvents(this.props.eventHandlers);
+        const events = sanitizePublisherEvents(this.state.publisherId, this.props.eventHandlers);
         removeNativeEvents(events);
@@ -70,9 +73,9 @@ }
   sessionConnectedHandler = () => {
-    OT.publish((publishError) => {
+    OT.publish(this.state.publisherId, (publishError) => {
       if (publishError) {
-        handleError(publishError);
+        handleError(publisherError);
       } else {
         this.setState({
           publisher: true,
-        })
+        });
       }
@@ -96,7 +99,8 @@ });
     const publisherProperties = sanitizeProperties(this.props.properties);
-    OT.initPublisher(publisherProperties);
+    OT.initPublisher(this.state.publisherId, publisherProperties);
   }
   render() {
-    if (this.state.publisher) {
-      return <OTPublisherView {...this.props} />;
+    const { publisher, publisherId } = this.state;
+    if (publisher && publisherId) {
+      return <OTPublisherView publisherId={publisherId} {...this.props} />;
     }
@@ -103,0 +107,0 @@ return <View />;

src/OTSession.js

 import React, { Component, Children, cloneElement } from 'react';
 import { View, ViewPropTypes } from 'react-native';
 import PropTypes from 'prop-types';
-import { setNativeEvents, OT } from './OT';
+import { setNativeEvents, removeNativeEvents,  OT } from './OT';
 import { sanitizeSessionEvents, sanitizeSignalData } from './helpers/OTSessionHelper';
@@ -64,2 +64,5 @@ import { logOT } from './helpers/OTHelper';
         handleError(disconnectError);
+      } else { 
+        const events = sanitizeSessionEvents(this.props.eventHandlers);
+        removeNativeEvents(events);
       }
@@ -66,0 +69,0 @@ });

src/OTSubscriber.js

 import React, { Component } from 'react';
 import { View, Platform } from 'react-native';
 import PropTypes from 'prop-types';
-import { OT, nativeEvents, setNativeEvents } from './OT';
+import { OT, nativeEvents, setNativeEvents, removeNativeEvents } from './OT';
 import OTSubscriberView from './views/OTSubscriberView';
@@ -32,3 +32,5 @@ import { handleError } from './OTError';
     this.streamDestroyed.remove();
-    OT.removeJSComponentEvents(this.componentEventsArray);    
+    OT.removeJSComponentEvents(this.componentEventsArray);
+    const events = sanitizeSubscriberEvents(this.props.eventHandlers);
+    removeNativeEvents(events); 
   }
@@ -35,0 +37,0 @@ streamCreatedHandler = (stream, subscriberProperties) => {

src/views/OTPublisherView.js

 import React, { Component } from 'react';
+import { PropTypes } from 'prop-types';
 import { requireNativeComponent, Platform, View } from 'react-native';
@@ -11,2 +12,3 @@
 OTPublisherView.propTypes = {
+  publisherId: PropTypes.string.isRequired,  
   ...viewPropTypes,
@@ -13,0 +15,0 @@ };

No alert changes

Improved metrics

Total package byte prevSize

114154

increased by20.63%

Number of package files

42

increased by13.51%

Lines of code

642

increased by2.39%

Worsened metrics

Dependency count

4

increased by33.33%

Number of lines in readme file

125

decreased by-52.11%

Dependency changes

• + Addeduuid@^3.2.1

• + Addeduuid@3.4.0(transitive)