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">
                        <mat-option *ngFor="let enumerator of enumToArray(recordingMode)" [value]="enumerator">
                            {{ enumerator }}
                        </mat-option>
                    </mat-select>
                </mat-form-field>
                <mat-form-field>
                    <mat-select placeholder="DefaultRecordingLayout" [(ngModel)]="sessionProperties.defaultRecordingLayout">
                        <mat-option *ngFor="let enumerator of enumToArray(defaultRecordingLayout)" [value]="enumerator">
                            {{ enumerator }}
                        </mat-option>
                    </mat-select>
                </mat-form-field>
                <mat-form-field *ngIf="this.sessionProperties.defaultRecordingLayout === 'CUSTOM'">
                    <input matInput placeholder="DefaultCustomLayout" type="text" [(ngModel)]="sessionProperties.defaultCustomLayout">
                </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>

                <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>