From b55faf831b769ea32599188f1e4169d9a0cd1c13 Mon Sep 17 00:00:00 2001
From: pabloFuente <pablofuenteperez@gmail.com>
Date: Fri, 3 Aug 2018 15:00:12 +0200
Subject: [PATCH] openvidu-testapp: filter events feature

---
 .../filter-dialog/filter-dialog.component.css | 29 ++++++++
 .../filter-dialog.component.html              | 48 ++++++++++++++
 .../filter-dialog/filter-dialog.component.ts  | 66 ++++++++-----------
 .../publisher-properties-dialog.component.ts  |  6 +-
 .../scenario-properties-dialog.component.html |  4 +-
 .../session-properties-dialog.component.html  |  4 +-
 .../openvidu-instance.component.ts            | 18 ++++-
 .../app/components/video/video.component.ts   |  2 +-
 8 files changed, 128 insertions(+), 49 deletions(-)
 create mode 100644 openvidu-testapp/src/app/components/dialogs/filter-dialog/filter-dialog.component.css
 create mode 100644 openvidu-testapp/src/app/components/dialogs/filter-dialog/filter-dialog.component.html

diff --git a/openvidu-testapp/src/app/components/dialogs/filter-dialog/filter-dialog.component.css b/openvidu-testapp/src/app/components/dialogs/filter-dialog/filter-dialog.component.css
new file mode 100644
index 00000000..96f4d065
--- /dev/null
+++ b/openvidu-testapp/src/app/components/dialogs/filter-dialog/filter-dialog.component.css
@@ -0,0 +1,29 @@
+#response-text-area {
+    width: 100%;
+    color: #808080;
+}
+
+#response-text-area textarea {
+    resize: none;
+}
+
+mat-dialog-content button, mat-divider {
+    margin-bottom: 5px;
+}
+
+mat-dialog-content button {
+    height: 30px;
+    line-height: 30px;
+    padding-left: 12px;
+    padding-right: 12px;
+    display: inline-flex;
+}
+
+.label {
+    display: block;
+    font-size: 12px;
+    color: rgba(0, 0, 0, 0.54);
+    font-weight: 400;
+    margin-bottom: 5px;
+    margin-top: 13px
+}
\ No newline at end of file
diff --git a/openvidu-testapp/src/app/components/dialogs/filter-dialog/filter-dialog.component.html b/openvidu-testapp/src/app/components/dialogs/filter-dialog/filter-dialog.component.html
new file mode 100644
index 00000000..e8204734
--- /dev/null
+++ b/openvidu-testapp/src/app/components/dialogs/filter-dialog/filter-dialog.component.html
@@ -0,0 +1,48 @@
+<div>
+    <div fxLayout="row" fxLayoutGap="20px">
+        <div>
+            <h2 mat-dialog-title>Filter application</h2>
+            <mat-dialog-content>
+                <label class="label">Apply filter</label>
+                <button mat-button id="apply-filter-btn" (click)="apply()">Apply</button>
+                <mat-form-field class="inner-text-input">
+                    <input matInput id="filter-type-field" placeholder="Type" [(ngModel)]="filterType">
+                </mat-form-field>
+                <mat-form-field class="inner-text-input">
+                    <input matInput id="filter-options-field" placeholder="Options" [(ngModel)]="filterOptions">
+                </mat-form-field>
+                <mat-divider></mat-divider>
+                <label class="label">Exec filter method</label>
+                <button mat-button id="exec-filter-btn" (click)="execMethod()">Exec</button>
+                <mat-form-field class="inner-text-input">
+                    <input matInput id="filter-method-field" placeholder="Method" [(ngModel)]="filterMethod">
+                </mat-form-field>
+                <mat-form-field class="inner-text-input">
+                    <input matInput id="filter-params-field" placeholder="Params" [(ngModel)]="filterParams">
+                </mat-form-field>
+                <mat-divider></mat-divider>
+                <label class="label">Remove filter</label>
+                <button mat-button id="remove-filter-btn" (click)="remove()">Remove</button>
+                <mat-form-field *ngIf="!!response" id="response-text-area" appearance="fill">
+                    <textarea id="api-response-text-area" [(ngModel)]="response" matInput readonly></textarea>
+                </mat-form-field>
+            </mat-dialog-content>
+            <mat-dialog-actions>
+                <button mat-button id="close-dialog-btn" [mat-dialog-close]="{session: session}">CLOSE</button>
+            </mat-dialog-actions>
+        </div>
+        <div>
+            <h2 mat-dialog-title>Filter events</h2>
+            <mat-dialog-content>
+                <mat-form-field class="inner-text-input">
+                    <input matInput id="filter-type-field" placeholder="Event type" [(ngModel)]="eventType">
+                </mat-form-field>
+                <label class="label">Add listener to filter event</label>
+                <button mat-button id="sub-filter-event-btn" (click)="subFilterEvent()">Add listener</button>
+                <mat-divider></mat-divider>
+                <label class="label">Remove listener of filter event</label>
+                <button mat-button id="sub-filter-event-btn" (click)="unsubFilterEvent()">Remove listener</button>
+            </mat-dialog-content>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/openvidu-testapp/src/app/components/dialogs/filter-dialog/filter-dialog.component.ts b/openvidu-testapp/src/app/components/dialogs/filter-dialog/filter-dialog.component.ts
index ed43012f..2b98c80b 100644
--- a/openvidu-testapp/src/app/components/dialogs/filter-dialog/filter-dialog.component.ts
+++ b/openvidu-testapp/src/app/components/dialogs/filter-dialog/filter-dialog.component.ts
@@ -5,46 +5,8 @@ import { Session, Stream } from 'openvidu-browser';
 
 @Component({
     selector: 'app-session-api-dialog',
-    template: `
-    <div>
-        <h2 mat-dialog-title>Filter configuration</h2>
-        <mat-dialog-content>
-            <label class="label">Apply filter</label>
-            <button mat-button id="apply-filter-btn" (click)="apply()">Apply</button>
-            <mat-form-field class="inner-text-input">
-                <input matInput id="filter-type-field" placeholder="Type" [(ngModel)]="filterType">
-            </mat-form-field>
-            <mat-form-field class="inner-text-input">
-                <input matInput id="filter-options-field" placeholder="Options" [(ngModel)]="filterOptions">
-            </mat-form-field>
-            <mat-divider></mat-divider>
-            <label class="label">Exec filter method</label>
-            <button mat-button id="exec-filter-btn" (click)="execMethod()">Exec</button>
-            <mat-form-field class="inner-text-input">
-                <input matInput id="filter-method-field" placeholder="Method" [(ngModel)]="filterMethod">
-            </mat-form-field>
-            <mat-form-field class="inner-text-input">
-                <input matInput id="filter-params-field" placeholder="Params" [(ngModel)]="filterParams">
-            </mat-form-field>
-            <mat-divider></mat-divider>
-            <label class="label">Remove filter</label>
-            <button mat-button id="remove-filter-btn" (click)="remove()">Remove</button>
-            <mat-form-field *ngIf="!!response" id="response-text-area" appearance="fill">
-                <textarea id="api-response-text-area" [(ngModel)]="response" matInput readonly></textarea>
-            </mat-form-field>
-        </mat-dialog-content>
-        <mat-dialog-actions>
-            <button mat-button id="close-dialog-btn"  [mat-dialog-close]="{session: session}">CLOSE</button>
-        </mat-dialog-actions>
-    </div>
-    `,
-    styles: [
-        '#response-text-area { width: 100%; color: #808080; }',
-        '#response-text-area textarea { resize: none; }',
-        'mat-dialog-content button, mat-divider { margin-bottom: 5px; }',
-        'mat-dialog-content button { height: 30px; line-height: 30px; padding-left: 12px; padding-right: 12px; display: inline-flex;}',
-        '.label { display: block; font-size: 12px; color: rgba(0, 0, 0, 0.54); font-weight: 400; margin-bottom: 5px; margin-top: 13px}',
-    ]
+    templateUrl: './filter-dialog.component.html',
+    styleUrls: ['./filter-dialog.component.css'],
 })
 export class FilterDialogComponent {
 
@@ -57,6 +19,8 @@ export class FilterDialogComponent {
     filterMethod = 'setElementProperty';
     filterParams = '{"propertyName":"saturation","propertyValue":"1.0"}';
 
+    eventType: string;
+
     response: string;
 
     constructor(public dialogRef: MatDialogRef<FilterDialogComponent>,
@@ -98,4 +62,26 @@ export class FilterDialogComponent {
             });
     }
 
+    subFilterEvent() {
+        console.log('Adding filter event');
+        this.session.addFilterEventListener(this.stream, this.eventType)
+            .then(() => {
+                this.response = 'Filter event listener added';
+            })
+            .catch(error => {
+                this.response = 'Error [' + error.message + ']';
+            });
+    }
+
+    unsubFilterEvent() {
+        console.log('Removing filter event');
+        this.session.removeFilterEventListener(this.stream, this.eventType)
+            .then(() => {
+                this.response = 'Filter event listener removed';
+            })
+            .catch(error => {
+                this.response = 'Error [' + error.message + ']';
+            });
+    }
+
 }
