openvidu-testapp: RecordingProperties refactoring

openvidu-testapp/src/app/app.module.ts

@@ -26,12 +26,13 @@ import { PublisherPropertiesDialogComponent } from './components/dialogs/publish
 import { ScenarioPropertiesDialogComponent } from './components/dialogs/scenario-properties-dialog/scenario-properties-dialog.component';
 import { FilterDialogComponent } from './components/dialogs/filter-dialog/filter-dialog.component';
 import { ShowCodecDialogComponent } from './components/dialogs/show-codec-dialog/show-codec-dialog.component';
+import { RecordingPropertiesComponent } from './components/dialogs/recording-properties/recording-properties.component';
 
 import { OpenviduRestService } from './services/openvidu-rest.service';
 import { OpenviduParamsService } from './services/openvidu-params.service';
 import { TestFeedService } from './services/test-feed.service';
 import { MuteSubscribersService } from './services/mute-subscribers.service';
-import {SessionInfoDialogComponent} from "./components/dialogs/session-info-dialog/session-info-dialog.component";
+import { SessionInfoDialogComponent } from "./components/dialogs/session-info-dialog/session-info-dialog.component";
 
 @NgModule({
   declarations: [
@@ -46,6 +47,7 @@ import {SessionInfoDialogComponent} from "./components/dialogs/session-info-dial
     SessionPropertiesDialogComponent,
     SessionApiDialogComponent,
     EventsDialogComponent,
+    RecordingPropertiesComponent,
     LocalRecordingDialogComponent,
     PublisherPropertiesDialogComponent,
     ScenarioPropertiesDialogComponent,

openvidu-testapp/src/app/components/dialogs/recording-properties/recording-properties.component.css

@@ -0,0 +1,42 @@
+.inner-text-input {
+  margin-left: 9px;
+  width: 30%;
+}
+
+#rec-properties-btn {
+  padding-left: 0;
+  padding-right: 0;
+  display: inline-block;
+}
+
+#rec-properties-div {
+  background-color: #f7f7f7;
+  margin-bottom: 10px;
+  padding: 10px 5px 0 5px;
+  border: 1px solid #00000026;
+  border-radius: 3px;
+}
+
+#rec-properties-div mat-form-field {
+  max-width: 150px;
+}
+
+#rec-properties-div mat-checkbox {
+  margin-left: 10px;
+}
+
+#recording-resolution-form {
+  max-width: 100px !important;
+}
+
+.label {
+  display: block;
+  font-size: 12px;
+  color: rgba(0, 0, 0, 0.54);
+  font-weight: 400;
+  margin-bottom: 5px;
+}
+
+mat-checkbox {
+  font-size: 14px;
+}

openvidu-testapp/src/app/components/dialogs/recording-properties/recording-properties.component.html

