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

<div>
  <div fxLayout="row" fxLayoutGap="20px">
    <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">
              {{ enumerator }}
            </mat-option>
          </mat-select>
        </mat-form-field>
        <mat-form-field>
          <mat-select placeholder="RecordingMode" [(ngModel)]="sessionProperties.recordingMode"
            id="recording-mode-select">
            <mat-option *ngFor="let enumerator of enumToArray(recordingMode)" [value]="enumerator">
              <span [attr.id]="'option-' + enumerator">{{ enumerator }}</span>
            </mat-option>
          </mat-select>
        </mat-form-field>
        <mat-form-field>
          <mat-select placeholder="DefaultOutputMode" [(ngModel)]="sessionProperties.defaultOutputMode"
            id="output-mode-select">
            <mat-option *ngFor="let enumerator of enumToArray(defaultOutputMode)" [value]="enumerator">
              <span [attr.id]="'option-' + enumerator">{{ enumerator }}</span>
            </mat-option>
          </mat-select>
        </mat-form-field>
        <mat-form-field *ngIf="this.sessionProperties.defaultOutputMode === 'COMPOSED'">
          <mat-select placeholder="DefaultRecordingLayout" [(ngModel)]="sessionProperties.defaultRecordingLayout"
            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.defaultOutputMode === 'COMPOSED' && this.sessionProperties.defaultRecordingLayout === 'CUSTOM'">
          <input matInput placeholder="DefaultCustomLayout" type="text"
            [(ngModel)]="sessionProperties.defaultCustomLayout" id="default-custom-layout-input">
        </mat-form-field>
        <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">
            <mat-radio-button value="auto">Auto</mat-radio-button>
            <mat-radio-button value="freeice">Freeice</mat-radio-button>
            <mat-radio-button value="manual">Manual</mat-radio-button>
          </mat-radio-group>
          <div *ngIf="turnConf === 'manual'" id="manual-turn-div">
            <mat-form-field style="width: 100%">
              <input matInput placeholder="url" type="text" [(ngModel)]="manualTurnConf.urls[0]">
            </mat-form-field>
            <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: 48%; padding-left: 2px">
              <input matInput placeholder="pass" type="text" [(ngModel)]="manualTurnConf.credential">
            </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)]="tokenOptions.role">
            <mat-radio-button id="radio-btn-sub" value="SUBSCRIBER">SUB</mat-radio-button>
            <mat-radio-button id="radio-btn-pub" value="PUBLISHER">PUB</mat-radio-button>
            <mat-radio-button id="radio-btn-mod" value="MODERATOR">MOD</mat-radio-button>
          </mat-radio-group>
        </div>

        <label class="label" style="margin-bottom: 8px">Kurento config</label>
        <div id="kurento-config-div">
          <mat-form-field style="width: 39%; margin-right: 5px">
            <input matInput placeholder="Max recv" type="number"
              [(ngModel)]="tokenOptions.kurentoOptions.videoMaxRecvBandwidth">
          </mat-form-field>
          <mat-form-field style="width: 39%">
            <input matInput placeholder="Min recv" type="number"
              [(ngModel)]="tokenOptions.kurentoOptions.videoMinRecvBandwidth">
          </mat-form-field>
          <mat-form-field style="width: 39%; margin-right: 5px">
            <input matInput placeholder="Max send" type="number"
              [(ngModel)]="tokenOptions.kurentoOptions.videoMaxSendBandwidth">
          </mat-form-field>
          <mat-form-field style="width: 39%">
            <input matInput placeholder="Min send" type="number"
              [(ngModel)]="tokenOptions.kurentoOptions.videoMinSendBandwidth">
          </mat-form-field>
          <mat-chip-list *ngIf="filters.length > 0">
            <mat-chip style="height: 20px" *ngFor="let filterName of filters"
              (click)="filters.splice(filters.indexOf(filterName, 1))">{{filterName}}</mat-chip>
          </mat-chip-list>
          <mat-form-field style="width: 70%">
            <input matInput placeholder="Allowed filter" id="allowed-filter-input" type="text" [(ngModel)]="filterName">
          </mat-form-field>
          <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>
          </button>
        </div>

        <div id="record-div">
          <mat-checkbox class="checkbox-form" [(ngModel)]="tokenOptions.record" id="record-checkbox">Record</mat-checkbox>
        </div>

        <label class="label">Token</label>
        <div id="custom-token-div">
          <mat-form-field>
            <input matInput placeholder="Custom token" type="text" [(ngModel)]="customToken">
          </mat-form-field>
        </div>
      </mat-dialog-content>
    </div>
  </div>

  <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, tokenOptions: generateTokenOptions(), customToken: customToken}">SAVE</button>
  </mat-dialog-actions>
</div>