ambiser
/
openvidu
mirror of https://github.com/OpenVidu/openvidu.git
8
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

testapp components refactoring. Event chips added

pull/20/head
pabloFuente 2017-09-30 13:48:40 +02:00
parent 51020847dd
commit 3d98bc93e6
23 changed files with 475 additions and 250 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
openvidu-testapp/package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "openvidu-testapp", "name": "openvidu-testapp",
"version": "0.0.0", "version": "1.1.0",
"license": "Apache-2.0", "license": "Apache-2.0",
"scripts": { "scripts": {
"ng": "ng", "ng": "ng",
@ -42,10 +42,10 @@
"codelyzer": "~3.1.1", "codelyzer": "~3.1.1",
"jasmine-core": "~2.6.2", "jasmine-core": "~2.6.2",
"jasmine-spec-reporter": "~4.1.0", "jasmine-spec-reporter": "~4.1.0",
"karma": "~1.7.0", "karma": "1.7.1",
"karma-chrome-launcher": "~2.1.1", "karma-chrome-launcher": "2.2.0",
"karma-cli": "~1.0.1", "karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^1.2.1", "karma-coverage-istanbul-reporter": "^1.3.0",
"karma-jasmine": "~1.1.0", "karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2", "karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.1.2", "protractor": "~5.1.2",

10
openvidu-testapp/src/app/app.component.css
View File

@ -6,3 +6,13 @@
main { main {
padding: 30px 50px 30px 50px; padding: 30px 50px 30px 50px;
} }
#nav-logo {
padding-right: 20px;
font-weight: inherit;
}
md-toolbar a {
padding: 0 10px 0 10px;
font-weight: bold;
}

10
openvidu-testapp/src/app/app.component.html
View File

@ -1,10 +1,18 @@
<md-sidenav-container fullscreen> <md-sidenav-container fullscreen>
<md-toolbar class="mat-elevation-z5" color="primary"> <md-toolbar class="mat-elevation-z5" color="primary">
<div layout-align='center center' layout='column'> <div layout-align='center center' layout='column'>
<a routerLink="/"><img id="nav-img" src="assets/images/openvidu_vert_white_bg_trans_cropped.png"/> TestApp</a> <a id="nav-logo" routerLink="/"><img id="nav-img" src="assets/images/openvidu_vert_white_bg_trans_cropped.png"/> TestApp</a>
<a md-button routerLink="/test-sessions"><span>SESSIONS</span></a>
<a md-button routerLink="/test-apirest"><span>API REST</span></a>
</div> </div>
</md-toolbar> </md-toolbar>
<main> <main>
<md-form-field>
<input mdInput placeholder="OpenVidu Server URL" [ngModel]="openviduURL" (ngModelChange)="updateUrl($event)">
</md-form-field>
<md-form-field>
<input mdInput placeholder="OpenVidu Server Secret" [ngModel]="openviduSecret" (ngModelChange)="updateSecret($event)">
</md-form-field>
<router-outlet></router-outlet> <router-outlet></router-outlet>
</main> </main>
</md-sidenav-container> </md-sidenav-container>

20
openvidu-testapp/src/app/app.component.ts
View File

@ -1,5 +1,6 @@
import { Component } from '@angular/core'; import { Component } from '@angular/core';
import { Router } from '@angular/router'; import { Router } from '@angular/router';
import { OpenviduParamsService } from './services/openvidu-params.service';
@Component({ @Component({
selector: 'app-root', selector: 'app-root',
@ -8,10 +9,23 @@ import { Router } from '@angular/router';
}) })
export class AppComponent { export class AppComponent {
constructor(private router: Router) { } openviduURL = 'https://localhost:8443';
openviduSecret = 'MY_SECRET';
isVideoSessionUrl() { constructor(private router: Router, private openviduParamsService: OpenviduParamsService) { }
return (this.router.url.substring(0, '/lesson/'.length) === '/lesson/');
updateUrl(url) {
this.openviduURL = url;
this.updateParams();
}
updateSecret(secret) {
this.openviduSecret = secret;
this.updateParams();
}
updateParams() {
this.openviduParamsService.updateParams({ openviduUrl: this.openviduURL, openviduSecret: this.openviduSecret });
} }
} }

2
openvidu-testapp/src/app/app.material.module.ts
View File

@ -15,6 +15,7 @@ import {
MdListModule, MdListModule,
MdRadioModule, MdRadioModule,
MdSelectModule, MdSelectModule,
MdChipsModule,
MdSlideToggleModule MdSlideToggleModule
} from '@angular/material'; } from '@angular/material';
@ -35,6 +36,7 @@ import {
MdListModule, MdListModule,
MdRadioModule, MdRadioModule,
MdSelectModule, MdSelectModule,
MdChipsModule,
MdSlideToggleModule MdSlideToggleModule
], ],
}) })