@@ -0,0 +1,50 @@
+<div id="rec-properties-div">
+  <label class="label">Recording properties</label>
+  <div>
+    <mat-form-field class="inner-text-input" [style.fontSize.px]=14>
+      <input matInput id="recording-name-field" placeholder="Recording name" [(ngModel)]="recordingProperties.name">
+    </mat-form-field>
+    <mat-form-field class="inner-text-input" [style.fontSize.px]=14>
+      <mat-select id="rec-outputmode-select" placeholder="Output mode" [(ngModel)]="recordingProperties.outputMode">
+        <mat-option *ngFor="let enumerator of enumToArray(recMode)" [value]="enumerator">
+          <span [attr.id]="'option-' + enumerator">{{ enumerator }}</span>
+        </mat-option>
+      </mat-select>
+    </mat-form-field>
+    <div class="inner-text-input mat-form-field">
+      <mat-checkbox id="rec-hasaudio-checkbox" [(ngModel)]="recordingProperties.hasAudio">Has audio</mat-checkbox>
+      <mat-checkbox id="rec-hasvideo-checkbox" [(ngModel)]="recordingProperties.hasVideo">Has video</mat-checkbox>
+    </div>
+  </div>
+  <div
+    *ngIf="recordingProperties.hasVideo && (recordingProperties.outputMode === 'COMPOSED' || recordingProperties.outputMode === 'COMPOSED_QUICK_START')">
+    <mat-form-field class="inner-text-input" [style.fontSize.px]=14>
+      <mat-select placeholder="Recording layout" id="recording-layout-select"
+        [(ngModel)]="recordingProperties.recordingLayout">
+        <mat-option *ngFor="let enumerator of enumToArray(recLayouts)" [value]="enumerator">
+          <span [attr.id]="'option-' + enumerator">{{ enumerator }}</span>
+        </mat-option>
+      </mat-select>
+    </mat-form-field>
+    <mat-form-field *ngIf="recordingProperties.recordingLayout === 'CUSTOM'" class="inner-text-input"
+      [style.fontSize.px]=14>
+      <input matInput placeholder="Custom layout" id="custom-layout-input" type="text" [(ngModel)]="recordingProperties.customLayout">
+    </mat-form-field>
+    <mat-form-field id="recording-resolution-form" class="inner-text-input" [style.fontSize.px]=14>
+      <input matInput id="recording-resolution-field" placeholder="Resolution" type="text"
+        [(ngModel)]="recordingProperties.resolution">
+    </mat-form-field>
+    <mat-form-field id="recording-framerate-form" class="inner-text-input" [style.fontSize.px]=14>
+      <input matInput id="recording-framerate-field" placeholder="FrameRate" type="number"
+        [(ngModel)]="recordingProperties.frameRate">
+    </mat-form-field>
+    <mat-form-field id="recording-shmsize-form" class="inner-text-input" [style.fontSize.px]=14>
+      <input matInput id="recording-shmsize-field" placeholder="Shmsize" type="number"
+        [(ngModel)]="recordingProperties.shmSize">
+    </mat-form-field>
+    <mat-form-field class="inner-text-input" [style.fontSize.px]=14>
+      <input matInput id="recording-media-node-field" placeholder="Media Node"
+        [(ngModel)]="recordingProperties.mediaNode.id">
+    </mat-form-field>
+  </div>
+</div>

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

@@ -0,0 +1,31 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { Recording, RecordingLayout, RecordingProperties } from 'openvidu-node-client';
+
+@Component({
+    selector: 'app-recording-properties',
+    templateUrl: './recording-properties.component.html',
+    styleUrls: ['./recording-properties.component.css']
+})
+export class RecordingPropertiesComponent {
+
+    recMode = Recording.OutputMode;
+    recLayouts = RecordingLayout;
+
+    getRecordingProperties: RecordingProperties;
+    @Output() recordingPropertiesChange: EventEmitter<RecordingProperties> = new EventEmitter<RecordingProperties>();
+
+    @Input()
+    get recordingProperties(): RecordingProperties {
+        return this.getRecordingProperties;
+    }
+
+    set recordingProperties(value: RecordingProperties) {
+        this.getRecordingProperties = value;
+        this.recordingPropertiesChange.emit(this.getRecordingProperties);
+    }
+
+    enumToArray(enumerator: any) {
+        return Object.keys(enumerator);
+    }
+
+}

openvidu-testapp/src/app/components/dialogs/session-api-dialog/session-api-dialog.component.css

@@ -33,29 +33,3 @@ mat-dialog-content button {
   margin-left: 9px;
   width: 30%;
 }
-
-#rec-properties-btn {
-  padding-left: 0;
-  padding-right: 0;
-  display: inline-block;
-}
-
-#rec-properties-div {
-  background-color: #f7f7f7;
-  margin-bottom: 10px;
-  padding: 10px 5px 0 5px;
-  border: 1px solid #00000026;
-  border-radius: 3px;
-}
-
-#rec-properties-div mat-form-field {
-  max-width: 150px;
-}
-
-#rec-properties-div mat-checkbox {
-  margin-left: 16px;
-}
-
-#recording-resolution-form {
-  max-width: 100px !important;
-}

openvidu-testapp/src/app/components/dialogs/session-api-dialog/session-api-dialog.component.html

@@ -42,66 +42,22 @@
     </div>
 
     <label class="label">Recordings</label>
+    <div>
       <button mat-button id="list-recording-btn" (click)="listRecordings()">List recordings</button>
       <button mat-button id="start-recording-btn" (click)="startRecording()">Start recording</button>
       <button id="rec-properties-btn" mat-icon-button style="width: 24px; height: 24px; line-height: 24px;"
         title="Recording properties" (click)="toggleRecProperties()">
