OpenVidu users refactored to openvidu-instance component

openvidu-browser/ts/OpenVidu/Subscriber.ts

@@ -27,7 +27,7 @@ export class Subscriber {
             callback(event);
         });
         if (eventName == 'videoElementCreated') {
-            if (this.stream.isReady) {
+            if (this.stream.isVideoELementCreated) {
                 this.ee.emitEvent('videoElementCreated', [{
                     element: this.stream.getVideoElement()
                 }]);

openvidu-browser/ts/OpenViduInternal/Stream.ts

@@ -266,7 +266,7 @@ export class Stream {
 
         if (this.local && !this.displayMyRemote()) {
             this.video.muted = true;
-            this.video.onplay = () => {
+            this.video.onplaying = () => {
                 console.info("Local 'Stream' with id [" + this.getId() + "] video is now playing");
                 this.ee.emitEvent('video-is-playing', [{
                     element: this.video
@@ -595,7 +595,7 @@ export class Stream {
                     let thumbnailId = videoElement.thumb;
                     let video = videoElement.video;
                     video.srcObject = this.wrStream;
-                    video.onplay = () => {
+                    video.onplaying = () => {
                         if (this.local && this.displayMyRemote()) {
                             console.info("Your own remote 'Stream' with id [" + this.getId() + "] video is now playing");
                             this.ee.emitEvent('remote-video-is-playing', [{

openvidu-testapp/src/app/app.component.css

@@ -4,5 +4,6 @@
 }
 
 main {
-  padding: 50px
+  padding: 50px;
+  padding-top: 30px;
 }

openvidu-testapp/src/app/app.module.ts

@@ -10,11 +10,13 @@ import { AppComponent } from './app.component';
 import { DashboardComponent } from './components/dashboard/dashboard.component';
 
 import { OpenviduRestService } from './services/openvidu-rest.service';
+import { OpenviduInstanceComponent } from './components/openvidu-instance/openvidu-instance.component';
 
 @NgModule({
   declarations: [
     AppComponent,
-    DashboardComponent
+    DashboardComponent,
+    OpenviduInstanceComponent
   ],
   imports: [
     BrowserModule,

openvidu-testapp/src/app/components/dashboard/dashboard.component.css

@@ -1,5 +1,7 @@
 .demo-tab-content {
-  margin-top: 50px;
+  margin-top: 30px;
+  padding-left: 10px;
+  padding-right: 10px;
 }
 
 table {
@@ -26,32 +28,6 @@ th {
   padding-top: 16px;
 }
 
-md-card {
+app-openvidu-instance {
-  background-color: rgba(77, 77, 77, 0.05);
+  display: inline-block;
-}
-
-.join-card {
-  width: fit-content;
-  margin: auto;
-  margin-bottom: 50px;
-  margin-top: 50px;
-}
-
-.full-width {
-  width: 100%;
-}
-
-.inner-card {
-  border: 1px solid #e1e1e1;
-  padding: 16px;
-  background: #ffffff;
-  margin-top: 20px;
-}
-
-.inner-card h4 {
-  margin-top: 0;
-}
-
-.inner-card md-radio-group {
-  padding-left: 20px;
 }

openvidu-testapp/src/app/components/dashboard/dashboard.component.html

@@ -10,73 +10,25 @@
 
   <md-tab id="audio-video" label="Test session">
     <div class="demo-tab-content">
-
+      <div>
-      <div fxLayout="row" fxLayoutGap="20px" fxFlex="40" fxLayoutAlign="start start">
+        <button id="add-user-btn" md-raised-button color="primary" (click)="users.push(true)">ADD USER</button>
-        <md-card class="join-card">
+        <button id="remove-user-btn" md-raised-button color="primary" (click)="users.pop()" [disabled]="!users.length">REMOVE USER</button>
-          <md-card-title>Join a session</md-card-title>
-          <md-card-content>
-            <form>
-              <md-form-field class="full-width">
-                <input mdInput placeholder="Client data" name="clientData" [(ngModel)]="clientData">
-              </md-form-field>
-              <md-form-field class="full-width">
-                <input mdInput placeholder="Session name" name="sessionName" [(ngModel)]="sessionName">
-              </md-form-field>
-              <div class="inner-card">
-                <h4>Send...</h4>
-                <p>
-                  <md-checkbox [(ngModel)]="sendVideo" name="sendVideo">Video</md-checkbox>
-                </p>
-                <p>
-                  <md-radio-group [(ngModel)]="optionVideo" name="optionVideo" [disabled]="!sendVideo">
-                    <md-radio-button value="video">Video</md-radio-button>
-                    <md-radio-button value="screen">Screen</md-radio-button>
-                  </md-radio-group>
-                </p>
-                <p>
-                  <md-checkbox [(ngModel)]="sendAudio" name="sendAudio">Audio</md-checkbox>
-                </p>
-              </div>
-              <div class="inner-card">
-                <h4>Enter with active...</h4>
-                <md-checkbox [(ngModel)]="activeVideo" name="activeVideo" [disabled]="!sendVideo">Video</md-checkbox>
-                <md-checkbox [(ngModel)]="activeAudio" name="activeAudio" [disabled]="!sendAudio">Audio</md-checkbox>
-              </div>
-            </form>
-          </md-card-content>
-          <md-card-actions>
-            <button md-button id="join-btn" (click)="joinSession()">JOIN</button>
-          </md-card-actions>
-        </md-card>
-      </div>
-
-      <div *ngIf="session" fxLayout="row" fxLayoutGap="20px" fxFlex="60" fxLayoutAlign="start start">
-        <div id="session">
-          <div id="session-header">
-            <h1 id="session-title">{{sessionName}}</h1>
-            <button md-raised-button color="warn" (click)="leaveSession()">Leave session</button>
-          </div>
-          <div id="video-container"></div>
-        </div>
       </div>
+      <app-openvidu-instance *ngFor="let user of users" [openviduURL]="openviduURL" [openviduSecret]="openviduSecret"></app-openvidu-instance>
     </div>
   </md-tab>
 
-  <div fxLayout="row" fxLayoutGap="20px" fxLayoutAlign="start space-around">
-
-  </div>
-
   <md-tab id="api-rest" label="API REST">
     <div class="demo-tab-content">
       <div fxLayout="row" fxLayoutGap="20px" fxLayoutAlign="start space-around">
         <div fxLayout="column" fxFlex="45" fxFlexAlign="center" fxFill>
-          <button md-raised-button color="primary" (click)="getSessionId()">Get sessionId</button>
+          <button md-raised-button color="primary" (click)="getSessionId()">GET SESSIONID</button>
         </div>
         <div fxLayout="column" fxFlex="45" fxFlexAlign="center" fxFill>
-          <button md-raised-button color="primary" (click)="getToken()" [disabled]="getTokenDisabled()">Get token</button>
+          <button md-raised-button color="primary" (click)="getToken()" [disabled]="getTokenDisabled()">GET TOKEN</button>
         </div>
         <div fxLayout="column" fxFlex="10" fxFlexAlign="center" fxFill>
-          <button md-raised-button color="warn" (click)="cleanAllSessions()" [disabled]="data.length == 0">Clean sessions</button>
+          <button md-raised-button color="warn" (click)="cleanAllSessions()" [disabled]="data.length == 0">CLEAN</button>
         </div>
       </div>
 

openvidu-testapp/src/app/components/dashboard/dashboard.component.ts

@@ -1,11 +1,9 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, HostListener, OnInit } from '@angular/core';
 import { OpenviduRestService } from '../../services/openvidu-rest.service';
 import { DataSource } from '@angular/cdk/table';
 import { Observable } from 'rxjs/Observable';
 import 'rxjs/add/observable/of';
 
-import { OpenVidu, Session } from 'openvidu-browser';
-
 import * as colormap from 'colormap';
 const numColors = 64;
 
@@ -20,32 +18,22 @@ export class DashboardComponent implements OnInit {
 
   openviduURL = 'https://localhost:8443';
   openviduSecret = 'MY_SECRET';
+
+  // OpenViduInstance collection
+  users = [true];
+
+  // API REST params
   serverData = 'data_test';
-  selectedRole = 'PUBLISHER';
   selectedRadioIndex = 0;
-
+  selectedRole = 'PUBLISHER';
   openViduRoles = ['SUBSCRIBER', 'PUBLISHER', 'MODERATOR'];
 
-  sendAudio = true;
-  sendVideo = true;
-  optionVideo = 'video';
-  activeAudio = true;
-  activeVideo = true;
-
-  // Join form
-  clientData: string;
-  sessionName: string;
-
-  // OpenVidu objects
-  OV: OpenVidu;
-  session: Session;
-
   // API REST data collected
   data = [];
+
   cg;
 
   constructor(private openviduRestService: OpenviduRestService) {
-    this.generateSessionInfo();
     const options = {
       colormap: [
         { 'index': 0, 'rgb': [135, 196, 213] },
@@ -58,92 +46,10 @@ export class DashboardComponent implements OnInit {
 
   ngOnInit() { }
 
-
+  private addUser() {
-
+    this.users.push(true);
-
-  /* TEST SESSION TAB */
-
-  private generateSessionInfo() {
-    this.sessionName = 'TestSession';
-    this.clientData = 'TestClient';
   }
 
-  private removeHttps = input => input.replace(/^https?:\/\//, '');
-
-  private joinSession(): void {
-    this.OV = new OpenVidu();
-
-    this.session = this.OV.initSession('wss://'
-      + this.removeHttps(this.openviduURL)
-      + '/'
-      + this.sessionName + '?secret='
-      + this.openviduSecret);
-
-    this.session.on('streamCreated', (event) => {
-      const subscriber = this.session.subscribe(event.stream, 'video-container');
-      subscriber.on('videoElementCreated', (e) => {
-        this.appendUserData(e.element, subscriber.stream.connection.data, subscriber.stream.connection);
-      });
-    });
-
-    this.session.on('streamDestroyed', (event) => {
-      this.removeUserData(event.stream.connection);
-    });
-
-    this.session.connect(null, this.clientData, (error) => {
-
-      if (!error) {
-        const publisher = this.OV.initPublisher('video-container', {
-          audio: true,
-          video: true,
-          quality: 'MEDIUM'
-        });
-
-        publisher.on('videoElementCreated', (event) => {
-          this.appendUserData(event.element, this.clientData, null);
-          event.element['muted'] = true;
-        });
-
-        this.session.publish(publisher);
-
-      } else {
-        console.log('There was an error connecting to the session:', error.code, error.message);
-      }
-    });
-  }
-
-  private leaveSession(): void {
-    if (this.session) {
-      this.session.disconnect();
-    }
-    this.session = null;
-    this.OV = null;
-  }
-
-  private appendUserData(videoElement, data, connection) {
-    const dataNode = document.createElement('div');
-    dataNode.className = 'data-node';
-    dataNode.id = 'data-' + (connection ? connection.connectionId : data);
-    dataNode.innerHTML = '<p>' + data + '</p>';
-    videoElement.parentNode.insertBefore(dataNode, videoElement.nextSibling);
-  }
-
-  private removeUserData(connection) {
-    $('#data-' + connection.connectionId).remove();
-  }
-
-  private removeAllUserData() {
-    const nicknameElements = $('.data-node');
-    while (nicknameElements[0]) {
-      nicknameElements[0].remove();
-    }
-  }
-
-  /* TEST SESSION TAB */
-
-
-
-
   /* API REST TAB */
 
   private getSessionId() {

openvidu-testapp/src/app/components/openvidu-instance/openvidu-instance.component.css

@@ -0,0 +1,40 @@
+md-card {
+  background-color: rgba(77, 77, 77, 0.05);
+  margin: 20px 0 5px 0;
+  padding: 20px;
+}
+
+.session-form md-form-field {
+  width: 130px;
+}
+
+.join-card {
+  width: fit-content;
+}
+
+.join-card md-card-content {
+  margin-bottom: 0;
+}
+
+.inner-card {
+  border: 1px solid #e1e1e1;
+  padding: 10px 15px 10px 15px;
+  background: #ffffff;
+}
+
+.inner-card h4 {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+#join-session-btn {
+  margin: 0 0 4px 4px;
+}
+
+md-radio-button {
+  margin-bottom: 8px;
+}
+
+.video-container {
+  min-width: 140px;
+}

openvidu-testapp/src/app/components/openvidu-instance/openvidu-instance.component.html

@@ -0,0 +1,69 @@
+<div fxLayout="row" fxLayoutGap="10px" fxLayoutAlign="start stretch">
+
+  <div fxFlex="noshrink">
+    <md-card class="join-card">
+
+      <md-card-content>
+        <form class="session-form">
+
+          <md-form-field style="margin-right: 10px">
+            <input mdInput placeholder="Session name" name="sessionName" [(ngModel)]="sessionName">
+          </md-form-field>
+
+          <md-form-field>
+            <input mdInput placeholder="Client data" name="clientData" [(ngModel)]="clientData">
+          </md-form-field>
+
+          <div class="inner-card" fxLayout="row" fxLayoutWrap="wrap">
+
+            <div fxFlex="60">
+              <div>
+                <h4>Send...</h4>
+                <div>
+                  <md-checkbox id="send-audio-check" [(ngModel)]="sendAudio" name="sendAudio" class="input-right">Audio</md-checkbox>
+                  <md-checkbox id="send-video-check" [(ngModel)]="sendVideo" name="sendVideo" (click)="toggleRadio()">Video</md-checkbox>
+                </div>
+              </div>
+              <div style="padding-top: 5px;">
+                <h4>Enter with<br>active...</h4>
+                <div>
+                  <md-checkbox id="active-audio-check" [(ngModel)]="activeAudio" name="activeAudio" [checked]="sendAudio" [disabled]="!sendAudio"
+                    class="input-right">Audio</md-checkbox>
+                  <md-checkbox id="active-video-check" [(ngModel)]="activeVideo" name="activeVideo" [checked]="sendVideo" [disabled]="!sendVideo">Video</md-checkbox>
+                </div>
+              </div>
+            </div>
+
+            <div fxFlex="40">
+              <md-radio-group [(ngModel)]="optionVideo" name="optionVideo" [disabled]="!sendVideo">
+                <md-radio-button id="send-video-radio" value="video" [checked]="sendVideo || sendVideoRadio">Video</md-radio-button>
+                <md-radio-button id="send-screen-radio" value="screen" [checked]="sendVideo && !sendVideoRadio" class="input-right">Screen</md-radio-button>
+              </md-radio-group>
+            </div>
+
+          </div>
+
+        </form>
+      </md-card-content>
+
+      <md-card-actions>
+        <button id="join-session-btn" md-button (click)="joinSession()" [disabled]="session">JOIN SESSION</button>
+      </md-card-actions>
+
+    </md-card>
+  </div>
+
+  <div *ngIf="session" fxFlex>
+    <md-card>
+      {{sessionName}}
+      <button md-mini-fab color="warn" (click)="leaveSession()">
+        <md-icon class="md-24" aria-label="Leave icon">clear</md-icon>
+      </button>
+      <div *ngIf="session.connection" fxLayout>
+        <div [attr.id]="'local-vid-' + session.connection.connectionId" fxFlex="135px" class="video-container"></div>
+        <div [attr.id]="'remote-vid-' + session.connection.connectionId" fxFlex="270px" class="video-container"></div>
+      </div>
+    </md-card>
+  </div>
+
+</div>

openvidu-testapp/src/app/components/openvidu-instance/openvidu-instance.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { OpenviduInstanceComponent } from './openvidu-instance.component';
+
+describe('OpenviduInstanceComponent', () => {
+  let component: OpenviduInstanceComponent;
+  let fixture: ComponentFixture<OpenviduInstanceComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ OpenviduInstanceComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(OpenviduInstanceComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

openvidu-testapp/src/app/components/openvidu-instance/openvidu-instance.component.ts

@@ -0,0 +1,147 @@
+import { Component, Input, HostListener, ChangeDetectorRef, OnInit, OnDestroy } from '@angular/core';
+import { OpenVidu, Session, Subscriber, Stream } from 'openvidu-browser';
+
+declare var $: any;
+
+@Component({
+  selector: 'app-openvidu-instance',
+  templateUrl: './openvidu-instance.component.html',
+  styleUrls: ['./openvidu-instance.component.css']
+})
+export class OpenviduInstanceComponent implements OnInit, OnDestroy {
+
+  @Input()
+  openviduURL: string;
+
+  @Input()
+  openviduSecret: string;
+
+  sendAudio = true;
+  sendVideo = true;
+  optionVideo = 'video';
+  activeAudio = true;
+  activeVideo = true;
+  sendVideoRadio = true;
+
+  // Join form
+  clientData: string;
+  sessionName: string;
+
+  // OpenVidu objects
+  OV: OpenVidu;
+  session: Session;
+
+  constructor(private changeDetector: ChangeDetectorRef) {
+    this.generateSessionInfo();
+  }
+
+  ngOnInit() { }
+
+  ngOnDestroy() {
+    this.leaveSession();
+  }
+
+  @HostListener('window:beforeunload')
+  beforeunloadHandler() {
+    this.leaveSession();
+  }
+
+  private generateSessionInfo(): void {
+    this.sessionName = 'TestSession';
+    this.clientData = 'TestClient';
+  }
+
+  private removeHttps = input => input.replace(/^https?:\/\//, '');
+
+  private joinSession(): void {
+
+    if (this.session) {
+      this.leaveSession();
+    }
+
+    const OV: OpenVidu = new OpenVidu();
+
+    this.session = OV.initSession('wss://'
+      + this.removeHttps(this.openviduURL)
+      + '/'
+      + this.sessionName + '?secret='
+      + this.openviduSecret);
+
+    this.session.on('streamCreated', (event) => {
+
+      this.changeDetector.detectChanges();
+
+      const subscriber: Subscriber = this.session.subscribe(event.stream, 'remote-vid-' + this.session.connection.connectionId);
+      subscriber.on('videoElementCreated', (e) => {
+        this.appendUserData(e.element, subscriber.stream.connection.data, subscriber.stream.connection);
+      });
+      subscriber.on('videoPlaying', (e) => {
+      });
+    });
+
+    this.session.on('streamDestroyed', (event) => {
+      this.removeUserData(event.stream.connection);
+    });
+
+    this.session.on('connectionCreated', (event) => { });
+    this.session.on('connetionDestroyed', (event) => { });
+    this.session.on('sessionDisconnected', (event) => { });
+
+    this.session.connect(null, this.clientData, (error) => {
+      if (!error) {
+
+        const publisher = OV.initPublisher('local-vid-' + this.session.connection.connectionId, {
+          audio: true,
+          video: true,
+          quality: 'MEDIUM'
+        });
+
+        publisher.on('videoElementCreated', (event) => {
+          this.appendUserData(event.element, this.clientData, null);
+        });
+
+        publisher.on('videoPlaying', (e) => {
+        });
+
+        this.session.publish(publisher);
+
+      } else {
+        console.log('There was an error connecting to the session:', error.code, error.message);
+      }
+    });
+  }
+
+
+  private leaveSession(): void {
+    if (this.session) {
+      this.session.disconnect();
+    }
+    this.session = null;
+    this.OV = null;
+    this.removeAllUserData();
+  }
+
+  private appendUserData(videoElement, data, connection): void {
+    /*const dataNode = document.createElement('div');
+    dataNode.className = 'data-node';
+    dataNode.id = 'data-' + (connection ? connection.connectionId : data);
+    dataNode.innerHTML = '<p>' + data + '</p>';
+    videoElement.parentNode.insertBefore(dataNode, videoElement.nextSibling);*/
+  }
+
+  private removeUserData(connection): void {
+    /*$('#data-' + connection.connectionId).remove();*/
+  }
+
+  private removeAllUserData() {
+    /*const nicknameElements = $('.data-node');
+    while (nicknameElements[0]) {
+      nicknameElements[0].remove();
+    }*/
+  }
+
+  private toggleRadio(): void {
+    this.sendVideoRadio = !this.sendVideo;
+  }
+
+}

openvidu-testapp/src/styles.css

@@ -22,5 +22,14 @@ ul {
 }
 
 video {
-  max-width: 300px;
+  max-width: 125px;
+  margin-top: -5px;
+}
+
+button {
+  font-weight: bold !important;
+}
+
+.session-form label {
+  font-size: 12px;
 }