diff --git a/openvidu-testapp/src/app/components/dialogs/publisher-properties-dialog/publisher-properties-dialog.component.ts b/openvidu-testapp/src/app/components/dialogs/publisher-properties-dialog/publisher-properties-dialog.component.ts
index 5e10abd0..5a90beb8 100644
--- a/openvidu-testapp/src/app/components/dialogs/publisher-properties-dialog/publisher-properties-dialog.component.ts
+++ b/openvidu-testapp/src/app/components/dialogs/publisher-properties-dialog/publisher-properties-dialog.component.ts
@@ -80,7 +80,11 @@ export class PublisherPropertiesDialogComponent {
         } catch (e) {
             console.error('Invalid JSON object in "Filter options" field');
         }
-        this.publisherProperties.filter = this.filter;
+        if (!this.filter.type) {
+            delete this.publisherProperties.filter;
+        } else {
+            this.publisherProperties.filter = this.filter;
+        }
         return this.publisherProperties;
     }
 
diff --git a/openvidu-testapp/src/app/components/dialogs/scenario-properties-dialog/scenario-properties-dialog.component.html b/openvidu-testapp/src/app/components/dialogs/scenario-properties-dialog/scenario-properties-dialog.component.html
index 6b86944c..424d8d6c 100644
--- a/openvidu-testapp/src/app/components/dialogs/scenario-properties-dialog/scenario-properties-dialog.component.html
+++ b/openvidu-testapp/src/app/components/dialogs/scenario-properties-dialog/scenario-properties-dialog.component.html
@@ -12,10 +12,10 @@
                 <mat-form-field style="width: 100%">
                     <input matInput placeholder="url" [(ngModel)]="manualTurnConf.urls[0]">
                 </mat-form-field>