-      <mat-icon style="font-size: 18px; line-height: 18px; width: 18px; height: 18px" aria-label="Recording properties">
+        <mat-icon style="font-size: 18px; line-height: 18px; width: 18px; height: 18px"
+          aria-label="Recording properties">
           {{recPropertiesIcon}}</mat-icon>
       </button>
-    <div *ngIf="showRecProperties" id="rec-properties-div">
+      <app-recording-properties *ngIf="showRecProperties" [(recordingProperties)]="recordingProperties">
-      <div>
+      </app-recording-properties>
-        <mat-form-field class="inner-text-input" [style.fontSize.px]=14>
-          <input matInput id="recording-media-node-field" placeholder="Media Node"
-            [(ngModel)]="recordingProperties.mediaNode.id">
-        </mat-form-field>
-        <mat-form-field class="inner-text-input" [style.fontSize.px]=14>
-          <input matInput id="recording-name-field" placeholder="Recording name" [(ngModel)]="recordingProperties.name">
-        </mat-form-field>
-        <mat-form-field class="inner-text-input" [style.fontSize.px]=14>
-          <mat-select id="rec-outputmode-select" placeholder="Output mode" [(ngModel)]="recordingProperties.outputMode">
-            <mat-option *ngFor="let enumerator of enumToArray(recMode)" [value]="enumerator">
-              <span [attr.id]="'option-' + enumerator">{{ enumerator }}</span>
-            </mat-option>
-          </mat-select>
-        </mat-form-field>
-      </div>
-      <div
-        *ngIf="recordingProperties.hasVideo && (recordingProperties.outputMode === 'COMPOSED' || recordingProperties.outputMode === 'COMPOSED_QUICK_START')"
-        id="rec-layout-div">
-        <mat-form-field class="inner-text-input" [style.fontSize.px]=14>
-          <mat-select placeholder="Recording layout" [(ngModel)]="recordingProperties.recordingLayout">
-            <mat-option *ngFor="let enumerator of enumToArray(recLayouts)" [value]="enumerator">
-              {{ enumerator }}
-            </mat-option>
-          </mat-select>
-        </mat-form-field>
-        <mat-form-field *ngIf="recordingProperties.hasVideo && recordingProperties.recordingLayout === 'CUSTOM'"
-          class="inner-text-input" [style.fontSize.px]=14>
-          <input matInput placeholder="Custom layout" type="text" [(ngModel)]="recordingProperties.customLayout">
-        </mat-form-field>
     </div>
     <div>
-        <mat-checkbox id="rec-hasaudio-checkbox" [(ngModel)]="recordingProperties.hasAudio">Has audio</mat-checkbox>
-        <mat-checkbox id="rec-hasvideo-checkbox" [(ngModel)]="recordingProperties.hasVideo">Has video</mat-checkbox>
-        <mat-form-field
-          *ngIf="recordingProperties.hasVideo && (recordingProperties.outputMode === 'COMPOSED' || recordingProperties.outputMode === 'COMPOSED_QUICK_START')"
-          id="recording-resolution-form" class="inner-text-input" [style.fontSize.px]=14>
-          <input matInput id="recording-resolution-field" placeholder="Resolution" type="text"
-            [(ngModel)]="recordingProperties.resolution">
-        </mat-form-field>
-        <mat-form-field
-          *ngIf="recordingProperties.hasVideo && (recordingProperties.outputMode === 'COMPOSED' || recordingProperties.outputMode === 'COMPOSED_QUICK_START')"
-          id="recording-framerate-form" class="inner-text-input" [style.fontSize.px]=14>
-          <input matInput id="recording-framerate-field" placeholder="FrameRate" type="number"
-            [(ngModel)]="recordingProperties.frameRate">
-        </mat-form-field>
-      </div>
-    </div>
       <mat-form-field class="inner-text-input" [style.fontSize.px]=14>
         <input matInput id="recording-id-field" placeholder="recordingId" [(ngModel)]="recordingId">
       </mat-form-field>
-    <div>
       <button mat-button id="stop-recording-btn" (click)="stopRecording()" [disabled]="!recordingId">Stop
         recording</button>
       <button mat-button id="get-recording-btn" (click)="getRecording()" [disabled]="!recordingId">Get

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

