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}}
- - - + + +
-
-
- + +
+ + + + {{event.name}} + + {{event.content}} + + +
-
+
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; +}