-                <mat-form-field style="width: 49%; padding-right: 2px">
+                <mat-form-field style="width: 48%; padding-right: 2px">
                     <input matInput placeholder="user" [(ngModel)]="manualTurnConf.username">
                 </mat-form-field>
-                <mat-form-field style="width: 49%; padding-left: 2px">
+                <mat-form-field style="width: 48%; padding-left: 2px">
                     <input matInput placeholder="pass" [(ngModel)]="manualTurnConf.credential">
                 </mat-form-field>
             </div>
diff --git a/openvidu-testapp/src/app/components/dialogs/session-properties-dialog/session-properties-dialog.component.html b/openvidu-testapp/src/app/components/dialogs/session-properties-dialog/session-properties-dialog.component.html
index 9df17402..7f4254ae 100644
--- a/openvidu-testapp/src/app/components/dialogs/session-properties-dialog/session-properties-dialog.component.html
+++ b/openvidu-testapp/src/app/components/dialogs/session-properties-dialog/session-properties-dialog.component.html
@@ -41,10 +41,10 @@
                         <mat-form-field style="width: 100%">
                             <input matInput placeholder="url" type="text" [(ngModel)]="manualTurnConf.urls[0]">
                         </mat-form-field>
-                        <mat-form-field style="width: 49%; padding-right: 2px">
+                        <mat-form-field style="width: 48%; padding-right: 2px">
                             <input matInput placeholder="user" type="text" [(ngModel)]="manualTurnConf.username">
                         </mat-form-field>
