react-native-altibbi 0.1.0

package/src/video/OTSession.js

@@ -0,0 +1,168 @@
+import React, { Component, Children, cloneElement } from 'react';
+import { View } from 'react-native';
+import { ViewPropTypes } from 'deprecated-react-native-prop-types';
+import PropTypes from 'prop-types';
+import { pick, isNull } from 'underscore';
+import { setNativeEvents, removeNativeEvents,  OT } from './OT';
+import { sanitizeSessionEvents, sanitizeSessionOptions, sanitizeSignalData,
+   sanitizeCredentials, getConnectionStatus } from './helpers/OTSessionHelper';
+import { handleError } from './OTError';
+import { logOT, getOtrnErrorEventHandler } from './helpers/OTHelper';
+import OTContext from './contexts/OTContext';
+
+export default class OTSession extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      sessionInfo: null,
+    };
+    this.otrnEventHandler = getOtrnErrorEventHandler(this.props.eventHandlers);
+    this.initComponent();
+  }
+  initComponent = () => {
+    const credentials = pick(this.props, ['apiKey', 'sessionId', 'token']);
+    this.sanitizedCredentials = sanitizeCredentials(credentials);
+    if (Object.keys(this.sanitizedCredentials).length === 3) {
+      const sessionEvents = sanitizeSessionEvents(this.sanitizedCredentials.sessionId, this.props.eventHandlers);
+      setNativeEvents(sessionEvents);
+    }
+  }
+  componentDidMount() {
+    const sessionOptions = sanitizeSessionOptions(this.props.options);
+    const { apiKey, sessionId, token } = this.sanitizedCredentials;
+    if (apiKey && sessionId && token) {
+      this.createSession(this.sanitizedCredentials, sessionOptions);
+      logOT({ apiKey, sessionId, action: 'rn_initialize', proxyUrl: sessionOptions.proxyUrl });
+    } else {
+      handleError('Please check your OpenTok credentials.');
+    }
+  }
+  componentDidUpdate(previousProps) {
+    const useDefault = (value, defaultValue) => (value === undefined ? defaultValue : value);
+    const shouldUpdate = (key, defaultValue) => {
+      const previous = useDefault(previousProps[key], defaultValue);
+      const current = useDefault(this.props[key], defaultValue);
+      return previous !== current;
+    };
+
+    const updateSessionProperty = (key, defaultValue) => {
+      if (shouldUpdate(key, defaultValue)) {
+        const value = useDefault(this.props[key], defaultValue);
+        this.signal(value);
+      }
+    };
+
+    updateSessionProperty('signal', {});
+  }
+  componentWillUnmount() {
+    this.disconnectSession();
+  }
+  createSession(credentials, sessionOptions) {
+    const { signal } = this.props;
+    const { apiKey, sessionId, token } = credentials;
+    OT.initSession(apiKey, sessionId, sessionOptions);
+    OT.connect(sessionId, token, (error) => {
+      if (error) {
+        this.otrnEventHandler(error);
+      } else {
+        OT.getSessionInfo(sessionId, (session) => {
+          if (!isNull(session)) {
+            const sessionInfo = { ...session, connectionStatus: getConnectionStatus(session.connectionStatus)};
+            this.setState({
+              sessionInfo,
+            });
+            logOT({ apiKey, sessionId, action: 'rn_on_connect', proxyUrl: sessionOptions.proxyUrl, connectionId: session.connection.connectionId });
+            if (Object.keys(signal).length > 0) {
+              this.signal(signal);
+            }
+          }
+        });
+      }
+    });
+  }
+  disconnectSession() {
+    OT.disconnectSession(this.props.sessionId, (disconnectError) => {
+      if (disconnectError) {
+        this.otrnEventHandler(disconnectError);
+      } else {
+        const events = sanitizeSessionEvents(this.props.sessionId, this.props.eventHandlers);
+        removeNativeEvents(events);
+      }
+    });
+  }
+  getSessionInfo() {
+    return this.state.sessionInfo;
+  }
+  getCapabilities() {
+    return new Promise((resolve, reject ) => {
+      OT.getSessionCapabilities(this.props.sessionId, (sessionCapabilities) => {
+        if (sessionCapabilities) {
+          resolve(sessionCapabilities);
+        } else {
+          reject(new Error('Not connected to session.'));
+        }
+      });
+    });
+  }
+  async reportIssue() {
+    return new Promise((resolve, reject) => {
+      OT.reportIssue(this.props.sessionId, (reportIssueId, error) => {
+        if (reportIssueId) {
+          resolve(reportIssueId)
+        } else {
+          reject (new Error(error))
+        }
+      });
+    })
+  }
+  signal(signal) {
+    const signalData = sanitizeSignalData(signal);
+    OT.sendSignal(this.props.sessionId, signalData.signal, signalData.errorHandler);
+  }
+  forceMuteAll(excludedStreamIds) {
+    return OT.forceMuteAll(this.props.sessionId, excludedStreamIds || []);
+  }
+  forceMuteStream(streamId) {
+    return OT.forceMuteStream(this.props.sessionId, streamId);
+  }
+  disableForceMute() {
+    return OT.disableForceMute(this.props.sessionId);
+  }
+  render() {
+    const { style, children, sessionId, apiKey, token } = this.props;
+    const { sessionInfo } = this.state;
+    if (children && sessionId && apiKey && token) {
+      return (
+        <OTContext.Provider value={{ sessionId, sessionInfo }}>
+          <View style={style}>
+            { children }
+          </View>
+        </OTContext.Provider>
+      );
+    }
+    return <View />;
+  }
+}
+
+OTSession.propTypes = {
+  apiKey: PropTypes.string.isRequired,
+  sessionId: PropTypes.string.isRequired,
+  token: PropTypes.string.isRequired,
+  children: PropTypes.oneOfType([
+    PropTypes.element,
+    PropTypes.arrayOf(PropTypes.element),
+  ]),
+  style: ViewPropTypes.style,
+  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
+};
+
+OTSession.defaultProps = {
+  eventHandlers: {},
+  options: {},
+  signal: {},
+  style: {
+    flex: 1
+  },
+};

