ambiser
/
openvidu
mirror of https://github.com/OpenVidu/openvidu.git
8
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

openvidu-testapp: Angular Material breaking change fix (md to mat)

pull/20/head
pabloFuente 2017-10-16 17:16:14 +02:00
parent 67f03fbd9a
commit 4b604f107c
11 changed files with 140 additions and 139 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
openvidu-testapp/src/app/app.component.css
View File

@ -12,7 +12,7 @@ main {
font-weight: inherit; font-weight: inherit;
} }
md-toolbar a { mat-toolbar a {
padding: 0 10px 0 10px; padding: 0 10px 0 10px;
font-weight: bold; font-weight: bold;
} }

24
openvidu-testapp/src/app/app.component.html
View File

@ -1,18 +1,18 @@
<md-sidenav-container fullscreen> <mat-sidenav-container fullscreen>
<md-toolbar class="mat-elevation-z5" color="primary"> <mat-toolbar class="mat-elevation-z5" color="primary">
<div layout-align='center center' layout='column'> <div layout-align='center center' layout='column'>
<a id="nav-logo" routerLink="/"><img id="nav-img" src="assets/images/openvidu_vert_white_bg_trans_cropped.png"/> TestApp</a> <a id="nav-logo" routerLink="/"><img id="nav-img" src="assets/images/openvidu_vert_white_bg_trans_cropped.png"/> TestApp</a>
<a md-button routerLink="/test-sessions"><span>SESSIONS</span></a> <a mat-button routerLink="/test-sessions"><span>SESSIONS</span></a>
<a md-button routerLink="/test-apirest"><span>API REST</span></a> <a mat-button routerLink="/test-apirest"><span>API REST</span></a>
</div> </div>
</md-toolbar> </mat-toolbar>
<main> <main>
<md-form-field> <mat-form-field>
<input id="openvidu-url" mdInput placeholder="OpenVidu Server URL" [ngModel]="openviduURL" (ngModelChange)="updateUrl($event)"> <input id="openvidu-url" matInput placeholder="OpenVidu Server URL" [ngModel]="openviduURL" (ngModelChange)="updateUrl($event)">
</md-form-field> </mat-form-field>
<md-form-field> <mat-form-field>
<input id="openvidu-secret" mdInput placeholder="OpenVidu Server Secret" [ngModel]="openviduSecret" (ngModelChange)="updateSecret($event)"> <input id="openvidu-secret" matInput placeholder="OpenVidu Server Secret" [ngModel]="openviduSecret" (ngModelChange)="updateSecret($event)">
</md-form-field> </mat-form-field>
<router-outlet></router-outlet> <router-outlet></router-outlet>
</main> </main>
</md-sidenav-container> </mat-sidenav-container>

68
openvidu-testapp/src/app/app.material.module.ts
View File

@ -1,45 +1,45 @@
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { import {
MdButtonModule, MatButtonModule,
MdIconModule, MatIconModule,
MdCheckboxModule, MatCheckboxModule,
MdCardModule, MatCardModule,
MdInputModule, MatInputModule,
MdProgressSpinnerModule, MatProgressSpinnerModule,
MdTooltipModule, MatTooltipModule,
MdDialogModule, MatDialogModule,
MdToolbarModule, MatToolbarModule,
MdTabsModule, MatTabsModule,
MdTableModule, MatTableModule,
MdListModule, MatListModule,
MdRadioModule, MatRadioModule,
MdSelectModule, MatSelectModule,
MdChipsModule, MatChipsModule,
MdExpansionModule, MatExpansionModule,
MdSlideToggleModule MatSlideToggleModule
} from '@angular/material'; } from '@angular/material';
@NgModule({ @NgModule({
exports: [ exports: [
BrowserAnimationsModule, BrowserAnimationsModule,
MdButtonModule, MatButtonModule,
MdIconModule, MatIconModule,
MdCheckboxModule, MatCheckboxModule,
MdCardModule, MatCardModule,
MdInputModule, MatInputModule,
MdProgressSpinnerModule, MatProgressSpinnerModule,
MdTooltipModule, MatTooltipModule,
MdDialogModule, MatDialogModule,
MdToolbarModule, MatToolbarModule,
MdTabsModule, MatTabsModule,
MdTableModule, MatTableModule,
MdListModule, MatListModule,
MdRadioModule, MatRadioModule,
MdSelectModule, MatSelectModule,
MdChipsModule, MatChipsModule,
MdExpansionModule, MatExpansionModule,
MdSlideToggleModule MatSlideToggleModule
], ],
}) })
export class AppMaterialModule { } export class AppMaterialModule { }

