v0.11.0

.npmignore

@@ -1,6 +1,8 @@
 example/
 src/
 test/
+types/index.test-d.ts
+types/tsconfig.json
 karma.conf.js
 .travis.yml
 .npmignore

.travis.yml

@@ -1,13 +1,10 @@
 sudo: required
-dist: trusty
+services:
+  - xvfb
 language: node_js
 node_js:
   - 6
 
-before_install:
-  - export DISPLAY=:99.0
-  - sh -e /etc/init.d/xvfb start
-
 script: ./node_modules/.bin/run-tests
 
 after_failure:

package.json

@@ -1,9 +1,10 @@
 {
   "name": "opentok-react",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "description": "React components for OpenTok.js",
   "main": "dist/index.js",
   "scripts": {
+    "types": "tsd types",
     "test": "karma start",
     "unit": "karma start --single-run",
     "prepublish": "npm run build",
@@ -41,6 +42,7 @@
     "uuid": "^3.0.1"
   },
   "devDependencies": {
+    "@types/react": "^16.9.34",
     "babel-cli": "^6.18.0",
     "babel-eslint": "^7.1.1",
     "babel-preset-es2015": "^6.9.0",
@@ -69,11 +71,13 @@
     "react-dom": "^15.5.0",
     "react-test-renderer": "^15.5.4",
     "travis-multirunner": "^4.5.0",
+    "tsd": "^0.11.0",
     "watchify": "^3.8.0"
   },
   "browserify": {
     "transform": [
       "babelify"
     ]
-  }
+  },
+  "types": "./types/index.d.ts"
 }

src/OTSubscriber.js

@@ -53,10 +53,13 @@ export default class OTSubscriber extends Component {
       this.setState({ subscriber: null });
       return;
     }
-
-    const container = document.createElement('div');
-    container.setAttribute('class', 'OTSubscriberContainer');
-    this.node.appendChild(container);
+    const properties = this.props.properties || {};
+    let container;
+    if (properties.insertDefaultUI !== false) {
+      container = document.createElement('div');
+      container.setAttribute('class', 'OTSubscriberContainer');
+      this.node.appendChild(container);
+    }
 
     this.subscriberId = uuid();
     const { subscriberId } = this;

types/index.d.ts

@@ -0,0 +1,72 @@
+import React from 'react';
+import { Session, Error, PublisherProperties, Stream, SubscriberProperties, PublisherEventHandlers, SessionEventHandlers, SubscriberEventHandlers, Subscriber, Publisher } from './opentok';
+
+export interface OTPublisherRef {
+  getPublisher(): Publisher;
+}
+
+export interface OTPublisherProps {
+  session?: Session;
+  properties?: PublisherProperties;
+  ref?: React.Ref<OTPublisherRef>;
+  eventHandlers?: PublisherEventHandlers;
+  onInit?: () => void;
+  onPublish?: () => void;
+  onError?: (error: Error) => void;
+}
+
+export interface OTSessionProps {
+  apiKey: string;
+  sessionId: string;
+  token: string;
+  eventHandlers?: SessionEventHandlers;
+  onConnect?: () => void;
+  onError?: (error: Error) => void;
+}
+
+export interface OTStreamsProps {
+  children: React.ReactElement;
+  session?: Session;
+  streams?: Stream[];
+}
+
+export interface OTSubscriberRef {
+  getSubscriber(): Subscriber;
+}
+
+export interface OTSubscriberProps {
+  eventHandlers?: SubscriberEventHandlers;
+  properties?: SubscriberProperties;
+  ref?: React.Ref<OTSubscriberRef>;
+  session?: Session;
+  stream?: Stream;
+  onSubscribe?: () => void;
+  onError?: (error: Error) => void;
+}
+
+export const OTPublisher: React.ComponentType<OTPublisherProps>;
+export const OTSession: React.ComponentType<OTSessionProps>;
+export const OTStreams: React.ComponentType<OTStreamsProps>;
+export const OTSubscriber: React.ComponentType<OTSubscriberProps>;
+
+export interface CreateSessionOptions {
+  apiKey: string;
+  sessionId: string;
+  token: string;
+  onStreamsUpdated?: (streams: Stream[]) => void;
+}
+
+export interface SessionHelper {
+  session: Session;
+  streams: Stream[];
+  disconnect: () => void;
+}
+
+export function createSession(options: CreateSessionOptions): SessionHelper;
+
+export interface PreloadScriptProps {
+  loadingDelegate?: React.ReactNode;
+  opentokClientUrl?: string;
+}
+
+export function preloadScript(component: React.ComponentType): React.ComponentType<PreloadScriptProps>;

types/index.test-d.ts