package/src/video/OTSubscriber.js

@@ -0,0 +1,148 @@
+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 { sanitizeSubscriberEvents, sanitizeProperties, sanitizeFrameRate, sanitizeResolution, sanitizeAudioVolume } from './helpers/OTSubscriberHelper';
+import { getOtrnErrorEventHandler, sanitizeBooleanProperty } from './helpers/OTHelper';
+import OTContext from './contexts/OTContext';
+
+export default class OTSubscriber extends Component {
+  constructor(props, context) {
+    super(props, context);
+    this.state = {
+      streams: [],
+      subscribeToSelf: props.subscribeToSelf || false
+    };
+    this.componentEvents = {
+      streamDestroyed: Platform.OS === 'android' ? 'session:onStreamDropped' : 'session:streamDestroyed',
+      streamCreated: Platform.OS === 'android' ? 'session:onStreamReceived' : 'session:streamCreated',
+      captionReceived: Platform.OS === 'android' ? 'session:onCaptionText' : 'subscriber:subscriberCaptionReceived:',
+    };
+    this.componentEventsArray = Object.values(this.componentEvents);
+    this.otrnEventHandler = getOtrnErrorEventHandler(this.props.eventHandlers);
+    this.initComponent();
+  }
+  initComponent = () => {
+    const { eventHandlers } = this.props;
+    const { sessionId } = this.context;
+    if (sessionId) {
+      this.streamCreated = nativeEvents.addListener(`${sessionId}:${this.componentEvents.streamCreated}`,
+        stream => this.streamCreatedHandler(stream));
+      this.streamDestroyed = nativeEvents.addListener(`${sessionId}:${this.componentEvents.streamDestroyed}`,
+        stream => this.streamDestroyedHandler(stream));
+      const subscriberEvents = sanitizeSubscriberEvents(eventHandlers);
+      OT.setJSComponentEvents(this.componentEventsArray);
+      setNativeEvents(subscriberEvents);
+    }
+  }
+  componentDidUpdate() {
+    const { streamProperties } = this.props;
+    if (!isEqual(this.state.streamProperties, streamProperties)) {
+      each(streamProperties, (individualStreamProperties, streamId) => {
+        const { subscribeToAudio, subscribeToVideo, subscribeToCaptions, preferredResolution, preferredFrameRate, audioVolume } = individualStreamProperties;
+        if (subscribeToAudio !== undefined) {
+          OT.subscribeToAudio(streamId, sanitizeBooleanProperty(subscribeToAudio));
+        }
+        if (subscribeToVideo !== undefined) {
+          OT.subscribeToVideo(streamId, sanitizeBooleanProperty(subscribeToVideo));
+        }
+        if (subscribeToCaptions !== undefined) {
+          OT.subscribeToCaptions(streamId, sanitizeBooleanProperty(subscribeToCaptions));
+        }
+        if (preferredResolution !== undefined) {
+          OT.setPreferredResolution(streamId, sanitizeResolution(preferredResolution));
+        }
+        if (preferredFrameRate !== undefined) {
+          OT.setPreferredFrameRate(streamId, sanitizeFrameRate(preferredFrameRate));
+        }
+        if (audioVolume !== undefined) {
+          OT.setAudioVolume(streamId, sanitizeAudioVolume(audioVolume));
+        }
+      });
+      this.setState({ streamProperties });
+    }
+  }
+  componentWillUnmount() {
+    this.streamCreated.remove();
+    this.streamDestroyed.remove();
+    OT.removeJSComponentEvents(this.componentEventsArray);
+    const events = sanitizeSubscriberEvents(this.props.eventHandlers);
+    removeNativeEvents(events);
+  }
+  streamCreatedHandler = (stream) => {
+    const { subscribeToSelf } = this.state;
+    const { streamProperties, properties } = this.props;
+    const { sessionId, sessionInfo } = this.context;
+    const subscriberProperties = streamProperties[stream.streamId] ?
+      sanitizeProperties(streamProperties[stream.streamId]) :
+      sanitizeProperties(properties);
+      // 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)) {
+      OT.subscribeToStream(stream.streamId, sessionId, subscriberProperties, (error) => {
+        if (error) {
+          this.otrnEventHandler(error);
+        } else {
+          this.setState({
+            streams: [...this.state.streams, stream.streamId],
+          });
+        }
+      });
+    }
+  }
+  streamDestroyedHandler = (stream) => {
+    OT.removeSubscriber(stream.streamId, (error) => {
+      if (error) {
+        this.otrnEventHandler(error);
+      } else {
+        const indexOfStream = this.state.streams.indexOf(stream.streamId);
+        const newState = this.state.streams.slice();
+        newState.splice(indexOfStream, 1);
+        this.setState({
+          streams: newState,
+        });
+      }
+    });
+  }
+  getRtcStatsReport(streamId) {
+    OT.getSubscriberRtcStatsReport(streamId);
+  }
+  render() {
+    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;
+  }
+}
+
+const viewPropTypes = View.propTypes;
+OTSubscriber.propTypes = {
+  ...viewPropTypes,
+  children: PropTypes.func,
+  properties: PropTypes.object, // eslint-disable-line react/forbid-prop-types
+  eventHandlers: PropTypes.object, // eslint-disable-line react/forbid-prop-types
+  streamProperties: PropTypes.object, // eslint-disable-line react/forbid-prop-types
+  containerStyle: PropTypes.object, // eslint-disable-line react/forbid-prop-types
+  getRtcStatsReport: PropTypes.object, // eslint-disable-line react/forbid-prop-types
+  subscribeToSelf: PropTypes.bool
+};
+
+OTSubscriber.defaultProps = {
+  properties: {},
+  eventHandlers: {},
+  streamProperties: {},
+  containerStyle: {},
+  subscribeToSelf: false,
+  getRtcStatsReport: {},
+  subscribeToCaptions: false,
+};
+
+OTSubscriber.contextType = OTContext;

