opentok-react-native - npm Package Compare versions

Comparing version 0.7.1 to 0.8.0

docs/OTSubscriber.md

@@ -6,4 +6,5 @@ ### OTSubscriber Component
 | 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)
+| streamId | String| No | OpenTok Subscriber streamId. This is auto populated inside the `OTSubscriber` component when `streamCreated` event is fired from the native instance
 | properties | Object | No | Properties passed into the native subscriber instance
+| streamProperties | Object | No | Used to update individual subscriber instance properties
 | eventHandlers | Object<Function> | No | Event handlers passed into the native subscriber instance
@@ -40,2 +41,51 @@
   
-  * **videoNetworkStats** (Object) — Sent periodically to report video statistics for the subscriber.
+  * **videoNetworkStats** (Object) — Sent periodically to report video statistics for the subscriber.
+
+  ```js
+class App extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      streamProperties: {},
+    };
+
+    this.subscriberProperties = {
+      subscribeToAudio: false,
+      subscribeToVideo: true,
+    };
+
+    this.sessionEventHandlers = {
+      streamCreated: event => {
+        const streamProperties = {...this.state.streamProperties, [event.streamId]: {
+          subscribeToAudio: true,
+          subscribeToVideo: false,
+          style: {
+            width: 400,
+            height: 300,
+          },
+        }};
+        this.setState({ streamProperties });
+      },
+    };
+
+    this.subscriberEventHandlers = {
+      error: (error) => {
+        console.log(`There was an error with the subscriber: ${error}`);
+      },
+    };
+  }
+
+  render() {
+    return (
+      <OTSession apiKey="your-api-key" sessionId="your-session-id" token="your-session-token" eventHandlers={this.sessionEventHandlers}>
+        <OTSubscriber
+          properties={this.subscriberProperties}
+          eventHandlers={this.subscriberEventHandlers}
+          style={{ height: 100, width: 100 }}
+          streamProperties={this.state.streamProperties}
+        />
+      </OTSession>
+    );
+  }
+}
+```

package.json

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

README.md

@@ -80,2 +80,6 @@ # opentok-react-native
 
+If you try to archive the app and it fails, please do the following:
+ ```
+    Go to Target -> Build Phases and add OpenTokReactNative under Target Dependencies. After that go to the Link Binary With Libraries section and remove the libOpenTokReactNative.a and add it again.
+```
 ### Android Installation
@@ -82,0 +86,0 @@

src/helpers/OTSessionHelper.js

@@ -23,2 +23,3 @@ import { reassignEvents } from './OTHelper';
       archiveStopped: 'archiveStoppedWithId',
+      streamPropertyChanged: 'streamPropertyChanged',
     },
@@ -38,2 +39,3 @@ android: {
       archiveStopped: 'onArchiveStopped',
+      streamPropertyChanged: 'onStreamPropertyChanged',
     },
@@ -40,0 +42,0 @@ };

src/OTSubscriber.js

@@ -8,2 +8,3 @@ import React, { Component } from 'react';
 import { sanitizeSubscriberEvents, sanitizeProperties } from './helpers/OTSubscriberHelper';
+import { isNull, each, isEqual, isEmpty } from 'underscore';
 
@@ -23,4 +24,3 @@ export default class OTSubscriber extends Component {
   componentWillMount() {
-    const subscriberProperties = sanitizeProperties(this.props.properties);
-    this.streamCreated = nativeEvents.addListener(this.componentEvents.streamCreated, stream => this.streamCreatedHandler(stream, subscriberProperties));
+    this.streamCreated = nativeEvents.addListener(this.componentEvents.streamCreated, stream => this.streamCreatedHandler(stream));
     this.streamDestroyed = nativeEvents.addListener(this.componentEvents.streamDestroyed, stream => this.streamDestroyedHandler(stream));
@@ -31,2 +31,13 @@ const subscriberEvents = sanitizeSubscriberEvents(this.props.eventHandlers);
   }
+  componentDidUpdate() {
+    const { streamProperties } = this.props;    
+    if (!isEqual(this.state.streamProperties, streamProperties)) {
+      each(streamProperties, (individualStreamProperties, streamId) => {
+        const { subscribeToAudio, subscribeToVideo } = individualStreamProperties;
+        OT.subscribeToAudio(streamId, subscribeToAudio);
+        OT.subscribeToVideo(streamId, subscribeToVideo);
+      });
+      this.setState({ streamProperties });
+    }
+  }
   componentWillUnmount() {
@@ -39,3 +50,6 @@ this.streamCreated.remove();
   }
-  streamCreatedHandler = (stream, subscriberProperties) => {
+  streamCreatedHandler = (stream) => {
+    const { streamProperties, properties } = this.props;
+    const subscriberProperties = isNull(streamProperties[stream.streamId]) ? 
+                                  sanitizeProperties(properties) : sanitizeProperties(streamProperties[stream.streamId]);
     OT.subscribeToStream(stream.streamId, subscriberProperties, (error) => {
@@ -66,4 +80,7 @@ if (error) {
   render() {
-    const childrenWithStreams = this.state.streams.map(streamId =>
-      <OTSubscriberView key={streamId} streamId={streamId} style={this.props.style} />);
+    const childrenWithStreams = this.state.streams.map((streamId) => {
+      const streamProperties = this.props.streamProperties[streamId];
+      const style = isEmpty(streamProperties) ? this.props.style : isNull(streamProperties.style) ? this.props.style : streamProperties.style;
+      return <OTSubscriberView key={streamId} streamId={streamId} style={style} />
+    });
     return <View>{ childrenWithStreams }</View>;
@@ -78,2 +95,3 @@ }
   eventHandlers: PropTypes.object, // eslint-disable-line react/forbid-prop-types
+  streamProperties: PropTypes.object, // eslint-disable-line react/forbid-prop-types  
 };
@@ -84,2 +102,3 @@
   eventHandlers: {},
+  streamProperties: {},
 };

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Number of package files

48

increased by2.13%

Number of lines in readme file

127

increased by3.25%

Worsened metrics

Total package byte prevSize

161216

decreased by-63.24%

Lines of code

724

decreased by-92.42%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes