opentok-react-native - npm Package Compare versions

Comparing version 0.14.0 to 0.15.0

CHANGELOG.md

@@ -0,1 +1,9 @@
+# 0.15.0 (Jan 26, 2021)
+
+- **[Feature]**: OTSubscriber: added [preferredResolution](https://tokbox.com/developer/sdks/js/reference/Subscriber.html#setPreferredResolution) and [preferredFrameRate](https://tokbox.com/developer/sdks/js/reference/Subscriber.html#setPreferredFrameRate) properties.
+- **[Fix]**: Fixed android app crash with API level 29 (merged from [PR456](https://github.com/opentok/opentok-react-native/pull/456)). Adheres to: [#455](https://github.com/opentok/opentok-react-native/issues/455)
+- iOS SDK updated to `2.18.1`
+- Android SDK updated to `2.18.1`
+- Added typescript support 
+
 # 0.14.0 (May 22, 2020)
@@ -2,0 +10,0 @@

docs/OTSubscriber.md

@@ -18,3 +18,7 @@ ### OTSubscriber Component
 
+  * **preferredResolution** (String) — Sets the preferred resolution of the subscriber's video. The format of the string is "widthxheight", where the width and height are represented in pixels. Valid values are "1280x720", "640x480", and "352x288".
 
+  * **preferredFrameRate** (Number) — Set this to the desired frame rate (in frames per second). Set this to null to remove the preferred frame rate, and the client will use the highest frame rate available. Valid values are 30, 15, 7, and 1.
+
+
 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.
@@ -21,0 +25,0 @@

package.json

 {
   "name": "opentok-react-native",
-  "version": "0.14.0",
+  "version": "0.15.0",
   "description": "React Native components for OpenTok iOS and Android SDKs",
@@ -46,3 +46,4 @@ "main": "src/index.js",
     "react-test-renderer": "^16.9.0"
-  }
+  },
+  "types": "@types/index.d.ts"
 }

README.md

@@ -5,2 +5,3 @@ # opentok-react-native
 
+## Please note that this library is not officially supported by Vonage.
 React Native library for OpenTok iOS and Android SDKs
@@ -56,3 +57,3 @@
       # Pods for <YourProject>
-        pod 'OpenTok', '2.17.0'
+        pod 'OpenTok', '2.18.1'
     end
@@ -59,0 +60,0 @@

src/helpers/OTSubscriberHelper.js

 import { sanitizeBooleanProperty, reassignEvents } from './OTHelper';
 
+/**
+ * This is the smallest positive int value for 2 bytes. Using Number.MAX_SAFE_INTEGER at JS level,
+ * could drive to problems when coverted to the native layer (Android & iOS).
+ * Since `32767` is a very high value for resolution and frame rate for all use case,
+ * we won't have any problem for the foreseeable future
+ */
+const MAX_SAFE_INTEGER = 32767;
+
 const sanitizeSubscriberEvents = (events) => {
@@ -40,2 +48,46 @@ if (typeof events !== 'object') {
 
+const sanitizeResolution = (resolution) => {
+  if ((typeof resolution !== 'object') || (resolution &&
+    resolution.width === void 0 &&
+    resolution.height === void 0) || 
+    (resolution === null)) {
+    return { width: MAX_SAFE_INTEGER, height: MAX_SAFE_INTEGER };
+  }
+  const videoDimensions = {};
+  if (resolution && resolution.height) {
+    if (isNaN(parseInt(resolution.height, 10))) {
+      videoDimensions.height = void 0;
+    }
+
+    videoDimensions.height = parseInt(resolution.height, 10);
+  } else {
+    videoDimensions.height = void 0;
+  }
+  if (resolution && resolution.width) {
+    if (isNaN(parseInt(resolution.width, 10))) {
+      videoDimensions.width = void 0;
+    }
+
+    videoDimensions.width = parseInt(resolution.width, 10);
+  } else {
+    videoDimensions.width = void 0;
+  }
+  return videoDimensions;
+};
+
+const sanitizeFrameRate = (frameRate) => {
+  switch (frameRate) {
+    case null:
+      return MAX_SAFE_INTEGER;
+    case 1:
+      return 1;
+    case 7:
+      return 7;
+    case 15:
+      return 15;
+    default:
+      return 30;
+  }
+};
+
 const sanitizeProperties = (properties) => {
@@ -46,2 +98,4 @@ if (typeof properties !== 'object') {
       subscribeToVideo: true,
+      preferredResolution: sanitizeResolution(null),
+      preferredFrameRate: sanitizeFrameRate(null)
     };
@@ -52,2 +106,4 @@ }
     subscribeToVideo: sanitizeBooleanProperty(properties.subscribeToVideo),
+    preferredResolution: sanitizeResolution(properties.preferredResolution),
+    preferredFrameRate: sanitizeFrameRate(properties.preferredFrameRate)
   };
@@ -59,2 +115,4 @@ };
   sanitizeProperties,
+  sanitizeFrameRate,
+  sanitizeResolution
 };