15
openvidu-testapp/src/app/app.module.ts
View File

@ -7,16 +7,18 @@ import { AppMaterialModule } from './app.material.module';
import { routing } from './app.routing'; import { routing } from './app.routing';
import { AppComponent } from './app.component'; import { AppComponent } from './app.component';
import { DashboardComponent } from './components/dashboard/dashboard.component'; import { TestSessionsComponent } from './components/test-sessions/test-sessions.component';
import { TestApirestComponent } from './components/test-apirest/test-apirest.component';
import { OpenviduRestService } from './services/openvidu-rest.service';
import { OpenviduInstanceComponent } from './components/openvidu-instance/openvidu-instance.component'; import { OpenviduInstanceComponent } from './components/openvidu-instance/openvidu-instance.component';
import { OpenviduRestService } from './services/openvidu-rest.service';
import { OpenviduParamsService } from './services/openvidu-params.service';
@NgModule({ @NgModule({
declarations: [ declarations: [
AppComponent, AppComponent,
DashboardComponent, OpenviduInstanceComponent,
OpenviduInstanceComponent TestSessionsComponent,
TestApirestComponent
], ],
imports: [ imports: [
BrowserModule, BrowserModule,
@ -27,7 +29,8 @@ import { OpenviduInstanceComponent } from './components/openvidu-instance/openvi
routing routing
], ],
providers: [ providers: [
OpenviduRestService OpenviduRestService,
OpenviduParamsService
], ],
bootstrap: [AppComponent] bootstrap: [AppComponent]
}) })

14
openvidu-testapp/src/app/app.routing.ts
View File

@ -1,12 +1,20 @@
import { ModuleWithProviders } from '@angular/core'; import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router'; import { Routes, RouterModule } from '@angular/router';
import { DashboardComponent } from './components/dashboard/dashboard.component'; import { TestSessionsComponent } from './components/test-sessions/test-sessions.component';
import { TestApirestComponent } from './components/test-apirest/test-apirest.component';
const appRoutes: Routes = [ const appRoutes: Routes = [
{ {
path: '', path: '', redirectTo: '/test-sessions', pathMatch: 'full'
component: DashboardComponent },
{
path: 'test-sessions',
component: TestSessionsComponent
},
{
path: 'test-apirest',
component: TestApirestComponent
} }
]; ];

37
openvidu-testapp/src/app/components/dashboard/dashboard.component.css
View File

@ -1,37 +0,0 @@
.demo-tab-content {
margin-top: 30px;
padding-left: 10px;
padding-right: 10px;
}
table {
width: 100%;
}
table tr {
text-align: left;
}
#table-row {
margin-top: 40px;
}
.first-col {
padding-right: 20px;
}
th {
padding-bottom: 20px;
}
#server-data-field {
padding-top: 16px;
}
app-openvidu-instance {
display: inline-flex;
margin: 15px 25px 0 0;
background-color: #797979;
padding: 10px;
border-radius: 2px;
}

83
openvidu-testapp/src/app/components/dashboard/dashboard.component.html
View File

