opentok-react-native - npm Package Compare versions

Comparing version 0.11.1 to 0.11.2

docs/OTSubscriber.md

@@ -11,4 +11,5 @@ ### OTSubscriber Component
 | subscribeToSelf | Boolean | No | If set to true, the subscriber can subscribe to it's own publisher stream (default: false)
+| children | Function | No | A render prop allowing individual rendering of each stream
 
-## Properties 
+## Properties
   * **subscribeToAudio** (Boolean) — Whether to subscribe to audio.
@@ -29,3 +30,3 @@
   * **disconnected** () — Called when the subscriber’s stream has been interrupted.
-  
+
   * **error** (Object) — Sent if the subscriber fails to connect to its stream.
@@ -36,3 +37,3 @@
   * **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.
-  
+
   * **videoDisabled** (String) — This message is sent when the subscriber stops receiving video. Check the reason parameter for the reason why the video stopped.
@@ -45,3 +46,3 @@
   * **videoEnabled** (String) - This message is sent when the subscriber’s video stream starts (when there previously was no video) or resumes (after video was disabled). Check the reason parameter for the reason why the video started (or resumed).
-  
+
   * **videoNetworkStats** (Object) — Sent periodically to report video statistics for the subscriber.
@@ -97,1 +98,37 @@
 ```
+
+## Custom rendering of streams
+
+`OTSubscriber` accepts a render prop function that enables custom rendering of individual streams, e.g. to allow touch interaction or provide individual styling for each `OTSubscriberView`.
+An array of stream IDs is passed to the render prop function as its only argument.
+
+For example, to display the stream, pass its ID as `streamId` prop to the `OTSubscriberView` component:
+
+```js
+import { OTSubscriberView } from 'opentok-react-native'
+
+// Render method
+
+<OTSubscriber>
+  {this.renderSubscribers}
+</OTSubscriber>
+
+// Render prop function
+
+renderSubscribers = (subscribers) => {
+  return subscribers.map((streamId) => (
+    <TouchableOpacity
+      onPress={() => this.handleStreamPress(streamId)}
+      key={streamId}
+      style={subscriberWrapperStyle}
+    >
+      <OTSubscriberView streamId={streamId} style={subscriberStyle} />
+    </TouchableOpacity>
+  ));
+};
+```
+
+Note: `streamProperties` prop is ignored if a children prop is passed.
+
+
+

package.json

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

README.md

@@ -52,3 +52,3 @@ # opentok-react-native
       # Pods for <YourProject>
-        pod 'OpenTok', '2.16.0'
+        pod 'OpenTok', '2.16.1'
     end
@@ -55,0 +55,0 @@

src/index.js

 import OTSession from './OTSession';
 import OTPublisher from './OTPublisher';
 import OTSubscriber from './OTSubscriber';
+import OTSubscriberView from './views/OTSubscriberView';
 import { OT } from './OT';
 
-export { 
+export {
   OTSession,
   OTPublisher,
   OTSubscriber,
+  OTSubscriberView,
   OT,
 };

src/OTSubscriber.js

@@ -22,3 +22,3 @@ import React, { Component } from 'react';
     this.componentEventsArray = Object.values(this.componentEvents);
-    this.otrnEventHandler = getOtrnErrorEventHandler(this.props.eventHandlers); 
+    this.otrnEventHandler = getOtrnErrorEventHandler(this.props.eventHandlers);
   }
@@ -51,3 +51,3 @@ componentWillMount() {
   streamCreatedHandler = (stream) => {
-    const { subscribeToSelf } = this.state;  
+    const { subscribeToSelf } = this.state;
     const { streamProperties, properties, sessionInfo } = this.props;
@@ -68,3 +68,3 @@ const subscriberProperties = isNull(streamProperties[stream.streamId]) ?
             });
-        }                             
+        }
   }
@@ -86,9 +86,12 @@ streamDestroyedHandler = (stream) => {
   render() {
-    const containerStyle = this.props.containerStyle;
-    const childrenWithStreams = this.state.streams.map((streamId) => {
-      const streamProperties = this.props.streamProperties[streamId];
-      const style = isEmpty(streamProperties) ? this.props.style : (isUndefined(streamProperties.style) || isNull(streamProperties.style)) ? this.props.style : streamProperties.style;
-      return <OTSubscriberView key={streamId} streamId={streamId} style={style} />
-    });
-    return <View style={containerStyle}>{ childrenWithStreams }</View>;
+    if (!this.props.children) {
+      const containerStyle = this.props.containerStyle;
+      const childrenWithStreams = this.state.streams.map((streamId) => {
+        const streamProperties = this.props.streamProperties[streamId];
+        const style = isEmpty(streamProperties) ? this.props.style : (isUndefined(streamProperties.style) || isNull(streamProperties.style)) ? this.props.style : streamProperties.style;
+        return <OTSubscriberView key={streamId} streamId={streamId} style={style} />
+      });
+      return <View style={containerStyle}>{ childrenWithStreams }</View>;
+    }
+    return this.props.children(this.state.streams) || null;
   }
@@ -100,2 +103,3 @@ }
   ...viewPropTypes,
+  children: PropTypes.func,
   properties: PropTypes.object, // eslint-disable-line react/forbid-prop-types
@@ -102,0 +106,0 @@ eventHandlers: PropTypes.object, // eslint-disable-line react/forbid-prop-types

New alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Lines of code

824

increased by0.73%

Worsened metrics

Total package byte prevSize

187344

decreased by-16.05%

Number of package files

56

decreased by-8.2%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes