openvidu-testapp to Angular 6

pull/73/head
pabloFuente 2018-06-04 14:27:37 +02:00
parent 12f300d916
commit 6939ca3a9c
23 changed files with 2978 additions and 3186 deletions

View File

@ -1,65 +0,0 @@
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"project": {
"name": "openvidu-testapp"
},
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": [
"assets",
"favicon.ico"
],
"index": "index.html",
"main": "main.ts",
"polyfills": "polyfills.ts",
"test": "test.ts",
"tsconfig": "tsconfig.app.json",
"testTsconfig": "tsconfig.spec.json",
"prefix": "app",
"styles": [
"styles.css",
"openvidu-theme.scss",
"material-icons.css"
],
"scripts": [],
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
"e2e": {
"protractor": {
"config": "./protractor.conf.js"
}
},
"lint": [
{
"project": "src/tsconfig.app.json",
"exclude": "**/node_modules/**"
},
{
"project": "src/tsconfig.spec.json",
"exclude": "**/node_modules/**"
},
{
"project": "e2e/tsconfig.e2e.json",
"exclude": "**/node_modules/**"
}
],
"test": {
"karma": {
"config": "./karma.conf.js"
}
},
"defaults": {
"build": {
"showCircularDependencies": false
},
"styleExt": "css",
"component": {}
}
}

View File

@ -0,0 +1,137 @@
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"openvidu-testapp": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist",
"index": "src/index.html",
"main": "src/main.ts",
"tsConfig": "src/tsconfig.app.json",
"showCircularDependencies": false,
"polyfills": "src/polyfills.ts",
"assets": [
"src/assets",
"src/favicon.ico"
],
"styles": [
"src/styles.css",
"src/openvidu-theme.scss",
"src/material-icons.css"
],
"scripts": []
},
"configurations": {
"production": {
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
]
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "openvidu-testapp:build"
},
"configurations": {
"production": {
"browserTarget": "openvidu-testapp:build:production"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "openvidu-testapp:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"karmaConfig": "./karma.conf.js",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.spec.json",
"scripts": [],
"styles": [
"src/styles.css",
"src/openvidu-theme.scss",
"src/material-icons.css"
],
"assets": [
"src/assets",
"src/favicon.ico"
]
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"src/tsconfig.app.json",
"src/tsconfig.spec.json"
],
"exclude": [
"**/node_modules/**"
]
}
}
}
},
"openvidu-testapp-e2e": {
"root": "",
"sourceRoot": "",
"projectType": "application",
"architect": {
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "./protractor.conf.js",
"devServerTarget": "openvidu-testapp:serve"
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"e2e/tsconfig.e2e.json"
],
"exclude": [
"**/node_modules/**"
]
}
}
}
}
},
"defaultProject": "openvidu-testapp",
"schematics": {
"@schematics/angular:component": {
"prefix": "app",
"styleext": "css"
},
"@schematics/angular:directive": {
"prefix": "app"
}
}
}

View File

@ -2,7 +2,7 @@ FROM ubuntu:16.04
MAINTAINER openvidu@gmail.com MAINTAINER openvidu@gmail.com
# Install Kurento Media Server (KMS) # Install Kurento Media Server (KMS)
RUN echo "deb http://ubuntu.openvidu.io/6.7.0 xenial kms6" | tee /etc/apt/sources.list.d/kurento.list \ RUN echo "deb http://ubuntu.openvidu.io/6.7.2 xenial kms6" | tee /etc/apt/sources.list.d/kurento.list \
&& apt-key adv --keyserver keyserver.ubuntu.com --recv-keys 5AFA7A83 \ && apt-key adv --keyserver keyserver.ubuntu.com --recv-keys 5AFA7A83 \
&& apt-get update \ && apt-get update \
&& apt-get -y dist-upgrade \ && apt-get -y dist-upgrade \

View File

@ -3,7 +3,7 @@ cp ../../openvidu-server/target/openvidu-server-"$1".jar ./openvidu-server.jar
# Build and copy openvidu-testapp static files # Build and copy openvidu-testapp static files
cd ../ cd ../
ng build ng build --prod
cp -a dist/. ./docker/web/ cp -a dist/. ./docker/web/
cd docker cd docker