@ -1,83 +0,0 @@
<md-form-field>
<input mdInput placeholder="OpenVidu Server URL" [(ngModel)]="openviduURL">
</md-form-field>
<md-form-field>
<input mdInput placeholder="OpenVidu Server Secret" [(ngModel)]="openviduSecret">
</md-form-field>
<md-tab-group class="demo-tab-group" dynamicHeight="true">
<md-tab id="audio-video" label="Test session">
<div class="demo-tab-content">
<div>
<button id="add-user-btn" md-raised-button color="primary" (click)="users.push(true)">ADD USER</button>
<button id="remove-user-btn" md-raised-button color="primary" (click)="users.pop()" [disabled]="!users.length">REMOVE USER</button>
</div>
<app-openvidu-instance *ngFor="let user of users" [openviduURL]="openviduURL" [openviduSecret]="openviduSecret"></app-openvidu-instance>
</div>
</md-tab>
<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>
</div>
<div fxLayout="column" fxFlex="45" fxFlexAlign="center" fxFill>
<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</button>
</div>
</div>
<div id="table-row" fxLayout="row" fxLayoutGap="20px" fxLayoutAlign="start">
<div fxLayout="column" fxFlex="65" fxFlexAlign="start" fxFill>
<table>
<tr>
<th class="first-col">sessionIds</th>
<th>tokens</th>
<th>Session</th>
</tr>
<tr *ngFor="let sid of this.data; let ind = index">
<td class="first-col">
<md-card [style.background]="getBackgroundColor(ind)">{{sid[0]}}</md-card>
</td>
<td>
<md-card *ngIf="sid[1].length > 0" [style.background]="getBackgroundColor(ind)">
<p *ngFor="let token of sid[1]">{{token}}</p>
</md-card>
</td>
<td style="text-align: center">
<md-radio-button [checked]="selectedRadioIndex === ind" (click)="selectedRadioIndex = ind" name="sidOption"></md-radio-button>
</td>
</tr>
</table>
</div>
<div fxLayout="column" fxFlex="35" fxFlexAlign="start" fxFill>
<table>
<tr>
<th>OpenVidu Role</th>
<th>Server data</th>
</tr>
<tr id="tr-token-options" *ngIf="data.length > 0">
<td>
<md-select placeholder="OpenVidu Role" [(ngModel)]="selectedRole">
<md-option *ngFor="let role of openViduRoles" [value]="role">
{{ role }}
</md-option>
</md-select>
</td>
<td>
<md-form-field id="server-data-field">
<input mdInput placeholder="Server Data" [(ngModel)]="serverData">
</md-form-field>
</td>
</tr>
</table>
</div>
</div>
</div>
</md-tab>
</md-tab-group>

38
openvidu-testapp/src/app/components/openvidu-instance/openvidu-instance.component.css
View File