package/src/video/contexts/OTContext.js

@@ -0,0 +1,5 @@
+import React from 'react';
+
+const OTContext = React.createContext({});
+
+export default OTContext;

package/src/video/helpers/OTHelper.js

@@ -0,0 +1,91 @@
+import { Platform } from 'react-native';
+import { handleError } from '../OTError';
+import { each } from 'underscore';
+import axios from 'axios';
+
+const reassignEvents = (type, customEvents, events, eventKey) => {
+  const newEvents = {};
+  const preface = `${type}:`;
+  const platform = Platform.OS;
+
+  each(events, (eventHandler, eventType) => {
+    if (customEvents[platform][eventType] !== undefined && eventKey !== undefined) {
+      newEvents[`${eventKey}:${preface}${customEvents[platform][eventType]}`] = eventHandler;
+    } else if (customEvents[platform][eventType] !== undefined) {
+      newEvents[`${preface}${customEvents[platform][eventType]}`] = eventHandler;
+    } else if (events['otrnError']) {
+      // ignore otrnError event because it's for the js layer
+    } else {
+      handleError(`${eventType} is not a supported event`);
+    }
+  });
+
+  // Set a default handler
+  each(customEvents[platform], (event) => {
+    if (eventKey !== undefined && !newEvents[`${eventKey}:${preface}${event}`]) {
+      newEvents[`${eventKey}:${preface}${event}`] = () => { };
+    }
+  });
+
+  return newEvents;
+};
+
+const sanitizeBooleanProperty = property => (property || property === undefined ? true : property);
+
+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) => {
+  const body = {
+    payload: {
+      platform: Platform.OS,
+      otrn_version: require('../../../package.json').version,
+      platform_version: Platform.Version,
+    },
+    payload_type: 'info',
+    action,
+    partner_id: apiKey,
+    session_id: sessionId,
+    source: require('../../../package.json').repository.url,
+  };
+  if (connectionId) {
+    body.connectionId = connectionId;
+  }
+  return body;
+};
+
+const logRequest = (body, proxyUrl) => {
+  const hlgUrl = 'hlg.tokbox.com/prod/logging/ClientEvent';
+  const url = proxyUrl ? `${proxyUrl}/${hlgUrl}` : `https://${hlgUrl}`;
+  axios({
+    url,
+    method: 'post',
+    data: JSON.stringify(body),
+  })
+    .then(() => {
+      // response complete
+    })
+    .catch(() => {
+      handleError('logging');
+    });
+};
+
+const logOT = ({ apiKey, sessionId, action, connectionId, proxyUrl }) => {
+  logRequest(getLog(apiKey, sessionId, action, connectionId), proxyUrl);
+};
+
+export {
+  sanitizeBooleanProperty,
+  reassignEvents,
+  logOT,
+  getOtrnErrorEventHandler,
+};