src/OTSubscriber.js

@@ -7,4 +7,4 @@ import React, { Component } from 'react';
 import OTSubscriberView from './views/OTSubscriberView';
-import { sanitizeSubscriberEvents, sanitizeProperties } from './helpers/OTSubscriberHelper';
-import { getOtrnErrorEventHandler } from './helpers/OTHelper';
+import { sanitizeSubscriberEvents, sanitizeProperties, sanitizeFrameRate, sanitizeResolution } from './helpers/OTSubscriberHelper';
+import { getOtrnErrorEventHandler, sanitizeBooleanProperty } from './helpers/OTHelper';
 import OTContext from './contexts/OTContext';
@@ -44,5 +44,15 @@
       each(streamProperties, (individualStreamProperties, streamId) => {
-        const { subscribeToAudio, subscribeToVideo } = individualStreamProperties;
-        OT.subscribeToAudio(streamId, subscribeToAudio);
-        OT.subscribeToVideo(streamId, subscribeToVideo);
+        const { subscribeToAudio, subscribeToVideo, preferredResolution, preferredFrameRate } = individualStreamProperties;
+        if (subscribeToAudio !== undefined) {
+          OT.subscribeToAudio(streamId, sanitizeBooleanProperty(subscribeToAudio));
+        }
+        if (subscribeToVideo !== undefined) {
+          OT.subscribeToVideo(streamId, sanitizeBooleanProperty(subscribeToVideo));
+        }
+        if (preferredResolution !== undefined) {
+          OT.setPreferredResolution(streamId, sanitizeResolution(preferredResolution));
+        }
+        if (preferredFrameRate !== undefined) {
+          OT.setPreferredFrameRate(streamId, sanitizeFrameRate(preferredFrameRate));
+        }
       });
@@ -64,6 +74,6 @@ this.setState({ streamProperties });
     const subscriberProperties = isNull(streamProperties[stream.streamId]) ?
-                                  sanitizeProperties(properties) : sanitizeProperties(streamProperties[stream.streamId]);
+      sanitizeProperties(properties) : sanitizeProperties(streamProperties[stream.streamId]);
     // Subscribe to streams. If subscribeToSelf is true, subscribe also to his own stream
     const sessionInfoConnectionId = sessionInfo && sessionInfo.connection ? sessionInfo.connection.connectionId : null;
-    if (subscribeToSelf || (sessionInfoConnectionId !== stream.connectionId)){
+    if (subscribeToSelf || (sessionInfoConnectionId !== stream.connectionId)) {
       OT.subscribeToStream(stream.streamId, sessionId, subscriberProperties, (error) => {
@@ -102,3 +112,3 @@ if (error) {
       });
-      return <View style={containerStyle}>{ childrenWithStreams }</View>;
+      return <View style={containerStyle}>{childrenWithStreams}</View>;
     }
@@ -105,0 +115,0 @@ return this.props.children(this.state.streams) || null;

No alert changes

Improved metrics

Total package byte prevSize

254656

increased by9.15%

Number of package files

65

increased by1.56%

Lines of code

1295

increased by47.66%

Number of lines in readme file

144

increased by0.7%

No dependency changes