@ -1,3 +1,10 @@
.div-wrapper {
display: inline-flex;
background-color: #797979;
padding: 10px;
border-radius: 2px;
}
md-card { md-card {
background-color: #ffffff; background-color: #ffffff;
margin: 0; margin: 0;
@ -81,3 +88,34 @@ md-radio-button {
.session-actions button:hover { .session-actions button:hover {
color: #4d4d4d; color: #4d4d4d;
} }
.event-list {
display: inline-block;
width: 125px;
max-height: 77.75px;
margin-top: 12px;
overflow-y: auto;
}
md-chip {
line-height: 6px;
font-size: 9.5px;
padding: 6px 9px !important;
margin-bottom: 3.5px !important;
margin-right: 5px !important;
}
.scroll-custom::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
background-color: #F5F5F5;
}
.scroll-custom::-webkit-scrollbar {
width: 8px;
background-color: #F5F5F5;
}
.scroll-custom::-webkit-scrollbar-thumb {
background-color: #797979;
}

39
openvidu-testapp/src/app/components/openvidu-instance/openvidu-instance.component.html
View File

@ -1,4 +1,6 @@
<div> <div class="div-wrapper">
<div>
<md-card class="join-card"> <md-card class="join-card">
<md-card-content> <md-card-content>
@ -16,8 +18,8 @@
<div> <div>
<button id="join-btn" md-button (click)="joinSession()" [disabled]="session">JOIN</button> <button id="join-btn" md-button (click)="joinSession()" [disabled]="session">JOIN</button>
<md-checkbox name="subscribeTo" (change)="toggleSubscribeTo()" [checked]="subscribeTo && checkSubscribeTo" [disabled]="disableSubscribeTo">Subscribe</md-checkbox> <md-checkbox name="subscribeTo" (change)="toggleSubscribeTo()" [checked]="subscribeTo && checkSubscribeTo" [disabled]="session || disableSubscribeTo">Subscribe</md-checkbox>
<md-checkbox name="publishTo" (change)="togglePublishTo()" [checked]="publishTo && checkPublishTo" [disabled]="disablePublishTo">Publish</md-checkbox> <md-checkbox name="publishTo" (change)="togglePublishTo()" [checked]="publishTo && checkPublishTo" [disabled]="session || disablePublishTo">Publish</md-checkbox>
</div> </div>
<div class="inner-card" fxLayout="row" fxLayoutAlign="start start"> <div class="inner-card" fxLayout="row" fxLayoutAlign="start start">
@ -26,21 +28,21 @@
<div> <div>
<h4>Send</h4> <h4>Send</h4>
<div> <div>
<md-checkbox name="sendAudio" (change)="toggleSendAudio()" [checked]="sendAudio && checkSendAudio" [disabled]="disableSendAudio">Audio</md-checkbox> <md-checkbox name="sendAudio" (change)="toggleSendAudio()" [checked]="sendAudio && checkSendAudio" [disabled]="session || disableSendAudio">Audio</md-checkbox>
<md-checkbox name="sendVideo" (change)="toggleSendVideo()" [checked]="sendVideo && checkSendVideo" [disabled]="disableSendVideo">Video</md-checkbox> <md-checkbox name="sendVideo" (change)="toggleSendVideo()" [checked]="sendVideo && checkSendVideo" [disabled]="session || disableSendVideo">Video</md-checkbox>
</div> </div>
</div> </div>
<div style="padding-top: 5px;"> <div style="padding-top: 5px;">
<h4>Enter active</h4> <h4>Enter active</h4>
<div> <div>
<md-checkbox name="activeAudio" (change)="toggleActiveAudio()" [checked]="activeAudio && checkActiveAudio" [disabled]="disableActiveAudio">Audio</md-checkbox> <md-checkbox name="activeAudio" (change)="toggleActiveAudio()" [checked]="activeAudio && checkActiveAudio" [disabled]="session || disableActiveAudio">Audio</md-checkbox>
<md-checkbox name="activeVideo" (change)="toggleActiveVideo()" [checked]="activeVideo && checkActiveVideo" [disabled]="disableActiveVideo">Video</md-checkbox> <md-checkbox name="activeVideo" (change)="toggleActiveVideo()" [checked]="activeVideo && checkActiveVideo" [disabled]="session || disableActiveVideo">Video</md-checkbox>
</div> </div>
</div> </div>
</div> </div>
<div fxFlex="40"> <div fxFlex="40">
<md-radio-group [(ngModel)]="optionsVideo" [disabled]="disableRadioButtons" [ngModelOptions]="{standalone: true}"> <md-radio-group [(ngModel)]="optionsVideo" [disabled]="session || disableRadioButtons" [ngModelOptions]="{standalone: true}">
<div> <div>
<md-radio-button value="video" [checked]="checkRadioVideo && optionsVideo==='video'">Video</md-radio-button> <md-radio-button value="video" [checked]="checkRadioVideo && optionsVideo==='video'">Video</md-radio-button>
</div> </div>
@ -58,23 +60,32 @@
</md-card-content> </md-card-content>
</md-card> </md-card>
</div> </div>
<div *ngIf="session"> <div *ngIf="session">
<md-card class="session-card"> <md-card class="session-card">
<div class="session-card-header"> <div class="session-card-header">
<div class="session-card-inner"> <div class="session-card-inner">
<div class="session-title">{{sessionName}}</div> <div class="session-title">{{sessionName}}</div>
<div class="session-actions"> <div class="session-actions">
<button><md-icon *ngIf="publishTo && sendVideo" class="md-24" aria-label="Mute video button" (click)="toggleVideo()">{{videoIcon}}</md-icon></button> <button><md-icon *ngIf="publishTo && sendVideo" aria-label="Mute video button" (click)="toggleVideo()">{{videoIcon}}</md-icon></button>
<button><md-icon *ngIf="publishTo && sendAudio" class="md-24" aria-label="Mute audio button" (click)="toggleAudio()">{{audioIcon}}</md-icon></button> <button><md-icon *ngIf="publishTo && sendAudio" aria-label="Mute audio button" (click)="toggleAudio()">{{audioIcon}}</md-icon></button>
<button><md-icon class="md-24" aria-label="Leave button" (click)="leaveSession()">clear</md-icon></button> <button><md-icon aria-label="Leave button" (click)="leaveSession()">clear</md-icon></button>
</div> </div>
</div> </div>
</div> </div>
<div *ngIf="session.connection" fxLayout> <div *ngIf="session.connection" fxLayout>
<div [attr.id]="'local-vid-' + session.connection.connectionId" fxFlex="135px" class="video-container"></div> <div fxFlex="135px" class="video-container">
<div [attr.id]="'local-vid-' + session.connection.connectionId"></div>
<div #scrollMe class="event-list scroll-custom" [scrollTop]="scrollMe.scrollHeight">
<md-chip-list class="mat-chip-list-stacked" aria-orientation="vertical">
<md-chip *ngFor="let event of events">{{event}}</md-chip>
</md-chip-list>
</div>
</div>
<div [attr.id]="'remote-vid-' + session.connection.connectionId" fxFlex="270px" class="video-container"></div> <div [attr.id]="'remote-vid-' + session.connection.connectionId" fxFlex="270px" class="video-container"></div>
</div> </div>
</md-card> </md-card>
</div>
</div> </div>

48
openvidu-testapp/src/app/components/openvidu-instance/openvidu-instance.component.ts
View File

@ -1,4 +1,7 @@
import { Component, Input, HostListener, ChangeDetectorRef, OnInit, OnDestroy } from '@angular/core'; import {
Component, Input, HostListener, ChangeDetectorRef, SimpleChanges, ElementRef, ViewChild,
OnInit, OnDestroy, OnChanges
} from '@angular/core';
import { OpenVidu, Session, Subscriber, Publisher, Stream } from 'openvidu-browser'; import { OpenVidu, Session, Subscriber, Publisher, Stream } from 'openvidu-browser';
declare var $: any; declare var $: any;
@ -8,10 +11,10 @@ declare var $: any;
templateUrl: './openvidu-instance.component.html', templateUrl: './openvidu-instance.component.html',
styleUrls: ['./openvidu-instance.component.css'] styleUrls: ['./openvidu-instance.component.css']
}) })
export class OpenviduInstanceComponent implements OnInit, OnDestroy { export class OpenviduInstanceComponent implements OnInit, OnChanges, OnDestroy {
@Input() @Input()
openviduURL: string; openviduUrl: string;
@Input() @Input()
openviduSecret: string; openviduSecret: string;
@ -59,12 +62,23 @@ export class OpenviduInstanceComponent implements OnInit, OnDestroy {
audioIcon = 'mic'; audioIcon = 'mic';
videoIcon = 'videocam'; videoIcon = 'videocam';
events: string[] = [];
constructor(private changeDetector: ChangeDetectorRef) { constructor(private changeDetector: ChangeDetectorRef) {
this.generateSessionInfo(); this.generateSessionInfo();
} }
ngOnInit() { } ngOnInit() { }
ngOnChanges(changes: SimpleChanges) {
if (changes.openviduSecret) {
this.openviduSecret = changes.openviduSecret.currentValue;
}
if (changes.openviduUrl) {
this.openviduUrl = changes.openviduUrl.currentValue;
}
}
ngOnDestroy() { ngOnDestroy() {
this.leaveSession(); this.leaveSession();
} }
@ -90,7 +104,7 @@ export class OpenviduInstanceComponent implements OnInit, OnDestroy {
const OV: OpenVidu = new OpenVidu(); const OV: OpenVidu = new OpenVidu();
this.session = OV.initSession('wss://' this.session = OV.initSession('wss://'
+ this.removeHttps(this.openviduURL) + this.removeHttps(this.openviduUrl)
+ '/' + '/'
+ this.sessionName + '?secret=' + this.sessionName + '?secret='
+ this.openviduSecret); + this.openviduSecret);
@ -103,19 +117,29 @@ export class OpenviduInstanceComponent implements OnInit, OnDestroy {
const subscriber: Subscriber = this.session.subscribe(event.stream, 'remote-vid-' + this.session.connection.connectionId); const subscriber: Subscriber = this.session.subscribe(event.stream, 'remote-vid-' + this.session.connection.connectionId);
subscriber.on('videoElementCreated', (e) => { subscriber.on('videoElementCreated', (e) => {
this.appendUserData(e.element, subscriber.stream.connection.data, subscriber.stream.connection); this.appendUserData(e.element, subscriber.stream.connection.data, subscriber.stream.connection);
this.updateEventList('videoElementCreated');
}); });
subscriber.on('videoPlaying', (e) => { subscriber.on('videoPlaying', (e) => {
this.updateEventList('videoPlaying');
}); });
} }
this.updateEventList('streamCreated');
}); });
this.session.on('streamDestroyed', (event) => { this.session.on('streamDestroyed', (event) => {
this.removeUserData(event.stream.connection); this.removeUserData(event.stream.connection);
this.updateEventList('streamDestroyed');
}); });
this.session.on('connectionCreated', (event) => { }); this.session.on('connectionCreated', (event) => {
this.session.on('connetionDestroyed', (event) => { }); this.updateEventList('connectionCreated');
this.session.on('sessionDisconnected', (event) => { }); });
this.session.on('connetionDestroyed', (event) => {
this.updateEventList('connetionDestroyed');
});
this.session.on('sessionDisconnected', (event) => {
this.updateEventList('sessionDisconnected');
});
this.session.connect(null, this.clientData, (error) => { this.session.connect(null, this.clientData, (error) => {
if (!error) { if (!error) {
@ -135,9 +159,15 @@ export class OpenviduInstanceComponent implements OnInit, OnDestroy {
}); });
this.publisher.on('videoElementCreated', (event) => { this.publisher.on('videoElementCreated', (event) => {
this.updateEventList('videoElementCreated');
}); });
this.publisher.on('videoPlaying', (e) => { this.publisher.on('videoPlaying', (e) => {
this.updateEventList('videoPlaying');
});
this.publisher.on('remoteVideoPlaying', (e) => {
this.updateEventList('remoteVideoPlaying');
}); });
if (this.subscribeToRemote) { if (this.subscribeToRemote) {
@ -194,6 +224,10 @@ export class OpenviduInstanceComponent implements OnInit, OnDestroy {
$('#remote-vid-' + this.session.connection.connectionId).find('#data-' + connection.connectionId).remove(); $('#remote-vid-' + this.session.connection.connectionId).find('#data-' + connection.connectionId).remove();
} }
private updateEventList(event: string) {
this.events.push(event);
}
toggleSubscribeTo(): void { toggleSubscribeTo(): void {
this.subscribeTo = !this.subscribeTo; this.subscribeTo = !this.subscribeTo;
} }

23
openvidu-testapp/src/app/components/test-apirest/test-apirest.component.css Normal file
View File

@ -0,0 +1,23 @@
table {
width: 100%;
}
table tr {
text-align: left;
}
#table-row {
margin-top: 40px;
}
.first-col {
padding-right: 20px;
}
th {
padding-bottom: 20px;
}
#server-data-field {
padding-top: 16px;
}

60
openvidu-testapp/src/app/components/test-apirest/test-apirest.component.html Normal file
View File

@ -0,0 +1,60 @@
<div>
<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>
</div>
<div fxLayout="column" fxFlex="45" fxFlexAlign="center" fxFill>
<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</button>
</div>
</div>
<div id="table-row" fxLayout="row" fxLayoutGap="20px" fxLayoutAlign="start">
<div fxLayout="column" fxFlex="65" fxFlexAlign="start" fxFill>
<table>
<tr>
<th class="first-col">sessionIds</th>
<th>tokens</th>
<th>Session</th>
</tr>
<tr *ngFor="let sid of this.data; let ind = index">
<td class="first-col">
<md-card [style.background]="getBackgroundColor(ind)">{{sid[0]}}</md-card>
</td>
<td>
<md-card *ngIf="sid[1].length > 0" [style.background]="getBackgroundColor(ind)">
<p *ngFor="let token of sid[1]">{{token}}</p>
</md-card>
</td>
<td style="text-align: center">
<md-radio-button [checked]="selectedRadioIndex === ind" (click)="selectedRadioIndex = ind" name="sidOption"></md-radio-button>
</td>
</tr>
</table>
</div>
<div fxLayout="column" fxFlex="35" fxFlexAlign="start" fxFill>
<table>
<tr>
<th>OpenVidu Role</th>
<th>Server data</th>
</tr>
<tr id="tr-token-options" *ngIf="data.length > 0">
<td>
<md-select placeholder="OpenVidu Role" [(ngModel)]="selectedRole">
<md-option *ngFor="let role of openViduRoles" [value]="role">
{{ role }}
</md-option>
</md-select>
</td>
<td>
<md-form-field id="server-data-field">
<input mdInput placeholder="Server Data" [(ngModel)]="serverData">
</md-form-field>
</td>
</tr>
</table>
</div>
</div>
</div>

12
openvidu-testapp/src/app/components/dashboard/dashboard.component.spec.ts → openvidu-testapp/src/app/components/test-apirest/test-apirest.component.spec.ts
View File

@ -1,20 +1,20 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { DashboardComponent } from './dashboard.component'; import { TestApirestComponent } from './test-apirest.component';
describe('DashboardComponent', () => { describe('TestApirestComponent', () => {
let component: DashboardComponent; let component: TestApirestComponent;
let fixture: ComponentFixture<DashboardComponent>; let fixture: ComponentFixture<TestApirestComponent>;
beforeEach(async(() => { beforeEach(async(() => {
TestBed.configureTestingModule({ TestBed.configureTestingModule({
declarations: [ DashboardComponent ] declarations: [ TestApirestComponent ]
}) })
.compileComponents(); .compileComponents();
})); }));
beforeEach(() => { beforeEach(() => {
fixture = TestBed.createComponent(DashboardComponent); fixture = TestBed.createComponent(TestApirestComponent);
component = fixture.componentInstance; component = fixture.componentInstance;
fixture.detectChanges(); fixture.detectChanges();
}); });

48
openvidu-testapp/src/app/components/dashboard/dashboard.component.ts → openvidu-testapp/src/app/components/test-apirest/test-apirest.component.ts
View File

@ -1,26 +1,22 @@
import { Component, HostListener, OnInit } from '@angular/core'; import { Component, Input, OnInit, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs/Subscription';
import { OpenviduRestService } from '../../services/openvidu-rest.service'; import { OpenviduRestService } from '../../services/openvidu-rest.service';
import { DataSource } from '@angular/cdk/table'; import { OpenviduParamsService } from '../../services/openvidu-params.service';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
import * as colormap from 'colormap'; import * as colormap from 'colormap';
const numColors = 64; const numColors = 64;
declare var $: any;
@Component({ @Component({
selector: 'app-dashboard', selector: 'app-test-apirest',
templateUrl: './dashboard.component.html', templateUrl: './test-apirest.component.html',
styleUrls: ['./dashboard.component.css'], styleUrls: ['./test-apirest.component.css']
}) })
export class DashboardComponent implements OnInit { export class TestApirestComponent implements OnInit, OnDestroy {
openviduURL = 'https://localhost:8443'; openviduUrl: string;
openviduSecret = 'MY_SECRET'; openviduSecret: string;
// OpenViduInstance collection paramsSubscription: Subscription;
users = [true];
// API REST params // API REST params
serverData = 'data_test'; serverData = 'data_test';
@ -33,7 +29,7 @@ export class DashboardComponent implements OnInit {
cg; cg;
constructor(private openviduRestService: OpenviduRestService) { constructor(private openviduRestService: OpenviduRestService, private openviduParamsService: OpenviduParamsService) {
const options = { const options = {
colormap: [ colormap: [
{ 'index': 0, 'rgb': [135, 196, 213] }, { 'index': 0, 'rgb': [135, 196, 213] },
@ -44,16 +40,24 @@ export class DashboardComponent implements OnInit {
this.cg = colormap(options); this.cg = colormap(options);
} }
ngOnInit() { } ngOnInit() {
const openviduParams = this.openviduParamsService.getParams();
this.openviduUrl = openviduParams.openviduUrl;
this.openviduSecret = openviduParams.openviduSecret;
private addUser() { this.paramsSubscription = this.openviduParamsService.newParams$.subscribe(
this.users.push(true); params => {
this.openviduUrl = params.openviduUrl;
this.openviduSecret = params.openviduSecret;
});
} }
/* API REST TAB */ ngOnDestroy() {
this.paramsSubscription.unsubscribe();
}
private getSessionId() { private getSessionId() {
this.openviduRestService.getSessionId(this.openviduURL, this.openviduSecret) this.openviduRestService.getSessionId(this.openviduUrl, this.openviduSecret)
.then((sessionId) => { .then((sessionId) => {
this.updateData(); this.updateData();
}) })
@ -65,7 +69,7 @@ export class DashboardComponent implements OnInit {
private getToken() { private getToken() {
const sessionId = this.data[this.selectedRadioIndex][0]; const sessionId = this.data[this.selectedRadioIndex][0];
this.openviduRestService.getToken(this.openviduURL, this.openviduSecret, sessionId, this.selectedRole, this.serverData) this.openviduRestService.getToken(this.openviduUrl, this.openviduSecret, sessionId, this.selectedRole, this.serverData)
.then((token) => { .then((token) => {
this.updateData(); this.updateData();
}) })
@ -92,6 +96,4 @@ export class DashboardComponent implements OnInit {
this.openviduRestService.sessionIdTokenOpenViduRole.clear(); this.openviduRestService.sessionIdTokenOpenViduRole.clear();
} }
/* API REST TAB */
} }

8
openvidu-testapp/src/app/components/test-sessions/test-sessions.component.css Normal file
View File

@ -0,0 +1,8 @@
app-openvidu-instance {
display: inline-flex;
margin: 25px 5px 0px 0px;
}
.scenario-div {
float: right;
}

11
openvidu-testapp/src/app/components/test-sessions/test-sessions.component.html Normal file
View File

@ -0,0 +1,11 @@
<div>
<div>
<button id="add-user-btn" md-raised-button color="primary" (click)="users.push(true)">ADD USER</button>
<button id="remove-user-btn" md-raised-button color="primary" (click)="users.pop()" [disabled]="!users.length">REMOVE USER</button>
<div class="scenario-div">
Load scenario
</div>
</div>
<app-openvidu-instance *ngFor="let user of users; let i = index" [openviduUrl]="openviduUrl" [openviduSecret]="openviduSecret"></app-openvidu-instance>
</div>

25
openvidu-testapp/src/app/components/test-sessions/test-sessions.component.spec.ts Normal file
View File

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

42
openvidu-testapp/src/app/components/test-sessions/test-sessions.component.ts Normal file
View File

@ -0,0 +1,42 @@
import { Component, OnInit, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs/Subscription';
import { OpenviduParamsService } from '../../services/openvidu-params.service';
@Component({
selector: 'app-test-sessions',
templateUrl: './test-sessions.component.html',
styleUrls: ['./test-sessions.component.css']
})
export class TestSessionsComponent implements OnInit, OnDestroy {
openviduUrl: string;
openviduSecret: string;
paramsSubscription: Subscription;
// OpenViduInstance collection
users = [true];
constructor(private openviduParamsService: OpenviduParamsService) { }
ngOnInit() {
const openviduParams = this.openviduParamsService.getParams();
this.openviduUrl = openviduParams.openviduUrl;
this.openviduSecret = openviduParams.openviduSecret;
this.paramsSubscription = this.openviduParamsService.newParams$.subscribe(
params => {
this.openviduUrl = params.openviduUrl;
this.openviduSecret = params.openviduSecret;
});
}
ngOnDestroy() {
this.paramsSubscription.unsubscribe();
}
private addUser() {
this.users.push(true);
}
}

15
openvidu-testapp/src/app/services/openvidu-params.service.spec.ts Normal file
View File

@ -0,0 +1,15 @@
import { TestBed, inject } from '@angular/core/testing';
import { OpenviduParamsService } from './openvidu-params.service';
describe('OpenviduParamsService', () => {
beforeEach(() => {
TestBed.configureTestingModule({
providers: [OpenviduParamsService]
});
});
it('should be created', inject([OpenviduParamsService], (service: OpenviduParamsService) => {
expect(service).toBeTruthy();
}));
});

31
openvidu-testapp/src/app/services/openvidu-params.service.ts Normal file
View File

@ -0,0 +1,31 @@
import { Injectable } from '@angular/core';
import { Subject } from 'rxjs/Subject';
export interface OpenviduParams {
openviduUrl: string;
openviduSecret: string;
}
@Injectable()
export class OpenviduParamsService {
params: OpenviduParams =
{
openviduUrl: 'https://localhost:8443/',
openviduSecret: 'MY_SECRET'
};
newParams$ = new Subject<OpenviduParams>();
constructor() { }
getParams() {
return this.params;
}
updateParams(params: any) {
this.params = params;
this.newParams$.next(params);
}
}

16
openvidu-testapp/src/styles.css
View File

@ -1,7 +1,3 @@
* {
font-family: 'Exo 2', sans-serif;
}
html, html,
body { body {
height: 100%; height: 100%;
@ -10,6 +6,10 @@ body {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0.05); -webkit-tap-highlight-color: rgba(0, 0, 0, 0.05);
} }
body {
font-family: Roboto, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
}
a { a {
color: inherit; color: inherit;
cursor: inherit; cursor: inherit;
@ -22,7 +22,7 @@ ul {
} }
video { video {
max-width: 125px; width: 125px;
} }
button { button {
@ -41,11 +41,11 @@ button {
float: left; float: left;
} }
.video-container div { .video-container div.data-node {
float: left; float: left;
position: relative; position: relative;
margin-left: -46%; margin-left: -125px;
margin-top: -5%; margin-top: -14px;
} }
.video-container p { .video-container p {