View File

@ -9,5 +9,5 @@ command=/bin/bash /kms.sh
redirect_stderr=true redirect_stderr=true
[program:openvidu-server] [program:openvidu-server]
command=/bin/bash -c "java -Dserver.port=4443 -Dsecurity.ignored=/** -Dspring.resources.static-locations=file:///web/ -jar /openvidu-server.jar" command=/bin/bash -c "java -Dserver.port=4443 -Dsecurity.ignored=/** -Dspring.resources.static-locations=file:///web/ -Dopenvidu.recording=true -Dopenvidu.recording.path=/opt/openvidu/recordings -Dopenvidu.recording.public-access=true -jar /openvidu-server.jar"
redirect_stderr=true redirect_stderr=true

View File

@ -4,19 +4,19 @@
module.exports = function (config) { module.exports = function (config) {
config.set({ config.set({
basePath: '', basePath: '',
frameworks: ['jasmine', '@angular/cli'], frameworks: ['jasmine', '@angular-devkit/build-angular'],
plugins: [ plugins: [
require('karma-jasmine'), require('karma-jasmine'),
require('karma-chrome-launcher'), require('karma-chrome-launcher'),
require('karma-jasmine-html-reporter'), require('karma-jasmine-html-reporter'),
require('karma-coverage-istanbul-reporter'), require('karma-coverage-istanbul-reporter'),
require('@angular/cli/plugins/karma') require('@angular-devkit/build-angular/plugins/karma')
], ],
client:{ client:{
clearContext: false // leave Jasmine Spec Runner output visible in browser clearContext: false // leave Jasmine Spec Runner output visible in browser
}, },
coverageIstanbulReporter: { coverageIstanbulReporter: {
reports: [ 'html', 'lcovonly' ], dir: require('path').join(__dirname, 'coverage'), reports: [ 'html', 'lcovonly' ],
fixWebpackSourcePaths: true fixWebpackSourcePaths: true
}, },
angularCli: { angularCli: {

File diff suppressed because it is too large Load Diff

View File

@ -1,47 +1,48 @@
{ {
"dependencies": { "dependencies": {
"@angular/animations": "5.2.10", "@angular/animations": "6.0.3",
"@angular/cdk": "5.2.5", "@angular/cdk": "6.2.0",
"@angular/common": "5.2.10", "@angular/common": "6.0.3",
"@angular/compiler": "5.2.10", "@angular/compiler": "6.0.3",
"@angular/core": "5.2.10", "@angular/core": "6.0.3",
"@angular/flex-layout": "5.0.0-beta.14", "@angular/flex-layout": "6.0.0-beta.15",
"@angular/forms": "5.2.10", "@angular/forms": "6.0.3",
"@angular/http": "5.2.10", "@angular/http": "6.0.3",
"@angular/material": "5.2.5", "@angular/material": "6.2.0",
"@angular/platform-browser": "5.2.10", "@angular/platform-browser": "6.0.3",
"@angular/platform-browser-dynamic": "5.2.10", "@angular/platform-browser-dynamic": "6.0.3",
"@angular/router": "5.2.10", "@angular/router": "6.0.3",
"colormap": "^2.2.0", "colormap": "2.3.0",
"core-js": "^2.4.1", "core-js": "2.5.7",
"hammerjs": "^2.0.8", "hammerjs": "2.0.8",
"openvidu-browser": "2.1.0", "openvidu-browser": "2.1.0",
"openvidu-node-client": "2.0.0", "openvidu-node-client": "2.0.0",
"rxjs": "5.5.9", "rxjs": "6.2.0",
"zone.js": "0.8.26" "zone.js": "0.8.26"
}, },
"devDependencies": { "devDependencies": {
"@angular/cli": "1.7.4", "@angular/cli": "6.0.7",
"@angular/compiler-cli": "5.2.10", "@angular/compiler-cli": "6.0.3",
"@angular/language-service": "5.2.10", "@angular/language-service": "6.0.3",
"@types/jasmine": "2.8.7", "@types/jasmine": "2.8.8",
"@types/jasminewd2": "2.0.3", "@types/jasminewd2": "2.0.3",
"@types/node": "10.0.8", "@types/node": "10.3.0",
"codelyzer": "4.3.0", "codelyzer": "4.3.0",
"ts-node": "6.0.3", "ts-node": "6.1.0",
"tslint": "5.10.0", "tslint": "5.10.0",
"typescript": "2.7.2" "typescript": "~2.7.2",
}, "@angular-devkit/build-angular": "~0.6.6"
"license": "Apache-2.0", },
"name": "openvidu-testapp", "license": "Apache-2.0",
"private": true, "name": "openvidu-testapp",
"scripts": { "private": true,
"build": "ng build", "scripts": {
"e2e": "ng e2e", "build": "ng build",
"lint": "ng lint", "e2e": "ng e2e",
"ng": "ng", "lint": "ng lint",
"start": "ng serve", "ng": "ng",
"test": "ng test" "start": "ng serve",
}, "test": "ng test"
"version": "2.1.0" },
"version": "2.1.0"
} }

View File

@ -14,5 +14,14 @@ main {
mat-toolbar a { mat-toolbar a {
padding: 0 10px 0 10px; padding: 0 10px 0 10px;
margin: 0 3px 0 3px;
font-weight: bold; font-weight: bold;
}
mat-toolbar a:first-of-type {
margin-left: 0;
}
main > mat-form-field:first-of-type {
margin-right: 5px;
} }

View File

@ -1,6 +1,6 @@
mat-chip { mat-chip {
margin: 0 0 5px 0 !important; margin: 0 0 5px 0 !important;
height: 12px; height: 25px;
max-width: 180px; max-width: 180px;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
@ -28,4 +28,8 @@ button.device-btn mat-icon {
div.mat-form-field-subscript-wrapper { div.mat-form-field-subscript-wrapper {
margin-top: 0 !important; margin-top: 0 !important;
}
mat-checkbox {
margin-right: 4px;
} }

View File

@ -44,8 +44,8 @@ mat-card.session-card {
margin-bottom: 0; margin-bottom: 0;
} }
#join-btn { .join-btn {
margin: 0 0 4px 4px; margin-right: 4px;
} }
#leave-btn { #leave-btn {
@ -88,8 +88,14 @@ mat-radio-button {
background: none; background: none;
cursor: pointer; cursor: pointer;
padding: 0; padding: 0;
margin-right: 4px;
} }
.session-actions button:last-child {
margin-right: 0;
}
.session-actions button:hover { .session-actions button:hover {
color: #4d4d4d; color: #4d4d4d;
} }
@ -159,4 +165,12 @@ mat-expansion-panel-header {
.publisher-btns-div { .publisher-btns-div {
margin-top: -7px; margin-top: -7px;
}
mat-checkbox {
margin-left: 4px;
}
mat-checkbox:first-of-type {
margin-left: 0;
} }

View File

@ -81,7 +81,7 @@
<mat-icon class="mat-icon-custom-ic" aria-label="Session properties button">settings</mat-icon> <mat-icon class="mat-icon-custom-ic" aria-label="Session properties button">settings</mat-icon>
</button> </button>
<button mat-icon-button title="Add new publisher to running session" [id]="'session-api-btn-' + index" class="mat-icon-custom" <button mat-icon-button title="Add new publisher to running session" [id]="'session-api-btn-' + index" class="mat-icon-custom"
(click)="addNewPublisher()" [disabled]="!session || ((!sendAudio && !sendVideo) || !publishTo)"> [disabled]="!session || !publishTo">
<mat-icon class="mat-icon-custom-ic" aria-label="Session API button">add_circle</mat-icon> <mat-icon class="mat-icon-custom-ic" aria-label="Session API button">add_circle</mat-icon>
</button> </button>
</div> </div>

View File

@ -2,7 +2,7 @@ import {
Component, Input, HostListener, ChangeDetectorRef, SimpleChanges, ElementRef, ViewChild, Component, Input, HostListener, ChangeDetectorRef, SimpleChanges, ElementRef, ViewChild,
OnInit, OnDestroy, OnChanges OnInit, OnDestroy, OnChanges
} from '@angular/core'; } from '@angular/core';
import { Subscription } from 'rxjs/Subscription'; import { Subscription } from 'rxjs';
import { import {
OpenVidu, Session, Subscriber, Publisher, Stream, Connection, OpenVidu, Session, Subscriber, Publisher, Stream, Connection,
@ -168,7 +168,7 @@ export class OpenviduInstanceComponent implements OnInit, OnChanges, OnDestroy {
private removeHttps = input => input.replace(/^https?:\/\//, ''); private removeHttps = input => input.replace(/^https?:\/\//, '');
private joinSession(): void { joinSession(): void {
if (this.session) { if (this.session) {
this.leaveSession(); this.leaveSession();

View File

@ -1,5 +1,5 @@
import { Component, Input, OnInit, OnDestroy } from '@angular/core'; import { Component, Input, OnInit, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs/Subscription'; import { Subscription } from 'rxjs';
import { OpenviduRestService } from '../../services/openvidu-rest.service'; import { OpenviduRestService } from '../../services/openvidu-rest.service';
import { OpenviduParamsService } from '../../services/openvidu-params.service'; import { OpenviduParamsService } from '../../services/openvidu-params.service';
import { SessionProperties, RecordingMode, RecordingLayout, MediaMode } from 'openvidu-node-client'; import { SessionProperties, RecordingMode, RecordingLayout, MediaMode } from 'openvidu-node-client';
@ -71,7 +71,7 @@ export class TestApirestComponent implements OnInit, OnDestroy {
if (!!this.paramsSubscription) { this.paramsSubscription.unsubscribe(); } if (!!this.paramsSubscription) { this.paramsSubscription.unsubscribe(); }
} }
private getSessionId() { getSessionId() {
this.openviduRestService.getSessionId(this.openviduUrl, this.openviduSecret, this.openviduRestService.getSessionId(this.openviduUrl, this.openviduSecret,
{ {
recordingMode: RecordingMode[this.selectedRecordingMode], recordingMode: RecordingMode[this.selectedRecordingMode],
@ -88,7 +88,7 @@ export class TestApirestComponent implements OnInit, OnDestroy {
}); });
} }
private getToken() { 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)
@ -100,19 +100,19 @@ export class TestApirestComponent implements OnInit, OnDestroy {
}); });
} }
private updateData() { updateData() {
this.data = Array.from(this.openviduRestService.getAvailableParams()); this.data = Array.from(this.openviduRestService.getAvailableParams());
} }
private getTokenDisabled(): boolean { getTokenDisabled(): boolean {
return ((this.data.length === 0) || this.selectedRadioIndex === undefined); return ((this.data.length === 0) || this.selectedRadioIndex === undefined);
} }
private getBackgroundColor(index: number) { getBackgroundColor(index: number) {
return this.cg[((index + 1) * 15) % numColors]; return this.cg[((index + 1) * 15) % numColors];
} }
private cleanAllSessions() { cleanAllSessions() {
this.data = []; this.data = [];
this.openviduRestService.sessionIdSession.clear(); this.openviduRestService.sessionIdSession.clear();
this.openviduRestService.sessionIdTokenOpenViduRole.clear(); this.openviduRestService.sessionIdTokenOpenViduRole.clear();

View File

@ -12,6 +12,10 @@ app-openvidu-instance {
float: left; float: left;
} }
button {
margin-right: 5px;
}
.scenario-div { .scenario-div {
float: right; float: right;
} }

View File

@ -1,5 +1,5 @@
import { Component, OnInit, OnDestroy } from '@angular/core'; import { Component, OnInit, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs/Subscription'; import { Subscription } from 'rxjs';
import { OpenviduParamsService } from '../../services/openvidu-params.service'; import { OpenviduParamsService } from '../../services/openvidu-params.service';
import { TestFeedService } from '../../services/test-feed.service'; import { TestFeedService } from '../../services/test-feed.service';
import { SessionConf } from '../openvidu-instance/openvidu-instance.component'; import { SessionConf } from '../openvidu-instance/openvidu-instance.component';
@ -46,7 +46,7 @@ export class TestSessionsComponent implements OnInit, OnDestroy {
this.paramsSubscription.unsubscribe(); this.paramsSubscription.unsubscribe();
} }
private addUser(): void { addUser(): void {
this.users.push({ this.users.push({
subscribeTo: true, subscribeTo: true,
publishTo: true, publishTo: true,
@ -54,11 +54,11 @@ export class TestSessionsComponent implements OnInit, OnDestroy {
}); });
} }
private removeUser(): void { removeUser(): void {
this.users.pop(); this.users.pop();
} }
private removeAllUsers(): void { removeAllUsers(): void {
this.users = []; this.users = [];
} }
@ -92,7 +92,7 @@ export class TestSessionsComponent implements OnInit, OnDestroy {
} }
} }
private loadScenario(subsPubs: number, pubs: number, subs: number, ): void { loadScenario(subsPubs: number, pubs: number, subs: number, ): void {
this.users = []; this.users = [];
this.loadSubsPubs(subsPubs); this.loadSubsPubs(subsPubs);
this.loadPubs(pubs); this.loadPubs(pubs);

View File

@ -16,7 +16,7 @@ import {
import { EventsDialogComponent } from '../dialogs/events-dialog.component'; import { EventsDialogComponent } from '../dialogs/events-dialog.component';
import { MuteSubscribersService } from '../../services/mute-subscribers.service'; import { MuteSubscribersService } from '../../services/mute-subscribers.service';
import { Subscription } from 'rxjs/Subscription'; import { Subscription } from 'rxjs';
import { LocalRecordingDialogComponent } from '../dialogs/local-recording-dialog.component'; import { LocalRecordingDialogComponent } from '../dialogs/local-recording-dialog.component';
import { ExtensionDialogComponent } from '../dialogs/extension-dialog.component'; import { ExtensionDialogComponent } from '../dialogs/extension-dialog.component';
import { OpenViduVideoComponent } from './ov-video.component'; import { OpenViduVideoComponent } from './ov-video.component';

View File

@ -1,5 +1,5 @@
import { Injectable } from '@angular/core'; import { Injectable } from '@angular/core';
import { Subject } from 'rxjs/Subject'; import { Subject } from 'rxjs';
@Injectable() @Injectable()
export class MuteSubscribersService { export class MuteSubscribersService {

View File

@ -1,5 +1,5 @@
import { Injectable } from '@angular/core'; import { Injectable } from '@angular/core';
import { Subject } from 'rxjs/Subject'; import { Subject } from 'rxjs';
export interface OpenviduParams { export interface OpenviduParams {
openviduUrl: string; openviduUrl: string;

View File

@ -1,5 +1,5 @@
import { Injectable } from '@angular/core'; import { Injectable } from '@angular/core';
import { Subject } from 'rxjs/Subject'; import { Subject } from 'rxjs';
@Injectable() @Injectable()
export class TestFeedService { export class TestFeedService {

View File

@ -70,3 +70,5 @@ import 'zone.js/dist/zone'; // Included with Angular CLI.
* Need to import at least one locale-data with intl. * Need to import at least one locale-data with intl.
*/ */
// import 'intl/locale-data/jsonp/en'; // import 'intl/locale-data/jsonp/en';
(window as any).global = window;

View File

@ -11,7 +11,8 @@
] ]
}, },
"files": [ "files": [
"test.ts" "test.ts",
"polyfills.ts"
], ],
"include": [ "include": [
"**/*.spec.ts", "**/*.spec.ts",

View File

@ -14,8 +14,7 @@
"eofline": true, "eofline": true,
"forin": true, "forin": true,
"import-blacklist": [ "import-blacklist": [
true, true
"rxjs"
], ],
"import-spacing": true, "import-spacing": true,
"indent": [ "indent": [