Merge pull request #18 from sean-perkins/release-1.4.1

Release 1.4.1 - Patches

README.md

@@ -1,6 +1,6 @@
 # Nativescript OpenTok
 
-[![npm](https://img.shields.io/npm/v/nativescript-opentok.svg?maxAge=2592000?style=plastic)](https://www.npmjs.com/package/nativescript-opentok) 
+[![npm](https://img.shields.io/npm/v/nativescript-opentok.svg?maxAge=2592000?style=plastic)](https://www.npmjs.com/package/nativescript-opentok)
 [![npm](https://img.shields.io/npm/dt/nativescript-opentok.svg?maxAge=2592000?style=plastic)](https://www.npmjs.com/package/nativescript-opentok)
 
 A Nativescript plugin for the OpenTok iOS and (coming soon Android) SDK.
@@ -22,22 +22,23 @@ Node Package Manager (NPM)
 
 ### Integration
 
-#### Routed Sessions 
+#### Routed Sessions
 ##### View
-You will first need to import the custom element into the {N} xml view. This can be accomplished by adding this snippet: `xmlns:OT="nativescript-opentok"` to your existing `Page` element tag. 
+You will first need to import the custom element into the {N} xml view. This can be accomplished by adding this snippet: `xmlns:OT="nativescript-opentok"` to your existing `Page` element tag.
 
-The basic integration example would include the following declarations for publisher and subscriber. Notice subscriber is any element with `id="subscriber"`. You will need to provide a valid sessionId, api (key) and token to the publisher element. 
+The basic integration example would include the following declarations for publisher and subscriber. Notice subscriber is any element with `id="subscriber"`. You will need to provide a valid sessionId, api (key) and token to the publisher element.
 ```
-<OT:TNSOTPublisher sessionId="{{ sessionId }}" api="{{ api }}" token="{{ publisherToken }}"></OT:TNSOTPublisher>
-<StackLayout id="subscriber" verticalAlignment="top" horizontalAlignment="right" margin="10" width="100" height="100"></StackLayout>
+<StackLayout id="subscriber" width="100%" height="100%"></StackLayout>
+<OT:TNSOTPublisher id="publisher" sessionId="{{ sessionId }}" api="{{ api }}" token="{{ publisherToken }}" verticalAlignment="top" horizontalAlignment="right" margin="10" width="100" height="100"></OT:TNSOTPublisher>
  ```
 
 ### Special Articles
 - [Overlay UI on the Video Stream](https://github.com/sean-perkins/nativescript-opentok/wiki/Overlay-UI-on-Video-Stream)
 
 ### Images
-
-![Image](http://i.imgur.com/2okX9Sb.png)
+|iPhone|iPad|
+|---|---|
+|![iPhone Image](http://i.imgur.com/tjnfeQ7.png)|![iPad Image](http://i.imgur.com/2Ubjw0W.png)|
 
 ### Notes
 - Publishing is not supported in the Simulator because it does not have access to your webcam. You may see a yellow tea-kettle instead.

demo/app/main-page.xml

@@ -3,15 +3,16 @@
     xmlns:OT="nativescript-opentok" loaded="pageLoaded">
     <GridLayout rows="*,auto,auto">
         <GridLayout>
-            <OT:TNSOTPublisher id="publisher" loaded="publisherLoaded" sessionId="{{ sessionId }}" api="{{ api }}" token="{{ publisherToken2 }}"></OT:TNSOTPublisher>
-            <StackLayout id="subscriber" verticalAlignment="top" horizontalAlignment="right" margin="10" width="100" height="100"></StackLayout>
+            <StackLayout id="subscriber" width="100%" height="100%"></StackLayout>
+            <OT:TNSOTPublisher id="publisher" sessionId="{{ sessionId }}" api="{{ api }}" token="{{ publisherToken }}" verticalAlignment="top" horizontalAlignment="right" margin="10" width="100" height="100"></OT:TNSOTPublisher>
         </GridLayout>
 
-        <StackLayout backgroundColor="white" height="50">
-            <StackLayout orientation="horizontal">
+        <StackLayout verticalAlignment="bottom" marginBottom="50">
+            <StackLayout>
                 <Button text="Switch Camera" tap="{{ switchCamera }}" />
                 <Button text="Toggle Camera" tap="{{ toggleVideo }}" />
                 <Button text="Toggle Mute" tap="{{ toggleMute }}" />
+                <Button text="Stop Publishing" tap="{{ unpublish }}" />
             </StackLayout>
         </StackLayout>
     </GridLayout>

demo/app/main-view-model.ts

@@ -31,4 +31,9 @@ export class Demo extends Observable {
         this.publisher.ios.publishAudio = !this.publisher.ios.publishAudio;
     }
 
+    unpublish() {
+        this.publisher.session.unpublish();
+        console.log('unpublish');
+    }
+
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "nativescript-opentok",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "description": "Integrates OpenTok for NativeScript.",
   "main": "opentok.js",
   "typings": "./index.d.ts",

src/ios/publisher.ts

@@ -12,8 +12,10 @@ declare var OTPublisher: any,
 
 export class TNSOTPublisher extends ContentView {
 
-    private _publisherKitDelegate: any;
     private _ios: any;
+    private _publisherKitDelegate: any;
+    private _session: TNSOTSession;
+
     private _sessionId: any;
     private _apiKey: string;
     private _token: string;
@@ -32,15 +34,15 @@ export class TNSOTPublisher extends ContentView {
 
     private connect(): void {
         if(this._apiKey && this._sessionId && this._token) {
-            let session = new TNSOTSession(this._apiKey);
-            session.initSession(this._sessionId).then((result) => {
-                session.connect(this._token).then(() => {}, (error) => {
+            this._session = new TNSOTSession(this._apiKey);
+            this._session.initSession(this._sessionId).then((result) => {
+                this._session.connect(this._token).then(() => {}, (error) => {
                     console.log('Failed to connect to session: ' + error);
                 });
             }, (error) => {
                 console.log('Failed to initialize session: ' + error);
             });
-            session.events.on('sessionDidConnect', (result) => {
+            this._session.events.on('sessionDidConnect', (result) => {
                 this.publishStream(result.object);
             });
         }
@@ -53,9 +55,6 @@ export class TNSOTPublisher extends ContentView {
         } catch (error) {
             console.log(error);
         }
-        if (this._ios) {
-            this._ios.view.frame = CGRectMake(0, 0, screen.mainScreen.widthDIPs, screen.mainScreen.heightDIPs);
-        }
     }
 
     get ios(): any {
@@ -92,18 +91,25 @@ export class TNSOTPublisher extends ContentView {
         }
     }
 
-    toggleCamera() {
+    toggleCamera(): void {
         if(this._ios) {
             this._ios.publishVideo = !this._ios.publishVideo;
         }
     }
 
-    toggleMute() {
+    toggleMute():void  {
         if(this._ios) {
             this._ios.publishAudio = !this._ios.publishAudio;
         }
     }
 
+    get session(): TNSOTSession {
+        if(this._session) {
+            this._session.publisher = this._ios;
+        }
+        return this._session;
+    }
+
     get events(): Observable {
         return this._publisherKitDelegate.events;
     }
@@ -146,6 +152,7 @@ class TNSPublisherKitDelegateImpl extends NSObject {
                 })
             });
         }
+        topmost().currentPage.ios.view.removeFromSuperview(publisher.view);
     }
 
     public publisherDidFailWithError(publisher: any, error: any) {

src/ios/session.ts

@@ -1,5 +1,5 @@
 import {Observable} from 'data/observable';
-
+import {topmost} from 'ui/frame';
 import {TNSOTPublisher} from './publisher';
 import {TNSOTSubscriber} from './subscriber';
 
@@ -69,18 +69,43 @@ export class TNSOTSession {
         });
     }
 
-    disconnect(): Promise<any> {
-        return new Promise((resolve, reject) => {
-            if(this._session) {
-                try {
-                    this._session.disconnect();
-                    resolve();
-                } catch(error) {
-                    console.log(error);
-                    reject(error);
-                }
+    disconnect(): void {
+        let session = this._session;
+        if(session) {
+            try {
+                session.disconnect();
+            } catch(error) {
+                console.log(error);
             }
-        });
+        }
+    }
+
+    unpublish(): void {
+        let session = this._session;
+        try {
+            if(session) {
+                session.unpublish(this._publisher);
+            }
+        }
+        catch(error) {
+            console.log(error);
+        }
+    }
+
+    unsubscribe(): void {
+        let session = this._session;
+        try {
+            if(session) {
+                session.unsubscribe();
+            }
+        }
+        catch(error) {
+            console.log(error);
+        }
+    }
+
+    set publisher(publisher) {
+        this._publisher = publisher;
     }
 
     /**
@@ -185,7 +210,7 @@ class TNSSessionDelegateImpl extends NSObject {
         owner.subscriber.subscribe(session, stream);
     }
 
-    sessionStreamDestoryed(session: any, stream: any) {
+    sessionStreamDestroyed(session: any, stream: any) {
         if(this._events) {
             this._events.notify({
                 eventName: 'streamDestroyed',
@@ -195,6 +220,10 @@ class TNSSessionDelegateImpl extends NSObject {
                 })
             });
         }
+        let view = topmost().currentPage.getViewById('subscriber');
+        if(view) {
+            // view.ios.removeFromSuperview();
+        }
     }
 
     sessionDidFailWithError(session: any, error: any) {

src/ios/subscriber.ts

@@ -26,8 +26,10 @@ export class TNSOTSubscriber  {
 
     addSubscriberToView(subscriber: any) {
         let view = topmost().currentPage.getViewById('subscriber');
-        this._subscriber.view.frame = CGRectMake(view.originX, view.originY, view.width, view.height);
-        view.ios.addSubview(this._subscriber.view);
+        if(view) {
+            this._subscriber.view.frame = CGRectMake(0, 0, screen.mainScreen.widthDIPs, screen.mainScreen.heightDIPs);
+            view.ios.addSubview(this._subscriber.view);
+        }
     }
 
 }