@@ -1,7 +1,7 @@
 import { Component, Inject } from '@angular/core';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
 
-import { OpenVidu as OpenViduAPI, Session as SessionAPI, Recording, RecordingProperties, RecordingLayout, ConnectionProperties, OpenViduRole } from 'openvidu-node-client';
+import { OpenVidu as OpenViduAPI, Session as SessionAPI, RecordingProperties, ConnectionProperties, OpenViduRole } from 'openvidu-node-client';
 
 @Component({
     selector: 'app-session-api-dialog',
@@ -19,8 +19,6 @@ export class SessionApiDialogComponent {
     response: string;
 
     recordingProperties: RecordingProperties;
-    recMode = Recording.OutputMode;
-    recLayouts = RecordingLayout;
     openviduRoles = OpenViduRole;
     customLayout = '';
     recPropertiesIcon = 'add_circle';

openvidu-testapp/src/app/components/dialogs/session-properties-dialog/session-properties-dialog.component.css

@@ -38,10 +38,15 @@ mat-radio-button:first-child {
   padding-bottom: 15px;
 }
 
-#allow-transcoding-div {
+#allow-transcoding-checkbox-div {
+  margin-top: 20px;
   margin-bottom: 10px;
 }
 
 #record-div {
   padding-bottom: 20px;
 }
+
+mat-form-field {
+  margin-right: 9px;
+}

openvidu-testapp/src/app/components/dialogs/session-properties-dialog/session-properties-dialog.component.html

@@ -1,8 +1,9 @@
-<div>
+<mat-dialog-content>
-  <div fxLayout="row" fxLayoutGap="20px">
+
+  <div fxLayout="row" fxLayoutGap="20px" fxLayoutAlign="space-between">
+
     <div>
       <h2 mat-dialog-title>Session properties</h2>
-      <mat-dialog-content>
       <mat-form-field>
         <mat-select placeholder="MediaMode" [(ngModel)]="sessionProperties.mediaMode">
           <mat-option *ngFor="let enumerator of enumToArray(mediaMode)" [value]="enumerator">
@@ -18,28 +19,11 @@
           </mat-option>
         </mat-select>
       </mat-form-field>
-        <mat-form-field>
+
-          <mat-select placeholder="DefaultOutputMode" [(ngModel)]="sessionProperties.defaultRecordingProperties.outputMode"
+      <app-recording-properties [(recordingProperties)]="sessionProperties.defaultRecordingProperties">
-            id="output-mode-select">
+      </app-recording-properties>
-            <mat-option *ngFor="let enumerator of enumToArray(defaultOutputMode)" [value]="enumerator">
+
-              <span [attr.id]="'option-' + enumerator">{{ enumerator }}</span>
+      <div id="allow-transcoding-checkbox-div">
-            </mat-option>
-          </mat-select>
-        </mat-form-field>
-        <mat-form-field *ngIf="this.sessionProperties.defaultRecordingProperties.outputMode === 'COMPOSED'">
-          <mat-select placeholder="DefaultRecordingLayout" [(ngModel)]="sessionProperties.defaultRecordingProperties.recordingLayout"
-            id="recording-layout-select">
-            <mat-option *ngFor="let enumerator of enumToArray(defaultRecordingLayout)" [value]="enumerator">
-              <span [attr.id]="'option-' + enumerator">{{ enumerator }}</span>
-            </mat-option>
-          </mat-select>
-        </mat-form-field>
-        <mat-form-field
-          *ngIf="this.sessionProperties.defaultRecordingProperties.outputMode === 'COMPOSED' && this.sessionProperties.defaultRecordingProperties.recordingLayout === 'CUSTOM'">
-          <input matInput placeholder="DefaultCustomLayout" type="text"
-            [(ngModel)]="sessionProperties.defaultRecordingProperties.customLayout" id="default-custom-layout-input">
-        </mat-form-field>
-        <div id="allow-transcoding-div">
         <mat-checkbox class="checkbox-form" [(ngModel)]="sessionProperties.allowTranscoding"
           id="allow-transcoding-checkbox">Allow Transcoding</mat-checkbox>
       </div>
@@ -54,6 +38,7 @@
       <mat-form-field>
         <input matInput placeholder="CustomSessionId" type="text" [(ngModel)]="sessionProperties.customSessionId">
       </mat-form-field>
+
       <label class="label">Turn configuration</label>
       <div id="turn-div">
         <mat-radio-group name="Turn configuration" [(ngModel)]="turnConf">
@@ -73,11 +58,12 @@
           </mat-form-field>
         </div>
       </div>
-      </mat-dialog-content>
+
     </div>
+
     <div>
       <h2 mat-dialog-title>User configuration</h2>
-      <mat-dialog-content>
+
       <label class="label">Role</label>
       <div id="role-div">
         <mat-radio-group name="Role" [(ngModel)]="connectionProperties.role">
@@ -115,7 +101,8 @@
         <button id="add-allowed-filter-btn" mat-icon-button style="width: 24px; height: 24px; line-height: 24px;"
           title="Add allowed filter" (click)="filters.push(filterName); filterName = '';">
           <mat-icon style="font-size: 18px; line-height: 18px; width: 18px; height: 18px"
-              aria-label="Add allowed filter">add_circle</mat-icon>
+            aria-label="Add allowed filter">
+            add_circle</mat-icon>
         </button>
       </div>
 
@@ -137,13 +124,13 @@
         </mat-checkbox>
       </div>
 
-      </mat-dialog-content>
-    </div>
     </div>
 
-  <mat-dialog-actions>
+  </div>
+</mat-dialog-content>
+
+<mat-dialog-actions>
   <button id="cancel-btn" mat-button [mat-dialog-close]="undefined">CANCEL</button>
   <button id="save-btn" mat-button
     [mat-dialog-close]="{sessionProperties: sessionProperties, turnConf: turnConf, manualTurnConf: manualTurnConf, customToken: customToken, forcePublishing: forcePublishing, connectionProperties: generateConnectionProperties()}">SAVE</button>
-  </mat-dialog-actions>
+</mat-dialog-actions>
-</div>

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

@@ -93,9 +93,18 @@ export class OpenviduInstanceComponent implements OnInit, OnChanges, OnDestroy {
     mediaMode: MediaMode.ROUTED,
     recordingMode: RecordingMode.MANUAL,
     defaultRecordingProperties: {
+      name: '',
+      hasAudio: true,
+      hasVideo: true,
       outputMode: Recording.OutputMode.COMPOSED,
       recordingLayout: RecordingLayout.BEST_FIT,
-      customLayout: ''
+      resolution: '1280x720',
+      frameRate: 25,
+      shmSize: 536870912,
+      customLayout: '',
+      mediaNode: {
+        id: ''
+      }
     },
     customSessionId: '',
     forcedVideoCodec: null,
@@ -600,8 +609,7 @@ export class OpenviduInstanceComponent implements OnInit, OnChanges, OnDestroy {
         customToken: this.customToken,
         forcePublishing: this.forcePublishing,
         connectionProperties: this.connectionProperties,
-      },
+      }
-      width: '450px'
     });
 
     dialogRef.afterClosed().subscribe(result => {
@@ -626,22 +634,8 @@ export class OpenviduInstanceComponent implements OnInit, OnChanges, OnDestroy {
         openVidu: !!this.OV_NodeClient ? this.OV_NodeClient : new OpenViduAPI(this.openviduUrl, this.openviduSecret),
         session: this.sessionAPI,
         sessionId: !!this.session ? this.session.sessionId : this.sessionName,
-        recordingProperties: !!this.recordingProperties ? this.recordingProperties :
+        recordingProperties: !!this.recordingProperties ? this.recordingProperties : this.sessionProperties.defaultRecordingProperties
-          {
-            name: '',
-            outputMode: this.sessionProperties.defaultRecordingProperties.outputMode,
-            recordingLayout: this.sessionProperties.defaultRecordingProperties.recordingLayout,
-            customLayout: this.sessionProperties.defaultRecordingProperties.customLayout,
-            resolution: '1280x720',
-            frameRate: 25,
-            hasAudio: true,
-            hasVideo: true,
-            mediaNode: {
-              id: ''
-            }
-          }
       },
-      width: '425px',
       disableClose: true
     });