18
openvidu-testapp/src/app/components/openvidu-instance/extension-dialog.component.ts
View File

@ -1,19 +1,19 @@
import { Component, Inject } from '@angular/core'; import { Component, Inject } from '@angular/core';
import { MdDialog, MD_DIALOG_DATA, MdDialogConfig } from '@angular/material'; import { MatDialog, MAT_DIALOG_DATA, MatDialogConfig } from '@angular/material';
@Component({ @Component({
selector: 'app-extension-dialog', selector: 'app-extension-dialog',
template: ` template: `
<div *ngIf="installView"> <div *ngIf="installView">
<h2 md-dialog-title>Install extension</h2> <h2 mat-dialog-title>Install extension</h2>
<md-dialog-content>An extension is needed to share your screen!</md-dialog-content> <mat-dialog-content>An extension is needed to share your screen!</mat-dialog-content>
<md-dialog-actions> <mat-dialog-actions>
<button md-button md-dialog-close>CANCEL</button> <button mat-button mat-dialog-close>CANCEL</button>
<button md-button (click)="goToExtension()">INSTALL</button> <button mat-button (click)="goToExtension()">INSTALL</button>
</md-dialog-actions> </mat-dialog-actions>
</div> </div>
<div *ngIf="!installView" style="text-align: center"> <div *ngIf="!installView" style="text-align: center">
<button md-button (click)="reloadPage()">RELOAD PAGE<br>AFTER INSTALLED</button> <button mat-button (click)="reloadPage()">RELOAD PAGE<br>AFTER INSTALLED</button>
</div> </div>
` `
}) })
@ -21,7 +21,7 @@ export class ExtensionDialogComponent {
installView = true; installView = true;
constructor(public dialog: MdDialog, @Inject(MD_DIALOG_DATA) public data: any) { } constructor(public dialog: MatDialog, @Inject(MAT_DIALOG_DATA) public data: any) { }
goToExtension() { goToExtension() {
window.open(this.data.url, '_blank'); window.open(this.data.url, '_blank');

20
openvidu-testapp/src/app/components/openvidu-instance/openvidu-instance.component.css
View File

@ -5,19 +5,19 @@
border-radius: 2px; border-radius: 2px;
} }
md-card { mat-card {
background-color: #ffffff; background-color: #ffffff;
margin: 0; margin: 0;
padding: 20px; padding: 20px;
padding-top: 10px; padding-top: 10px;
} }
md-card.session-card { mat-card.session-card {
padding: 15px; padding: 15px;
margin-left: 10px; margin-left: 10px;
} }
.session-form md-form-field { .session-form mat-form-field {
width: 130px; width: 130px;
} }
@ -25,7 +25,7 @@ md-card.session-card {
width: fit-content; width: fit-content;
} }
.join-card md-card-content { .join-card mat-card-content {
margin-bottom: 0; margin-bottom: 0;
} }
@ -52,7 +52,7 @@ md-card.session-card {
margin-right: 8px; margin-right: 8px;
} }
md-radio-button { mat-radio-button {
margin-bottom: 8px; margin-bottom: 8px;
} }
@ -98,7 +98,7 @@ md-radio-button {
overflow-x: hidden; overflow-x: hidden;
} }
md-chip { mat-chip {
line-height: 6px; line-height: 6px;
font-size: 9.5px; font-size: 9.5px;
padding: 6px 9px !important; padding: 6px 9px !important;
@ -123,20 +123,20 @@ md-chip {
background-color: #797979; background-color: #797979;
} }
md-expansion-panel { mat-expansion-panel {
background: #e0e0e0 !important; background: #e0e0e0 !important;
margin-right: 0 !important; margin-right: 0 !important;
} }
md-expansion-panel-header { mat-expansion-panel-header {
font-size: 10.5px !important; font-size: 10.5px !important;
padding: 0 7px 0 9px !important; padding: 0 7px 0 9px !important;
} }
.secure-div md-checkbox { .secure-div mat-checkbox {
padding-right: 10px; padding-right: 10px;
} }
.secure-div md-form-field { .secure-div mat-form-field {
max-width: 80px; max-width: 80px;
} }

94
openvidu-testapp/src/app/components/openvidu-instance/openvidu-instance.component.html
View File

@ -1,37 +1,37 @@
<div class="div-wrapper"> <div class="div-wrapper">
<div> <div>
<md-card class="join-card"> <mat-card class="join-card">
<md-card-content> <mat-card-content>
<form class="session-form"> <form class="session-form">
<div class="secure-div"> <div class="secure-div">
<md-checkbox class="secure-session-checkbox" [disabled]="session" [(ngModel)]="secureSession" name="secureSession">SECURE</md-checkbox> <mat-checkbox class="secure-session-checkbox" [disabled]="session" [(ngModel)]="secureSession" name="secureSession">SECURE</mat-checkbox>
<md-form-field style="margin-right: 10px"> <mat-form-field style="margin-right: 10px">
<input class="sessionIdInput" mdInput placeholder="SESSIONID" name="sessionIdInput" [(ngModel)]="sessionIdInput" [disabled]="!secureSession"> <input class="sessionIdInput" matInput placeholder="SESSIONID" name="sessionIdInput" [(ngModel)]="sessionIdInput" [disabled]="!secureSession">
</md-form-field> </mat-form-field>
<md-form-field> <mat-form-field>
<input class="tokenInput" mdInput placeholder="TOKEN" name="tokenInput" [(ngModel)]="tokenInput" [disabled]="!secureSession"> <input class="tokenInput" matInput placeholder="TOKEN" name="tokenInput" [(ngModel)]="tokenInput" [disabled]="!secureSession">
</md-form-field> </mat-form-field>
</div> </div>
<div> <div>
<md-form-field style="margin-right: 10px"> <mat-form-field style="margin-right: 10px">
<input mdInput placeholder="Session name" name="sessionName" [(ngModel)]="sessionName" [disabled]="session"> <input matInput placeholder="Session name" name="sessionName" [(ngModel)]="sessionName" [disabled]="session">
</md-form-field> </mat-form-field>
<md-form-field> <mat-form-field>
<input mdInput placeholder="Client data" name="clientData" [(ngModel)]="clientData" [disabled]="session"> <input matInput placeholder="Client data" name="clientData" [(ngModel)]="clientData" [disabled]="session">
</md-form-field> </mat-form-field>
</div> </div>
<div> <div>
<button class="join-btn" md-button (click)="joinSession()" [disabled]="session">JOIN</button> <button class="join-btn" mat-button (click)="joinSession()" [disabled]="session">JOIN</button>
<md-checkbox class="subscribe-checkbox" name="subscribeTo" (change)="toggleSubscribeTo()" [checked]="subscribeTo && checkSubscribeTo" <mat-checkbox class="subscribe-checkbox" name="subscribeTo" (change)="toggleSubscribeTo()" [checked]="subscribeTo && checkSubscribeTo"
[disabled]="session">Subscribe</md-checkbox> [disabled]="session">Subscribe</mat-checkbox>
<md-checkbox class="publish-checkbox" name="publishTo" (change)="togglePublishTo()" [checked]="publishTo && checkPublishTo" <mat-checkbox class="publish-checkbox" name="publishTo" (change)="togglePublishTo()" [checked]="publishTo && checkPublishTo"
[disabled]="session || disablePublishTo">Publish</md-checkbox> [disabled]="session || disablePublishTo">Publish</mat-checkbox>
</div> </div>
<div class="inner-card" fxLayout="row" fxLayoutAlign="start start"> <div class="inner-card" fxLayout="row" fxLayoutAlign="start start">
@ -40,59 +40,59 @@
<div> <div>
<h4>Send</h4> <h4>Send</h4>
<div> <div>
<md-checkbox class="send-audio-checkbox" name="sendAudio" (change)="toggleSendAudio()" [checked]="sendAudio && checkSendAudio" <mat-checkbox class="send-audio-checkbox" name="sendAudio" (change)="toggleSendAudio()" [checked]="sendAudio && checkSendAudio"
[disabled]="session || disableSendAudio">Audio</md-checkbox> [disabled]="session || disableSendAudio">Audio</mat-checkbox>
<md-checkbox class="send-video-checkbox" name="sendVideo" (change)="toggleSendVideo()" [checked]="sendVideo && checkSendVideo" <mat-checkbox class="send-video-checkbox" name="sendVideo" (change)="toggleSendVideo()" [checked]="sendVideo && checkSendVideo"
[disabled]="session || disableSendVideo">Video</md-checkbox> [disabled]="session || disableSendVideo">Video</mat-checkbox>
</div> </div>
</div> </div>
<div style="padding-top: 5px;"> <div style="padding-top: 5px;">
<h4>Enter active</h4> <h4>Enter active</h4>
<div> <div>
<md-checkbox class="active-audio-checkbox" name="activeAudio" (change)="toggleActiveAudio()" [checked]="activeAudio && checkActiveAudio" <mat-checkbox class="active-audio-checkbox" name="activeAudio" (change)="toggleActiveAudio()" [checked]="activeAudio && checkActiveAudio"
[disabled]="session || disableActiveAudio">Audio</md-checkbox> [disabled]="session || disableActiveAudio">Audio</mat-checkbox>
<md-checkbox class="active-video-checkbox" name="activeVideo" (change)="toggleActiveVideo()" [checked]="activeVideo && checkActiveVideo" <mat-checkbox class="active-video-checkbox" name="activeVideo" (change)="toggleActiveVideo()" [checked]="activeVideo && checkActiveVideo"
[disabled]="session || disableActiveVideo">Video</md-checkbox> [disabled]="session || disableActiveVideo">Video</mat-checkbox>
</div> </div>
</div> </div>
</div> </div>
<div fxFlex="40"> <div fxFlex="40">
<md-radio-group [(ngModel)]="optionsVideo" [disabled]="session || disableRadioButtons" [ngModelOptions]="{standalone: true}"> <mat-radio-group [(ngModel)]="optionsVideo" [disabled]="session || disableRadioButtons" [ngModelOptions]="{standalone: true}">
<div> <div>
<md-radio-button class="video-radio" value="video" [checked]="checkRadioVideo && optionsVideo==='video'">Video</md-radio-button> <mat-radio-button class="video-radio" value="video" [checked]="checkRadioVideo && optionsVideo==='video'">Video</mat-radio-button>
</div> </div>
<div> <div>
<md-radio-button class="screen-radio" value="screen" [checked]="checkRadioScreen && optionsVideo==='screen'">Screen</md-radio-button> <mat-radio-button class="screen-radio" value="screen" [checked]="checkRadioScreen && optionsVideo==='screen'">Screen</mat-radio-button>
</div> </div>
</md-radio-group> </mat-radio-group>
<md-checkbox class="subscribe-remote-check" name="subscribeToRemote" (change)="subscribeToRemote = !subscribeToRemote" [disabled]="(!sendAudio && !sendVideo) || !publishTo || session" <mat-checkbox class="subscribe-remote-check" name="subscribeToRemote" (change)="subscribeToRemote = !subscribeToRemote" [disabled]="(!sendAudio && !sendVideo) || !publishTo || session"
[checked]="(sendAudio || sendVideo) && publishTo && subscribeToRemote">Subscribe [checked]="(sendAudio || sendVideo) && publishTo && subscribeToRemote">Subscribe
<br>to remote</md-checkbox> <br>to remote</mat-checkbox>
</div> </div>
</div> </div>
</form> </form>
</md-card-content> </mat-card-content>
</md-card> </mat-card>
</div> </div>
<div *ngIf="session"> <div *ngIf="session">
<md-card class="session-card"> <mat-card class="session-card">
<div class="session-card-header"> <div class="session-card-header">
<div class="session-card-inner"> <div class="session-card-inner">
<div class="session-title">{{sessionName}}</div> <div class="session-title">{{sessionName}}</div>
<div class="session-actions"> <div class="session-actions">
<button class="video-btn" *ngIf="publishTo && sendVideo" (click)="toggleVideo()"> <button class="video-btn" *ngIf="publishTo && sendVideo" (click)="toggleVideo()">
<md-icon aria-label="Mute video button">{{videoIcon}}</md-icon> <mat-icon aria-label="Mute video button">{{videoIcon}}</mat-icon>
</button> </button>
<button class="audio-btn" *ngIf="publishTo && sendAudio" (click)="toggleAudio()"> <button class="audio-btn" *ngIf="publishTo && sendAudio" (click)="toggleAudio()">
<md-icon aria-label="Mute audio button">{{audioIcon}}</md-icon> <mat-icon aria-label="Mute audio button">{{audioIcon}}</mat-icon>
</button> </button>
<button class="leave-btn" (click)="leaveSession()"> <button class="leave-btn" (click)="leaveSession()">
<md-icon aria-label="Leave button">clear</md-icon> <mat-icon aria-label="Leave button">clear</mat-icon>
</button> </button>
</div> </div>
</div> </div>
@ -101,22 +101,22 @@
<div fxFlex="135px" class="video-container"> <div fxFlex="135px" class="video-container">
<div class="event-list-div scroll-custom"> <div class="event-list-div scroll-custom">
<md-accordion [attr.id]="'events-' + session.connection.connectionId" class="event-list"> <mat-accordion [attr.id]="'events-' + session.connection.connectionId" class="event-list">
<md-expansion-panel *ngFor="let event of events" class="event-item"> <mat-expansion-panel *ngFor="let event of events" class="event-item">
<md-expansion-panel-header [attr.id]="event.name + '-' + session.connection.connectionId" [collapsedHeight]="'20px'" [expandedHeight]="'20px'" <mat-expansion-panel-header [attr.id]="event.name + '-' + session.connection.connectionId" [collapsedHeight]="'20px'" [expandedHeight]="'20px'"
class="event-name"> class="event-name">
{{event.name}} {{event.name}}
</md-expansion-panel-header> </mat-expansion-panel-header>
<div class="event-content">{{event.content}}</div> <div class="event-content">{{event.content}}</div>
</md-expansion-panel> </mat-expansion-panel>
</md-accordion> </mat-accordion>
</div> </div>
</div> </div>
<div [attr.id]="'remote-vid-' + session.connection.connectionId" fxFlex="270px" class="video-container"> <div [attr.id]="'remote-vid-' + session.connection.connectionId" fxFlex="270px" class="video-container">
<div [attr.id]="'local-vid-' + session.connection.connectionId"></div> <div [attr.id]="'local-vid-' + session.connection.connectionId"></div>
</div> </div>
</div> </div>
</md-card> </mat-card>
</div> </div>
</div> </div>

4
openvidu-testapp/src/app/components/openvidu-instance/openvidu-instance.component.ts
View File

@ -3,7 +3,7 @@ import {
OnInit, OnDestroy, OnChanges OnInit, OnDestroy, OnChanges
} from '@angular/core'; } from '@angular/core';
import { OpenVidu, Session, Subscriber, Publisher, Stream } from 'openvidu-browser'; import { OpenVidu, Session, Subscriber, Publisher, Stream } from 'openvidu-browser';
import { MdDialog, MdDialogRef } from '@angular/material'; import { MatDialog } from '@angular/material';
import { ExtensionDialogComponent } from './extension-dialog.component'; import { ExtensionDialogComponent } from './extension-dialog.component';
import { TestFeedService } from '../../services/test-feed.service'; import { TestFeedService } from '../../services/test-feed.service';
@ -88,7 +88,7 @@ export class OpenviduInstanceComponent implements OnInit, OnChanges, OnDestroy {
openviduError: any; openviduError: any;
constructor(private changeDetector: ChangeDetectorRef, constructor(private changeDetector: ChangeDetectorRef,
private extensionDialog: MdDialog, private extensionDialog: MatDialog,
private testFeedService: TestFeedService) { private testFeedService: TestFeedService) {
this.generateSessionInfo(); this.generateSessionInfo();
} }

28
openvidu-testapp/src/app/components/test-apirest/test-apirest.component.html
View File

@ -1,13 +1,13 @@
<div> <div>
<div fxLayout="row" fxLayoutGap="20px" fxLayoutAlign="start space-around"> <div fxLayout="row" fxLayoutGap="20px" fxLayoutAlign="start space-around">
<div fxLayout="column" fxFlex="45" fxFlexAlign="center" fxFill> <div fxLayout="column" fxFlex="45" fxFlexAlign="center" fxFill>
<button md-raised-button color="primary" (click)="getSessionId()">GET SESSIONID</button> <button mat-raised-button color="primary" (click)="getSessionId()">GET SESSIONID</button>
</div> </div>
<div fxLayout="column" fxFlex="45" fxFlexAlign="center" fxFill> <div fxLayout="column" fxFlex="45" fxFlexAlign="center" fxFill>
<button md-raised-button color="primary" (click)="getToken()" [disabled]="getTokenDisabled()">GET TOKEN</button> <button mat-raised-button color="primary" (click)="getToken()" [disabled]="getTokenDisabled()">GET TOKEN</button>
</div> </div>
<div fxLayout="column" fxFlex="10" fxFlexAlign="center" fxFill> <div fxLayout="column" fxFlex="10" fxFlexAlign="center" fxFill>
<button md-raised-button color="warn" (click)="cleanAllSessions()" [disabled]="data.length == 0">CLEAN</button> <button mat-raised-button color="warn" (click)="cleanAllSessions()" [disabled]="data.length == 0">CLEAN</button>
</div> </div>
</div> </div>
@ -21,15 +21,15 @@
</tr> </tr>
<tr *ngFor="let sid of this.data; let ind = index"> <tr *ngFor="let sid of this.data; let ind = index">
<td class="first-col"> <td class="first-col">
<md-card [style.background]="getBackgroundColor(ind)">{{sid[0]}}</md-card> <mat-card [style.background]="getBackgroundColor(ind)">{{sid[0]}}</mat-card>
</td> </td>
<td> <td>
<md-card *ngIf="sid[1].length > 0" [style.background]="getBackgroundColor(ind)"> <mat-card *ngIf="sid[1].length > 0" [style.background]="getBackgroundColor(ind)">
<p *ngFor="let token of sid[1]">{{token}}</p> <p *ngFor="let token of sid[1]">{{token}}</p>
</md-card> </mat-card>
</td> </td>
<td style="text-align: center"> <td style="text-align: center">
<md-radio-button [checked]="selectedRadioIndex === ind" (click)="selectedRadioIndex = ind" name="sidOption"></md-radio-button> <mat-radio-button [checked]="selectedRadioIndex === ind" (click)="selectedRadioIndex = ind" name="sidOption"></mat-radio-button>
</td> </td>
</tr> </tr>
</table> </table>
@ -42,16 +42,16 @@
</tr> </tr>
<tr id="tr-token-options" *ngIf="data.length > 0"> <tr id="tr-token-options" *ngIf="data.length > 0">
<td> <td>
<md-select placeholder="OpenVidu Role" [(ngModel)]="selectedRole"> <mat-select placeholder="OpenVidu Role" [(ngModel)]="selectedRole">
<md-option *ngFor="let role of openViduRoles" [value]="role"> <mat-option *ngFor="let role of openViduRoles" [value]="role">
{{ role }} {{ role }}
</md-option> </mat-option>
</md-select> </mat-select>
</td> </td>
<td> <td>
<md-form-field id="server-data-field"> <mat-form-field id="server-data-field">
<input mdInput placeholder="Server Data" [(ngModel)]="serverData"> <input matInput placeholder="Server Data" [(ngModel)]="serverData">
</md-form-field> </mat-form-field>
</td> </td>
</tr> </tr>
</table> </table>

2
openvidu-testapp/src/app/components/test-sessions/test-sessions.component.css
View File

@ -20,7 +20,7 @@ app-openvidu-instance {
display: inline-block; display: inline-block;
} }
md-form-field { mat-form-field {
width: 30px; width: 30px;
} }