-                        <mat-form-field style="width: 49%; padding-left: 2px">
+                        <mat-form-field style="width: 48%; padding-left: 2px">
                             <input matInput placeholder="pass" type="text" [(ngModel)]="manualTurnConf.credential">
                         </mat-form-field>
                     </div>
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 e3b82e52..93ade0b6 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,7 +6,7 @@ import {
 import {
   OpenVidu, Session, Subscriber, Publisher, VideoInsertMode, StreamEvent, ConnectionEvent,
   SessionDisconnectedEvent, SignalEvent, RecordingEvent,
-  PublisherSpeakingEvent, PublisherProperties, StreamPropertyChangedEvent, OpenViduError
+  PublisherSpeakingEvent, PublisherProperties, StreamPropertyChangedEvent, OpenViduError, FilterEvent
 } from 'openvidu-browser';
 import {
   OpenVidu as OpenViduAPI,
@@ -111,7 +111,8 @@ export class OpenviduInstanceComponent implements OnInit, OnChanges, OnDestroy {
     recordingStopped: true,
     signal: true,
     publisherStartSpeaking: false,
-    publisherStopSpeaking: false
+    publisherStopSpeaking: false,
+    filterEventDispatched: true
   };
 
   // Session properties dialog
@@ -434,6 +435,16 @@ export class OpenviduInstanceComponent implements OnInit, OnChanges, OnDestroy {
         });
       }
     }
+
+    if (this.sessionEvents.filterEventDispatched !== oldValues.filterEventDispatched || firstTime) {
+      this.session.off('filterEventDispatched');
+      if (this.sessionEvents.filterEventDispatched) {
+        this.session.on('filterEventDispatched', (event: FilterEvent) => {
+          this.updateEventList('filterEventDispatched',
+            event.filter.type + ' {type: ' + event.eventType + ', data: ' + event.data.toString() + '}');
+        });
+      }
+    }
   }
 
   syncInitPublisher() {
@@ -598,7 +609,8 @@ export class OpenviduInstanceComponent implements OnInit, OnChanges, OnDestroy {
         recordingStopped: result.recordingStopped,
         signal: result.signal,
         publisherStartSpeaking: result.publisherStartSpeaking,
-        publisherStopSpeaking: result.publisherStopSpeaking
+        publisherStopSpeaking: result.publisherStopSpeaking,
+        filterEventDispatched: result.filterEventDispatched
       };
       document.getElementById('session-events-btn-' + this.index).classList.remove('cdk-program-focused');
     });
diff --git a/openvidu-testapp/src/app/components/video/video.component.ts b/openvidu-testapp/src/app/components/video/video.component.ts
index 7004d568..f37fb742 100644
--- a/openvidu-testapp/src/app/components/video/video.component.ts
+++ b/openvidu-testapp/src/app/components/video/video.component.ts
@@ -626,7 +626,7 @@ export class VideoComponent implements OnInit, OnDestroy {
         this.dialog.open(FilterDialogComponent, {
             data: { session: this.streamManager.stream.session, stream: this.streamManager.stream },
             disableClose: true,
-            width: '250px'
+            width: '450px'
         });
     }