diff --git a/openvidu-testapp/src/app/app.material.module.ts b/openvidu-testapp/src/app/app.material.module.ts
index 2f5a6cd5..6b5a89ea 100644
--- a/openvidu-testapp/src/app/app.material.module.ts
+++ b/openvidu-testapp/src/app/app.material.module.ts
@@ -16,6 +16,7 @@ import {
MdRadioModule,
MdSelectModule,
MdChipsModule,
+ MdExpansionModule,
MdSlideToggleModule
} from '@angular/material';
@@ -37,6 +38,7 @@ import {
MdRadioModule,
MdSelectModule,
MdChipsModule,
+ MdExpansionModule,
MdSlideToggleModule
],
})
diff --git a/openvidu-testapp/src/app/components/openvidu-instance/openvidu-instance.component.css b/openvidu-testapp/src/app/components/openvidu-instance/openvidu-instance.component.css
index c2c5c796..12401c35 100644
--- a/openvidu-testapp/src/app/components/openvidu-instance/openvidu-instance.component.css
+++ b/openvidu-testapp/src/app/components/openvidu-instance/openvidu-instance.component.css
@@ -92,9 +92,9 @@ md-radio-button {
.event-list {
display: inline-block;
width: 125px;
- max-height: 77.75px;
- margin-top: 12px;
+ height: 183.5px;
overflow-y: auto;
+ overflow-x: hidden;
}
md-chip {
@@ -103,6 +103,8 @@ md-chip {
padding: 6px 9px !important;
margin-bottom: 3.5px !important;
margin-right: 5px !important;
+ text-overflow: ellipsis;
+ overflow: hidden;
}
.scroll-custom::-webkit-scrollbar-track {
@@ -112,10 +114,20 @@ md-chip {
}
.scroll-custom::-webkit-scrollbar {
- width: 8px;
+ width: 7px;
background-color: #F5F5F5;
}
.scroll-custom::-webkit-scrollbar-thumb {
background-color: #797979;
}
+
+md-expansion-panel {
+ background: #e0e0e0 !important;
+ margin-right: 0 !important;
+}
+
+md-expansion-panel-header {
+ font-size: 10.5px !important;
+ padding: 0 7px 0 9px !important;
+}
diff --git a/openvidu-testapp/src/app/components/openvidu-instance/openvidu-instance.component.html b/openvidu-testapp/src/app/components/openvidu-instance/openvidu-instance.component.html
index 706cf5d9..49b5f9fb 100644
--- a/openvidu-testapp/src/app/components/openvidu-instance/openvidu-instance.component.html
+++ b/openvidu-testapp/src/app/components/openvidu-instance/openvidu-instance.component.html
@@ -18,7 +18,7 @@
- Subscribe
+ Subscribe
Publish
@@ -68,22 +68,30 @@
{{sessionName}}
-
-
-
+
+
+
diff --git a/openvidu-testapp/src/app/components/openvidu-instance/openvidu-instance.component.ts b/openvidu-testapp/src/app/components/openvidu-instance/openvidu-instance.component.ts
index ce1d4df5..8da5d154 100644
--- a/openvidu-testapp/src/app/components/openvidu-instance/openvidu-instance.component.ts
+++ b/openvidu-testapp/src/app/components/openvidu-instance/openvidu-instance.component.ts
@@ -6,6 +6,19 @@ import { OpenVidu, Session, Subscriber, Publisher, Stream } from 'openvidu-brows
declare var $: any;
+export interface SessionConf {
+ subscribeTo: boolean;
+ publishTo: boolean;
+ sendAudio: boolean;
+ sendVideo: boolean;
+ startSession: boolean;
+}
+
+export interface OpenViduEvent {
+ name: string;
+ content: string;
+}
+
@Component({
selector: 'app-openvidu-instance',
templateUrl: './openvidu-instance.component.html',
@@ -19,15 +32,18 @@ export class OpenviduInstanceComponent implements OnInit, OnChanges, OnDestroy {
@Input()
openviduSecret: string;
+ @Input()
+ sessionConf: SessionConf;
+
// Session join data
clientData: string;
sessionName: string;
// Session options
- subscribeTo = true;
- publishTo = true;
- sendAudio = true;
- sendVideo = true;
+ subscribeTo;
+ publishTo;
+ sendAudio;
+ sendVideo;
activeAudio = true;
activeVideo = true;
sendVideoRadio = true;
@@ -43,7 +59,6 @@ export class OpenviduInstanceComponent implements OnInit, OnChanges, OnDestroy {
checkActiveVideo = true;
checkRadioVideo = true;
checkRadioScreen = false;
- disableSubscribeTo = false;
disablePublishTo = false;
disableSendAudio = false;
disableSendVideo = false;
@@ -62,13 +77,27 @@ export class OpenviduInstanceComponent implements OnInit, OnChanges, OnDestroy {
audioIcon = 'mic';
videoIcon = 'videocam';
- events: string[] = [];
+ events: OpenViduEvent[] = [];
constructor(private changeDetector: ChangeDetectorRef) {
this.generateSessionInfo();
}
- ngOnInit() { }
+ ngOnInit() {
+ this.subscribeTo = this.sessionConf.subscribeTo;
+ this.publishTo = this.sessionConf.publishTo;
+ this.sendAudio = this.sessionConf.sendAudio;
+ this.sendVideo = this.sessionConf.sendVideo;
+
+ if (!this.publishTo) {
+ this.publishTo = !this.publishTo;
+ this.togglePublishTo();
+ }
+
+ if (this.sessionConf.startSession) {
+ this.joinSession();
+ }
+ }
ngOnChanges(changes: SimpleChanges) {
if (changes.openviduSecret) {
@@ -105,7 +134,6 @@ export class OpenviduInstanceComponent implements OnInit, OnChanges, OnDestroy {
this.session = OV.initSession('wss://'
+ this.removeHttps(this.openviduUrl)
- + '/'
+ this.sessionName + '?secret='
+ this.openviduSecret);
@@ -116,29 +144,33 @@ export class OpenviduInstanceComponent implements OnInit, OnChanges, OnDestroy {
if (this.subscribeTo) {
const subscriber: Subscriber = this.session.subscribe(event.stream, 'remote-vid-' + this.session.connection.connectionId);
subscriber.on('videoElementCreated', (e) => {
+ if (!event.stream.getRecvVideo()) {
+ $(e.element).css({ 'background-color': '#4d4d4d' });
+ $(e.element).attr('poster', 'assets/images/volume.png');
+ }
this.appendUserData(e.element, subscriber.stream.connection.data, subscriber.stream.connection);
- this.updateEventList('videoElementCreated');
+ this.updateEventList('videoElementCreated', e.element.id);
});
subscriber.on('videoPlaying', (e) => {
- this.updateEventList('videoPlaying');
+ this.updateEventList('videoPlaying', e.element.id);
});
}
- this.updateEventList('streamCreated');
+ this.updateEventList('streamCreated', event.stream.connection.connectionId);
});
this.session.on('streamDestroyed', (event) => {
this.removeUserData(event.stream.connection);
- this.updateEventList('streamDestroyed');
+ this.updateEventList('streamDestroyed', event.stream.connection.connectionId);
});
this.session.on('connectionCreated', (event) => {
- this.updateEventList('connectionCreated');
+ this.updateEventList('connectionCreated', event.connection.connectionId);
});
this.session.on('connetionDestroyed', (event) => {
- this.updateEventList('connetionDestroyed');
+ this.updateEventList('connetionDestroyed', event.connection.connectionId);
});
this.session.on('sessionDisconnected', (event) => {
- this.updateEventList('sessionDisconnected');
+ this.updateEventList('sessionDisconnected', 'No data');
});
this.session.connect(null, this.clientData, (error) => {
@@ -159,15 +191,28 @@ export class OpenviduInstanceComponent implements OnInit, OnChanges, OnDestroy {
});
this.publisher.on('videoElementCreated', (event) => {
- this.updateEventList('videoElementCreated');
+ if (this.publishTo && !this.sendVideo) {
+ $(event.element).css({ 'background-color': '#4d4d4d' });
+ $(event.element).attr('poster', 'assets/images/volume.png');
+ }
+ this.updateEventList('videoElementCreated', event.element.id);
});
+ this.publisher.on('accessAllowed', (e) => {
+ this.updateEventList('accessAllowed', '');
+ });
+
+ this.publisher.on('accessDenied', (e) => {
+ this.updateEventList('accessDenied', '');
+ });
+
+
this.publisher.on('videoPlaying', (e) => {
- this.updateEventList('videoPlaying');
+ this.updateEventList('videoPlaying', e.element.id);
});
this.publisher.on('remoteVideoPlaying', (e) => {
- this.updateEventList('remoteVideoPlaying');
+ this.updateEventList('remoteVideoPlaying', e.element.id);
});
if (this.subscribeToRemote) {
@@ -224,8 +269,8 @@ export class OpenviduInstanceComponent implements OnInit, OnChanges, OnDestroy {
$('#remote-vid-' + this.session.connection.connectionId).find('#data-' + connection.connectionId).remove();
}
- private updateEventList(event: string) {
- this.events.push(event);
+ private updateEventList(event: string, content: string) {
+ this.events.push({ name: event, content: content });
}
toggleSubscribeTo(): void {
diff --git a/openvidu-testapp/src/app/components/test-sessions/test-sessions.component.css b/openvidu-testapp/src/app/components/test-sessions/test-sessions.component.css
index c4725e6c..25a4cb8f 100644
--- a/openvidu-testapp/src/app/components/test-sessions/test-sessions.component.css
+++ b/openvidu-testapp/src/app/components/test-sessions/test-sessions.component.css
@@ -3,6 +3,27 @@ app-openvidu-instance {
margin: 25px 5px 0px 0px;
}
+.top-div {
+ display: inline-block;
+ width: 100%;
+}
+
+.controls-div {
+ float: left;
+}
+
.scenario-div {
float: right;
}
+
+.instance-div {
+ display: inline-block;
+}
+
+md-form-field {
+ width: 30px;
+}
+
+.auto-join-check {
+ margin-right: 10px;
+}
\ No newline at end of file
diff --git a/openvidu-testapp/src/app/components/test-sessions/test-sessions.component.html b/openvidu-testapp/src/app/components/test-sessions/test-sessions.component.html
index 0525e85f..17c3fa63 100644
--- a/openvidu-testapp/src/app/components/test-sessions/test-sessions.component.html
+++ b/openvidu-testapp/src/app/components/test-sessions/test-sessions.component.html
@@ -1,11 +1,23 @@
-
-
-
+
+
+
+
+
+
- Load scenario
-
+ Auto join
+
+
+
+
+
-
+
+
+
diff --git a/openvidu-testapp/src/app/components/test-sessions/test-sessions.component.ts b/openvidu-testapp/src/app/components/test-sessions/test-sessions.component.ts
index 0a029136..691b0a24 100644
--- a/openvidu-testapp/src/app/components/test-sessions/test-sessions.component.ts
+++ b/openvidu-testapp/src/app/components/test-sessions/test-sessions.component.ts
@@ -1,6 +1,7 @@
import { Component, OnInit, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs/Subscription';
import { OpenviduParamsService } from '../../services/openvidu-params.service';
+import { SessionConf } from '../openvidu-instance/openvidu-instance.component';
@Component({
selector: 'app-test-sessions',
@@ -15,7 +16,10 @@ export class TestSessionsComponent implements OnInit, OnDestroy {
paramsSubscription: Subscription;
// OpenViduInstance collection
- users = [true];
+ users: SessionConf[] = [];
+
+ numberSubs = 3;
+ autoJoin = false;
constructor(private openviduParamsService: OpenviduParamsService) { }
@@ -35,8 +39,57 @@ export class TestSessionsComponent implements OnInit, OnDestroy {
this.paramsSubscription.unsubscribe();
}
- private addUser() {
- this.users.push(true);
+ private addUser(): void {
+ this.users.push({
+ subscribeTo: true,
+ publishTo: true,
+ sendAudio: true,
+ sendVideo: true,
+ startSession: false
+ });
+ }
+
+ private loadSubsPubs(n: number): void {
+ for (let i = 0; i < n; i++) {
+ this.users.push({
+ subscribeTo: true,
+ publishTo: true,
+ sendAudio: true,
+ sendVideo: true,
+ startSession: this.autoJoin
+ });
+ }
+ }
+
+ private loadSubs(n: number): void {
+ for (let i = 0; i < n; i++) {
+ this.users.push({
+ subscribeTo: true,
+ publishTo: false,
+ sendAudio: false,
+ sendVideo: false,
+ startSession: this.autoJoin
+ });
+ }
+ }
+
+ private loadPubs(n: number): void {
+ for (let i = 0; i < n; i++) {
+ this.users.push({
+ subscribeTo: false,
+ publishTo: true,
+ sendAudio: true,
+ sendVideo: true,
+ startSession: this.autoJoin
+ });
+ }
+ }
+
+ private loadScenario(subsPubs: number, pubs: number, subs: number, ): void {
+ this.users = [];
+ this.loadSubsPubs(subsPubs);
+ this.loadPubs(pubs);
+ this.loadSubs(subs);
}
}
diff --git a/openvidu-testapp/src/assets/images/volume.png b/openvidu-testapp/src/assets/images/volume.png
new file mode 100644
index 00000000..a5c07137
Binary files /dev/null and b/openvidu-testapp/src/assets/images/volume.png differ
diff --git a/openvidu-testapp/src/styles.css b/openvidu-testapp/src/styles.css
index 603540e0..ced5816b 100644
--- a/openvidu-testapp/src/styles.css
+++ b/openvidu-testapp/src/styles.css
@@ -22,7 +22,8 @@ ul {
}
video {
- width: 125px;
+ width: 120px;
+ height: 90px;
}
button {
@@ -44,7 +45,7 @@ button {
.video-container div.data-node {
float: left;
position: relative;
- margin-left: -125px;
+ margin-left: -120px;
margin-top: -14px;
}
@@ -52,8 +53,30 @@ button {
background: #ffffff;
padding-left: 5px;
padding-right: 5px;
- color: #4d4d4d;
+ color: #797979;
font-weight: 100;
font-size: 14px;
border-bottom-right-radius: 2px;
}
+
+.mat-expansion-panel-body {
+ font-size: 9.5px !important;
+ padding: 0 9px 0px !important;
+ background-color: white;
+ border: 3px solid #e0e0e0;
+ line-height: 13px;
+ padding: 4px 7px 3px 7px !important;
+ word-break: break-all;
+}
+
+.mat-expansion-indicator {
+ display: none;
+}
+
+.mat-expansion-indicator::after {
+ display: none;
+}
+
+.mat-expansion-panel-spacing {
+ margin: 3px 0 !important;
+}