18
openvidu-testapp/src/app/components/test-sessions/test-sessions.component.html
View File

@ -1,17 +1,17 @@
<div> <div>
<div class="top-div"> <div class="top-div">
<div class="controls-div"> <div class="controls-div">
<button id="add-user-btn" md-raised-button color="primary" (click)="addUser()">ADD USER</button> <button id="add-user-btn" mat-raised-button color="primary" (click)="addUser()">ADD USER</button>
<button id="remove-user-btn" md-raised-button color="primary" (click)="removeUser()" [disabled]="!users.length">REMOVE USER</button> <button id="remove-user-btn" mat-raised-button color="primary" (click)="removeUser()" [disabled]="!users.length">REMOVE USER</button>
<button id="remove-all-users-btn" md-raised-button color="primary" (click)="removeAllUsers()" [disabled]="!users.length">REMOVE ALL</button> <button id="remove-all-users-btn" mat-raised-button color="primary" (click)="removeAllUsers()" [disabled]="!users.length">REMOVE ALL</button>
</div> </div>
<div class="scenario-div"> <div class="scenario-div">
<md-checkbox id="auto-join-checkbox" class="auto-join-check" [(ngModel)]="autoJoin" name="autoJoin">Auto join</md-checkbox> <mat-checkbox id="auto-join-checkbox" class="auto-join-check" [(ngModel)]="autoJoin" name="autoJoin">Auto join</mat-checkbox>
<button id="one2one-btn" md-raised-button color="primary" (click)="loadScenario(2,0,0)">1:1</button> <button id="one2one-btn" mat-raised-button color="primary" (click)="loadScenario(2,0,0)">1:1</button>
<button id="one2many-btn" md-raised-button color="primary" (click)="loadScenario(0,1,numberSubs)">1:{{numberSubs}}</button> <button id="one2many-btn" mat-raised-button color="primary" (click)="loadScenario(0,1,numberSubs)">1:{{numberSubs}}</button>
<md-form-field> <mat-form-field>
<input mdInput [(ngModel)]="numberSubs"> <input matInput [(ngModel)]="numberSubs">
</md-form-field> </mat-form-field>
</div> </div>
</div> </div>

1
openvidu-testapp/src/styles.css
View File

@ -62,6 +62,7 @@ button {
.mat-expansion-panel-body { .mat-expansion-panel-body {
font-size: 9.5px !important; font-size: 9.5px !important;
padding: 0 9px 0px !important; padding: 0 9px 0px !important;
margin: 0 2px 0 2px !important;
background-color: white; background-color: white;
border: 3px solid #e0e0e0; border: 3px solid #e0e0e0;
line-height: 13px; line-height: 13px;