package/src/video/helpers/OTPublisherHelper.js

@@ -0,0 +1,122 @@
+import { sanitizeBooleanProperty, reassignEvents } from './OTHelper';
+
+const sanitizeResolution = (resolution) => {
+  switch (resolution) {
+    case '352x288':
+      return 'LOW';
+    case '640x480':
+      return 'MEDIUM';
+    case '1280x720':
+      return 'HIGH';
+    case '1920x1080':
+      return 'HIGH_1080P';
+    default:
+      return 'MEDIUM';
+  }
+};
+
+const sanitizeFrameRate = (frameRate) => {
+  switch (frameRate) {
+    case 1:
+      return 1;
+    case 7:
+      return 7;
+    case 15:
+      return 15;
+    default:
+      return 30;
+  }
+};
+
+const sanitizeCameraPosition = (cameraPosition = 'front') => (cameraPosition === 'front' ? 'front' : cameraPosition);
+
+const sanitizeVideoSource = (videoSource = 'camera') => (videoSource === 'camera' ? 'camera' : 'screen');
+
+const sanitizeAudioBitrate = (audioBitrate = 40000) =>
+  (audioBitrate < 6000 || audioBitrate > 510000 ? 40000 : audioBitrate);
+
+const sanitizeVideoContentHint = (sanitizeVideoContentHint = '') => {
+  switch (sanitizeVideoContentHint) {
+    case 'motion':
+      return 'motion';
+    case 'detail':
+      return 'detail';
+    case 'text':
+      return 'text';
+    default:
+      return '';
+  }
+};
+
+const sanitizeProperties = (properties) => {
+  if (typeof properties !== 'object') {
+    return {
+      videoTrack: true,
+      audioTrack: true,
+      publishAudio: true,
+      publishVideo: true,
+      publishCaptions: false,
+      name: '',
+      cameraPosition: 'front',
+      audioFallbackEnabled: true,
+      audioBitrate: 40000,
+      enableDtx: false,
+      frameRate: 30,
+      resolution: sanitizeResolution(),
+      videoContentHint: '',
+      videoSource: 'camera',
+      scalableScreenshare: false,
+    };
+  }
+  return {
+    videoTrack: sanitizeBooleanProperty(properties.videoTrack),
+    audioTrack: sanitizeBooleanProperty(properties.audioTrack),
+    publishAudio: sanitizeBooleanProperty(properties.publishAudio),
+    publishVideo: sanitizeBooleanProperty(properties.publishVideo),
+    publishCaptions: sanitizeBooleanProperty(properties.publishCaptions),
+    name: properties.name ? properties.name : '',
+    cameraPosition: sanitizeCameraPosition(properties.cameraPosition),
+    audioFallbackEnabled: sanitizeBooleanProperty(properties.audioFallbackEnabled),
+    audioBitrate: sanitizeAudioBitrate(properties.audioBitrate),
+    enableDtx: sanitizeBooleanProperty(properties.enableDtx ? properties.enableDtx : false),
+    frameRate: sanitizeFrameRate(properties.frameRate),
+    resolution: sanitizeResolution(properties.resolution),
+    videoContentHint: sanitizeVideoContentHint(properties.videoContentHint),
+    videoSource: sanitizeVideoSource(properties.videoSource),
+    scalableScreenshare: Boolean(properties.scalableScreenshare),
+  };
+};
+
+const sanitizePublisherEvents = (publisherId, events) => {
+  if (typeof events !== 'object') {
+    return {};
+  }
+  const customEvents = {
+    ios: {
+      streamCreated: 'streamCreated',
+      streamDestroyed: 'streamDestroyed',
+      error: 'didFailWithError',
+      audioLevel: 'audioLevelUpdated',
+      audioNetworkStats: 'audioStats',
+      rtcStatsReport: 'rtcStatsReport',
+      videoNetworkStats: 'videoStats',
+      muteForced: 'muteForced',
+    },
+    android: {
+      streamCreated: 'onStreamCreated',
+      streamDestroyed: 'onStreamDestroyed',
+      error: 'onError',
+      audioLevel: 'onAudioLevelUpdated',
+      audioNetworkStats: 'onAudioStats',
+      rtcStatsReport: 'onRtcStatsReport',
+      videoNetworkStats: 'onVideoStats',
+      muteForced: 'onMuteForced',
+    },
+  };
+  return reassignEvents('publisher', customEvents, events, publisherId);
+};
+
+export {
+  sanitizeProperties,
+  sanitizePublisherEvents,
+};