opentok-react-native - npm Package Compare versions

Comparing version 0.9.8 to 0.10.0

docs/OTPublisher.md

@@ -98,4 +98,6 @@ ### OTPublisher Component
 
+  * **otrnError** (Object) — Sent if there is an error with the communication between the native publisher instance and the JS component.
+
   * **streamCreated** (Object) — Sent when the publisher starts streaming.
 
   * **streamDestroyed** (Object) - Sent when the publisher stops streaming.

docs/OTSession.md

@@ -8,2 +8,3 @@ ### OTSession Component
 | token | String | Yes | TokBox token
+| options | Object | No | Used to define session options
 | signal | Object | No | Used to send a signal to the session
@@ -17,2 +18,6 @@ | eventHandlers | Object<Function> | No | Event handlers passed into the native session instance.
     super(props);
+    this.state = {
+      isConnected: false,
+    };
+    this.otSessionRef = React.createRef();
     this.sessionEventHandlers = {
@@ -25,8 +30,24 @@ streamCreated: event => {
       },
+      sessionConnected: event => {
+        this.setState({
+          isConnected: true,
+        })
+      }
     };
   }
 
+  sendSignal = () => {
+    const { isConnected } = this.state;
+    if (isConnected) {
+      this.otSessionRef.signal({
+        data: '',
+        to: '', // optional - connectionId of connected client you want to send the signal to
+        type: '', // optional
+      })
+    }
+  }
+
   render() {
     return (
-      <OTSession apiKey="your-api-key" sessionId="your-session-id" token="your-session-token" eventHandlers={this.sesssionEventHandlers}>
+      <OTSession apiKey="your-api-key" sessionId="your-session-id" token="your-session-token" eventHandlers={this.sesssionEventHandlers} ref={this.otSessionRef}>
         <OTPublisher style={{ width: 100, height: 100 }}/>
@@ -51,2 +72,4 @@ <OTSubscriber style={{ width: 100, height: 100 }} />
 
+  * **otrnError** (Object) — Sent if there is an error with the communication between the native session instance and the JS component.
+
   * **sessionConnected** () - Sent when the client connects to the session.
@@ -64,2 +87,31 @@
 
-  * **streamDestroyed** (Object) - Sent when a stream is no longer published to the session.
+  * **streamDestroyed** (Object) - Sent when a stream is no longer published to the session.
+  
+  * **streamPropertyChanged** (Object) - Sent when a stream has started or stopped publishing audio or video or if the video dimensions of the stream have changed.
+
+  ### Setting Session options:
+
+  You can set the session options using the `options` prop. Please note that all session options are optional:
+```javascript
+class App extends Component {
+  constructor(props) {
+    super(props);
+    this.sessionOptions = {
+      connectionEventsSuppressed: true, // default is false
+      androidZOrder: '', // Android only - valid options are 'mediaOverlay' or 'onTop'
+      androidOnTop: '',  // Android only - valid options are 'publisher' or 'subscriber'
+      useTextureViews: true,  // Android only - default is false
+      isCamera2Capable: false, // Android only - default is false
+    };
+  }
+
+  render() {
+    return (
+      <OTSession apiKey="your-api-key" sessionId="your-session-id" token="your-session-token" options={this.sessionOptions}>
+        <OTPublisher style={{ width: 100, height: 100 }}/>
+        <OTSubscriber style={{ width: 100, height: 100 }} />
+      </OTSession>
+    );
+  }
+}
+```

docs/OTSubscriber.md

@@ -30,2 +30,4 @@ ### OTSubscriber Component
 
+  * **otrnError** (Object) — Sent if there is an error with the communication between the native subscriber instance and the JS component.
+
   * **videoDataReceived** () - Sent when a frame of video has been decoded. Although the subscriber will connect in a relatively short time, video can take more time to synchronize. This message is sent after the `connected` message is sent.
@@ -32,0 +34,0 @@

package.json

 {
   "name": "opentok-react-native",
-  "version": "0.9.8",
+  "version": "0.10.0",
   "description": "React Native components for OpenTok iOS and Android SDKs",
@@ -5,0 +5,0 @@ "main": "src/index.js",

src/helpers/OTHelper.js

@@ -15,2 +15,4 @@ import { Platform } from 'react-native';
       newEvents[`${preface}${customEvents[platform][eventType]}`] = eventHandler;
+    } else if(events['otrnError']) {
+      // ignore otrnError event because it's for the js layer
     } else {
@@ -25,2 +27,14 @@ handleError(`${eventType} is not a supported event`);
 
+const getOtrnErrorEventHandler = (events) => {
+  let otrnEventHandler = event => {
+    handleError(event);
+  }
+  if (typeof events !== 'object') {
+    return otrnEventHandler;
+  } else if (events['otrnError']) {
+    otrnEventHandler = events['otrnError'];
+  }
+  return otrnEventHandler;
+};
+
 const getLog = (apiKey, sessionId, action, connectionId) => {
@@ -67,2 +81,3 @@ const body = {
   logOT,
+  getOtrnErrorEventHandler,
 };

src/helpers/OTSessionHelper.js

@@ -0,5 +1,10 @@
+import { Platform } from 'react-native';
 import { reassignEvents } from './OTHelper';
 import { handleSignalError, handleError } from '../OTError';
-import { each, isNull, isEmpty, isString } from 'underscore';
+import { each, isNull, isEmpty, isString, isBoolean } from 'underscore';
 
+const validateString = value => (isString(value) ? value : '');
+
+const validateBoolean = value => (isBoolean(value) ? value : false);
+
 const sanitizeSessionEvents = (events) => {
@@ -44,4 +49,50 @@ if (typeof events !== 'object') {
 
-const validateString = value => (isString(value) ? value : '');
 
+const sanitizeSessionOptions = (options) => {
+  const platform = Platform.OS;
+  let sessionOptions;
+
+  if (platform === 'android') {
+    sessionOptions = {
+      isCamera2Capable: false,
+      connectionEventsSuppressed: false,
+      useTextureViews: false,
+      androidOnTop: '', // 'publisher' || 'subscriber'
+      androidZOrder: '', // 'mediaOverlay' || 'onTop'
+    }
+  } else {
+    sessionOptions = {
+      connectionEventsSuppressed: false,
+    }
+  }
+
+  if (typeof options !== 'object') {
+    return sessionOptions;
+  }
+
+  const validSessionOptions = {
+    ios: {
+      connectionEventsSuppressed: 'boolean',
+    },
+    android: {
+      connectionEventsSuppressed: 'boolean',
+      useTextureViews: 'boolean',
+      isCamera2Capable: 'boolean',
+      androidOnTop: 'string',
+      androidZOrder: 'string',
+    },
+  };
+
+  each(options, (value, key) => {
+    const optionType = validSessionOptions[platform][key];
+    if (optionType !== undefined) {
+      sessionOptions[key] = optionType === 'boolean' ? validateBoolean(value) : validateString(value);
+    } else {
+      handleError(`${key} is not a valid option`);
+    }
+  });
+
+  return sessionOptions;
+};
+
 const sanitizeSignalData = (signal) => {
@@ -99,2 +150,3 @@ if (typeof signal !== 'object') {
   sanitizeSessionEvents,
+  sanitizeSessionOptions,
   sanitizeSignalData,
@@ -101,0 +153,0 @@ sanitizeCredentials,

src/OTPublisher.js

 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { View, Platform } from 'react-native';
-import { createPublisher, checkAndroidPermissions, OT, removeNativeEvents, nativeEvents, setNativeEvents } from './OT';
+import { isNull } from 'underscore';
+import { checkAndroidPermissions, OT, removeNativeEvents, nativeEvents, setNativeEvents } from './OT';
 import { sanitizeProperties, sanitizePublisherEvents } from './helpers/OTPublisherHelper';
-import { handleError } from './OTError';
 import OTPublisherView from './views/OTPublisherView';
-import { isNull } from 'underscore';
+import { getOtrnErrorEventHandler } from './helpers/OTHelper';
 import { isConnected } from './helpers/OTSessionHelper';
@@ -24,3 +24,4 @@
     };
-    this.componentEventsArray = Object.values(this.componentEvents);    
+    this.componentEventsArray = Object.values(this.componentEvents);   
+    this.otrnEventHandler = getOtrnErrorEventHandler(this.props.eventHandlers); 
   }
@@ -62,3 +63,3 @@ componentWillMount() {
       if (error) {
-        handleError(error);
+        this.otrnEventHandler(error);
       } else {
@@ -84,3 +85,3 @@ this.sessionConnected.remove();
         .catch((error) => {
-          handleError(error);
+          this.otrnEventHandler(error);
         });
@@ -98,3 +99,3 @@ } else {
         });
-        handleError(initError);
+        this.otrnEventHandler(initError);
       } else {
@@ -112,3 +113,3 @@ OT.getSessionInfo((session) => {
       if (publishError) {
-        handleError(publishError);
+        this.otrnEventHandler(publishError);
       } else {
@@ -115,0 +116,0 @@ this.setState({

src/OTSession.js

@@ -5,5 +5,6 @@ import React, { Component, Children, cloneElement } from 'react';
 import { setNativeEvents, removeNativeEvents,  OT } from './OT';
-import { sanitizeSessionEvents, sanitizeSignalData, sanitizeCredentials, getConnectionStatus } from './helpers/OTSessionHelper';
-import { logOT } from './helpers/OTHelper';
+import { sanitizeSessionEvents, sanitizeSessionOptions, sanitizeSignalData,
+   sanitizeCredentials, getConnectionStatus } from './helpers/OTSessionHelper';
 import { handleError } from './OTError';
+import { logOT, getOtrnErrorEventHandler } from './helpers/OTHelper';
 import { pick, isNull } from 'underscore';
@@ -17,2 +18,3 @@
     };
+    this.otrnEventHandler = getOtrnErrorEventHandler(this.props.eventHandlers);
   }
@@ -24,4 +26,5 @@ componentWillMount() {
       const sessionEvents = sanitizeSessionEvents(this.props.eventHandlers);
+      const sessionOptions = sanitizeSessionOptions(this.props.options);
       setNativeEvents(sessionEvents);
-      this.createSession(sanitizedCredentials);
+      this.createSession(sanitizedCredentials, sessionOptions);
       logOT(sanitizedCredentials.apiKey, sanitizedCredentials.sessionId, 'rn_initialize');
@@ -41,4 +44,3 @@ }
         const value = useDefault(this.props[key], defaultValue);
-        const signalData = sanitizeSignalData(value);
-        OT.sendSignal(signalData.signal, signalData.errorHandler);
+        this.signal(value);
       }
@@ -52,7 +54,7 @@ };
   }
-  createSession(credentials) {
-    OT.initSession(credentials.apiKey, credentials.sessionId);
+  createSession(credentials, sessionOptions) {
+    OT.initSession(credentials.apiKey, credentials.sessionId, sessionOptions);
     OT.connect(credentials.token, (error) => {
       if (error) {
-        handleError(error);
+        this.otrnEventHandler(error);
       } else {
@@ -66,4 +68,3 @@ OT.getSessionInfo((session) => {
             logOT(credentials.apiKey, credentials.sessionId, 'rn_on_connect', session.connection.connectionId);
-            const signalData = sanitizeSignalData(this.props.signal);
-            OT.sendSignal(signalData.signal, signalData.errorHandler);
+            this.signal(this.props.signal);
           }
@@ -77,3 +78,3 @@ });
       if (disconnectError) {
-        handleError(disconnectError);
+        this.otrnEventHandler(disconnectError);
       } else {
@@ -88,2 +89,6 @@ const events = sanitizeSessionEvents(this.props.eventHandlers);
   }
+  signal(signal) {
+    const signalData = sanitizeSignalData(signal);
+    OT.sendSignal(signalData.signal, signalData.errorHandler);
+  }
   render() {
@@ -119,2 +124,3 @@
   eventHandlers: PropTypes.object, // eslint-disable-line react/forbid-prop-types
+  options: PropTypes.object, // eslint-disable-line react/forbid-prop-types
   signal: PropTypes.object, // eslint-disable-line react/forbid-prop-types
@@ -125,2 +131,3 @@ };
   eventHandlers: {},
+  options: {},
   signal: {},
@@ -127,0 +134,0 @@ style: {

src/OTSubscriber.js

 import React, { Component } from 'react';
 import { View, Platform } from 'react-native';
 import PropTypes from 'prop-types';
+import { isNull, isUndefined, each, isEqual, isEmpty } from 'underscore';
 import { OT, nativeEvents, setNativeEvents, removeNativeEvents } from './OT';
 import OTSubscriberView from './views/OTSubscriberView';
-import { handleError } from './OTError';
 import { sanitizeSubscriberEvents, sanitizeProperties } from './helpers/OTSubscriberHelper';
-import { isNull, isUndefined, each, isEqual, isEmpty } from 'underscore';
+import { getOtrnErrorEventHandler } from './helpers/OTHelper';
 
@@ -21,2 +21,3 @@ export default class OTSubscriber extends Component {
     this.componentEventsArray = Object.values(this.componentEvents);
+    this.otrnEventHandler = getOtrnErrorEventHandler(this.props.eventHandlers); 
   }
@@ -54,3 +55,3 @@ componentWillMount() {
       if (error) {
-        handleError(error);
+        this.otrnEventHandler(error);
       } else {
@@ -66,3 +67,3 @@ this.setState({
       if (error) {
-        handleError(error);
+        this.otrnEventHandler(error);
       } else {
@@ -69,0 +70,0 @@ const indexOfStream = this.state.streams.indexOf(stream.streamId);

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

219468

increased by4.83%

Lines of code

802

increased by9.12%

No dependency changes