openvidu-testapp: update to filter refactoring

openvidu-testapp/src/app/components/dialogs/filter-dialog/filter-dialog.component.ts

@@ -1,7 +1,7 @@
 import { Component, Inject } from '@angular/core';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
 
-import { Session, Stream } from 'openvidu-browser';
+import { Session, Stream, FilterEvent } from 'openvidu-browser';
 
 @Component({
     selector: 'app-session-api-dialog',
@@ -12,6 +12,7 @@ export class FilterDialogComponent {
 
     session: Session;
     stream: Stream;
+    filterEventHandler: (FilterEvent) => void;
 
     filterType = 'GStreamerFilter';
     filterOptions = '{"command": "videobalance saturation=0.0"}';
@@ -27,11 +28,12 @@ export class FilterDialogComponent {
         @Inject(MAT_DIALOG_DATA) public data) {
         this.session = data.session;
         this.stream = data.stream;
+        this.filterEventHandler = data.filterEventHandler;
     }
 
     apply() {
         console.log('Applying filter');
-        this.session.applyFilter(this.stream, this.filterType, JSON.parse(this.filterOptions))
+        this.stream.applyFilter(this.filterType, JSON.parse(this.filterOptions))
             .then(() => {
                 this.response = 'Filter applied';
             })
@@ -41,19 +43,23 @@ export class FilterDialogComponent {
     }
 
     execMethod() {
-        console.log('Executing filter method');
-        this.session.execFilterMethod(this.stream, this.filterMethod, this.filterParams)
-            .then(recording => {
-                this.response = 'Filter method executed';
-            })
-            .catch(error => {
-                this.response = 'Error [' + error.message + ']';
-            });
+        if (!!this.stream.filter) {
+            console.log('Executing filter method');
+            this.stream.filter.execMethod(this.filterMethod, this.filterParams)
+                .then(() => {
+                    this.response = 'Filter method executed';
+                })
+                .catch(error => {
+                    this.response = 'Error [' + error.message + ']';
+                });
+        } else {
+            console.warn('No filter applied to stream ' + this.stream.streamId);
+        }
     }
 
     remove() {
         console.log('Removing filter');
-        this.session.removeFilter(this.stream)
+        this.stream.removeFilter()
             .then(() => {
                 this.response = 'Filter removed';
             })
@@ -64,7 +70,9 @@ export class FilterDialogComponent {
 
     subFilterEvent() {
         console.log('Adding filter event');
-        this.session.addFilterEventListener(this.stream, this.eventType)
+        this.stream.filter.addEventListener(this.eventType, (event: FilterEvent) => {
+            this.filterEventHandler(event);
+        })
             .then(() => {
                 this.response = 'Filter event listener added';
             })
@@ -75,7 +83,7 @@ export class FilterDialogComponent {
 
     unsubFilterEvent() {
         console.log('Removing filter event');
-        this.session.removeFilterEventListener(this.stream, this.eventType)
+        this.stream.filter.removeEventListener(this.eventType)
             .then(() => {
                 this.response = 'Filter event listener removed';
             })

openvidu-testapp/src/app/components/dialogs/publisher-properties-dialog/publisher-properties-dialog.component.ts

@@ -26,7 +26,7 @@ export class PublisherPropertiesDialogComponent {
     audioDevices = [];
     videoDevices = [];
 
-    filter: Filter = { type: 'GStreamerFilter', options: { 'command': 'videobalance saturation=0.0' } };
+    filter = { type: 'GStreamerFilter', options: { 'command': 'videobalance saturation=0.0' } };
     stringOptions = '{"command":"videobalance saturation=0.0"}';
 
     constructor(public dialogRef: MatDialogRef<PublisherPropertiesDialogComponent>,
@@ -83,7 +83,7 @@ export class PublisherPropertiesDialogComponent {
         if (!this.filter.type) {
             delete this.publisherProperties.filter;
         } else {
-            this.publisherProperties.filter = this.filter;
+            this.publisherProperties.filter = new Filter(this.filter.type, this.filter.options);
         }
         return this.publisherProperties;
     }

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

@@ -127,9 +127,9 @@
         </div>
         <div [attr.id]="'remote-vid-' + session.connection.connectionId" fxFlex="240px" class="video-container">
           <div [attr.id]="'local-vid-' + session.connection.connectionId"></div>
-          <app-video *ngIf="this.publisher" [streamManager]="this.publisher" [OV]="OV" [properties]="publisherProperties" (updateEventListInParent)="udpateEventFromChild($event)">
+          <app-video *ngIf="this.publisher" [streamManager]="this.publisher" [OV]="OV" [properties]="publisherProperties" (updateEventListInParent)="updateEventFromChild($event)">
           </app-video>
-          <app-video *ngFor="let subscriber of this.subscribers" [streamManager]="subscriber" [OV]="OV" (updateEventListInParent)="udpateEventFromChild($event)"
+          <app-video *ngFor="let subscriber of this.subscribers" [streamManager]="subscriber" [OV]="OV" (updateEventListInParent)="updateEventFromChild($event)"
             (reSubbed)="updateSubscriberFromChild($event)">
           </app-video>
         </div>

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

@@ -111,8 +111,7 @@ export class OpenviduInstanceComponent implements OnInit, OnChanges, OnDestroy {
     recordingStopped: true,
     signal: true,
     publisherStartSpeaking: false,
-    publisherStopSpeaking: false,
-    filterEventDispatched: true
+    publisherStopSpeaking: false
   };
 
   // Session properties dialog
@@ -243,7 +242,7 @@ export class OpenviduInstanceComponent implements OnInit, OnChanges, OnDestroy {
     this.subscribers = [];
   }
 
-  private updateEventList(event: string, content: string) {
+  updateEventList(event: string, content: string) {
     this.events.push({ name: event, content: content });
     this.testFeedService.pushNewEvent(this.sessionName, this.session.connection.connectionId, event, content);
   }
@@ -435,16 +434,6 @@ 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() {
@@ -609,8 +598,7 @@ export class OpenviduInstanceComponent implements OnInit, OnChanges, OnDestroy {
         recordingStopped: result.recordingStopped,
         signal: result.signal,
         publisherStartSpeaking: result.publisherStartSpeaking,
-        publisherStopSpeaking: result.publisherStopSpeaking,
-        filterEventDispatched: result.filterEventDispatched
+        publisherStopSpeaking: result.publisherStopSpeaking
       };
       document.getElementById('session-events-btn-' + this.index).classList.remove('cdk-program-focused');
     });
@@ -644,7 +632,7 @@ export class OpenviduInstanceComponent implements OnInit, OnChanges, OnDestroy {
       });
   }
 
-  udpateEventFromChild(event) {
+  updateEventFromChild(event) {
     this.updateEventList(event.event, event.content);
   }
 

openvidu-testapp/src/app/components/video/video.component.ts

@@ -624,10 +624,21 @@ export class VideoComponent implements OnInit, OnDestroy {
 
     filterConfig() {
         this.dialog.open(FilterDialogComponent, {
-            data: { session: this.streamManager.stream.session, stream: this.streamManager.stream },
+            data: {
+                session: this.streamManager.stream.session,
+                stream: this.streamManager.stream,
+                filterEventHandler: this.emitFilterEventToParent.bind(this)
+            },
             disableClose: true,
             width: '450px'
         });
     }
 
+    emitFilterEventToParent(event) {
+        this.updateEventListInParent.emit({
+            event: 'filterEvent',
+            content: event.data
+        });
+    }
+
 }