@@ -0,0 +1,183 @@
+import React from 'react';
+import { expectNotAssignable, expectAssignable } from 'tsd';
+import { OTSessionProps, OTPublisherProps, OTStreamsProps, OTSubscriberProps, OTSubscriberRef, OTPublisherRef } from ".";
+import { Error, Event, ArchiveEvent, SignalEvent, Session, AudioLevelUpdatedEvent, Stream, SubscriberProperties } from "./opentok";
+
+/**
+ * OTSessionProps
+ */
+expectNotAssignable<OTSessionProps>({});
+expectNotAssignable<OTSessionProps>({
+  apiKey: ''
+});
+expectNotAssignable<OTSessionProps>({
+  apiKey: '',
+  sessionId: ''
+});
+
+expectAssignable<OTSessionProps>({
+  apiKey: '',
+  sessionId: '',
+  token: ''
+});
+expectAssignable<OTSessionProps>({
+  apiKey: '',
+  sessionId: '',
+  token: '',
+  eventHandlers: {}
+});
+expectAssignable<OTSessionProps>({
+  apiKey: '',
+  sessionId: '',
+  token: '',
+  eventHandlers: {
+    archiveStarted: (event: ArchiveEvent) => {}
+  }
+});
+expectAssignable<OTSessionProps>({
+  apiKey: '',
+  sessionId: '',
+  token: '',
+  eventHandlers: {
+    archiveStarted: (event: ArchiveEvent) => {},
+    'signal:foo': (event: SignalEvent) => {},
+    'archiveStarted streamCreated': (event: Event) => {}
+  }
+});
+
+declare const session: Session;
+declare const publisherRef: React.RefObject<OTPublisherRef>;
+
+/**
+ * OTPublisherProps
+ */
+expectNotAssignable<OTPublisherProps>({
+  session: null
+});
+expectAssignable<OTPublisherProps>({
+  session,
+});
+expectAssignable<OTPublisherProps>({
+  session,
+  properties: {}
+});
+expectAssignable<OTPublisherProps>({
+  properties: {
+    audioBitrate: 10000
+  }
+});
+expectAssignable<OTPublisherProps>({
+  eventHandlers: {}
+});
+expectAssignable<OTPublisherProps>({
+  ref: undefined
+});
+expectAssignable<OTPublisherProps>({
+  ref: (instance: OTPublisherRef | null) => {}
+});
+expectAssignable<OTPublisherProps>({
+  ref: publisherRef
+});
+expectAssignable<OTPublisherProps>({
+  eventHandlers: {
+    accessAllowed: (event: Event) => undefined,
+    accessDenied: (event: Event<'accessDenied'>) => undefined,
+    destroyed: event => undefined,
+    audioLevelUpdated: (event: AudioLevelUpdatedEvent) => undefined
+  }
+});
+expectAssignable<OTPublisherProps>({
+  onInit: () => undefined
+});
+expectAssignable<OTPublisherProps>({
+  onPublish: () => undefined
+});
+expectAssignable<OTPublisherProps>({
+  onError: () => undefined
+});
+expectAssignable<OTPublisherProps>({
+  onError: (error: Error) => undefined
+});
+
+declare const node: React.ReactNode;
+declare const nodeArray: React.ReactNodeArray;
+declare const element: React.ReactElement;
+declare const stream: Stream;
+
+/**
+ * OTStreamsProps
+ */
+expectNotAssignable<OTStreamsProps>({});
+expectNotAssignable<OTStreamsProps>({ session });
+expectNotAssignable<OTStreamsProps>({ session, streams: [] });
+expectNotAssignable<OTStreamsProps>({
+  children: node
+});
+expectNotAssignable<OTStreamsProps>({
+  children: nodeArray
+});
+expectAssignable<OTStreamsProps>({
+  children: element
+});
+expectAssignable<OTStreamsProps>({
+  children: element,
+  session
+});
+expectAssignable<OTStreamsProps>({
+  children: element,
+  streams: []
+});
+expectAssignable<OTStreamsProps>({
+  children: element,
+  streams: [stream]
+});
+
+declare const subscriberProperties: SubscriberProperties;
+declare const subscriberRef: React.RefObject<OTSubscriberRef>;
+
+/**
+ * OTSubscriberProps
+ */
+expectAssignable<OTSubscriberProps>({});
+expectAssignable<OTSubscriberProps>({ session });
+expectAssignable<OTSubscriberProps>({ stream });
+expectAssignable<OTSubscriberProps>({ onSubscribe: () => undefined });
+expectAssignable<OTSubscriberProps>({ onError: () => undefined });
+expectAssignable<OTSubscriberProps>({ onError: error => undefined });
+expectAssignable<OTSubscriberProps>({ onError: (error: Error) => undefined });
+expectAssignable<OTSubscriberProps>({
+  properties: subscriberProperties
+});
+expectNotAssignable<OTSubscriberProps>({
+  properties: null
+});
+expectNotAssignable<OTSubscriberProps>({
+  properties: {
+    fitMode: NaN
+  }
+});
+expectAssignable<OTSubscriberProps>({
+  eventHandlers: {}
+});
+expectAssignable<OTSubscriberProps>({
+  ref: undefined
+});
+expectAssignable<OTSubscriberProps>({
+  ref: (instance: OTSubscriberRef | null) => {}
+});
+expectAssignable<OTSubscriberProps>({
+  ref: subscriberRef
+});
+expectAssignable<OTSubscriberProps>({
+  eventHandlers: {
+    videoDimensionsChanged: event => undefined,
+    audioBlocked: (event: Event) => undefined,
+    audioLevelUpdated: (event: AudioLevelUpdatedEvent) => undefined,
+    videoElementCreated: (event: Event) => undefined
+  }
+});
+expectNotAssignable<OTSubscriberProps>({
+  eventHandlers: {
+    'foo': (event: Event) => undefined
+  }
+});