openvidu-testapp: event details, scenarios available

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
     ],
 })

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;
+}

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

@@ -18,7 +18,7 @@
 
           <div>
             <button id="join-btn" md-button (click)="joinSession()" [disabled]="session">JOIN</button>
-            <md-checkbox name="subscribeTo" (change)="toggleSubscribeTo()" [checked]="subscribeTo && checkSubscribeTo" [disabled]="session || disableSubscribeTo">Subscribe</md-checkbox>
+            <md-checkbox name="subscribeTo" (change)="toggleSubscribeTo()" [checked]="subscribeTo && checkSubscribeTo" [disabled]="session">Subscribe</md-checkbox>
             <md-checkbox name="publishTo" (change)="togglePublishTo()" [checked]="publishTo && checkPublishTo" [disabled]="session || disablePublishTo">Publish</md-checkbox>
           </div>
 
@@ -68,22 +68,30 @@
         <div class="session-card-inner">
           <div class="session-title">{{sessionName}}</div>
           <div class="session-actions">
-            <button><md-icon *ngIf="publishTo && sendVideo" aria-label="Mute video button" (click)="toggleVideo()">{{videoIcon}}</md-icon></button>
-            <button><md-icon *ngIf="publishTo && sendAudio" aria-label="Mute audio button" (click)="toggleAudio()">{{audioIcon}}</md-icon></button>
-            <button><md-icon aria-label="Leave button" (click)="leaveSession()">clear</md-icon></button>
+            <button *ngIf="publishTo && sendVideo" (click)="toggleVideo()"><md-icon aria-label="Mute video button">{{videoIcon}}</md-icon></button>
+            <button *ngIf="publishTo && sendAudio" (click)="toggleAudio()"><md-icon aria-label="Mute audio button">{{audioIcon}}</md-icon></button>
+            <button (click)="leaveSession()"><md-icon aria-label="Leave button">clear</md-icon></button>
           </div>
         </div>
       </div>
       <div *ngIf="session.connection" fxLayout>
         <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">
+          
+          <div class="event-list scroll-custom">
+              <md-accordion>
+                    <md-expansion-panel *ngFor="let event of events">
+                      <md-expansion-panel-header [collapsedHeight]="'20px'" [expandedHeight]="'20px'">
+                          {{event.name}}
+                      </md-expansion-panel-header>
+                      {{event.content}}
+                    </md-expansion-panel>
+                  </md-accordion>
+            <!--<md-chip-list class="mat-chip-list-stacked" aria-orientation="vertical">
               <md-chip *ngFor="let event of events">{{event}}</md-chip>
-            </md-chip-list>
+            </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 [attr.id]="'local-vid-' + session.connection.connectionId"></div></div>
       </div>
     </md-card>
   </div>

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 {

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;
+}

openvidu-testapp/src/app/components/test-sessions/test-sessions.component.html

@@ -1,11 +1,23 @@
 <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="top-div">
+    <div class="controls-div">
+      <button id="add-user-btn" md-raised-button color="primary" (click)="addUser()">ADD USER</button>
+      <button id="remove-user-btn" md-raised-button color="primary" (click)="users.pop()" [disabled]="!users.length">REMOVE USER</button>
+      <button id="remove-user-btn" md-raised-button color="primary" (click)="users = []" [disabled]="!users.length">REMOVE ALL</button>
+    </div>
     <div class="scenario-div">
-      Load scenario
-
+      <md-checkbox class="auto-join-check" [(ngModel)]="autoJoin" name="autoJoin">Auto join</md-checkbox>
+      <button id="remove-user-btn" md-raised-button color="primary" (click)="loadScenario(2,0,0)">1:1</button>
+      <button id="remove-user-btn" md-raised-button color="primary" (click)="loadScenario(0,1,numberSubs)">1:{{numberSubs}}</button>
+      <md-form-field>
+        <input mdInput [(ngModel)]="numberSubs">
+      </md-form-field>
     </div>
   </div>
-  <app-openvidu-instance *ngFor="let user of users; let i = index" [openviduUrl]="openviduUrl" [openviduSecret]="openviduSecret"></app-openvidu-instance>
+
+  <div class="instance-div">
+    <app-openvidu-instance *ngFor="let user of users" [openviduUrl]="openviduUrl" [openviduSecret]="openviduSecret" [sessionConf]="user">
+    </app-openvidu-instance>
+  </div>
+
 </div>

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);
   }
 
 }

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;
+}