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

<div>
  <md-card class="join-card">

    <md-card-content>
      <form class="session-form">

        <div>
          <md-form-field style="margin-right: 10px">
            <input mdInput placeholder="Session name" name="sessionName" [(ngModel)]="sessionName" [disabled]="session">
          </md-form-field>

          <md-form-field>
            <input mdInput placeholder="Client data" name="clientData" [(ngModel)]="clientData" [disabled]="session">
          </md-form-field>
        </div>

        <div>
          <button id="join-btn" md-button (click)="joinSession()" [disabled]="session">JOIN</button>
          <md-checkbox [(ngModel)]="subscribeTo" name="subscribeTo" [disabled]="session">Subscribe</md-checkbox>
          <md-checkbox [(ngModel)]="publishTo" name="publishTo" (click)="toggleRadio()" [disabled]="session">Publish</md-checkbox>
        </div>

        <div class="inner-card" fxLayout="row" fxLayoutAlign="start start">

          <div fxFlex="60">
            <div>
              <h4>Send</h4>
              <div>
                <md-checkbox name="sendAudio" [(ngModel)]="sendAudio" [disabled]="!publishTo || session" [checked]="sendAudio && publishTo">Audio</md-checkbox>
                <md-checkbox name="sendVideo" [(ngModel)]="sendVideo" [disabled]="!publishTo || session" [checked]="sendVideo && publishTo"
                  (click)="toggleRadio()">Video</md-checkbox>
              </div>
            </div>
            <div style="padding-top: 5px;">
              <h4>Enter active</h4>
              <div>
                <md-checkbox name="activeAudio" [(ngModel)]="activeAudio" [disabled]="!sendAudio || !publishTo || session" [checked]="activeAudio && sendAudio && publishTo">Audio</md-checkbox>
                <md-checkbox name="activeVideo" [(ngModel)]="activeVideo" [disabled]="!sendVideo || !publishTo || session" [checked]="activeVideo && sendVideo && publishTo">Video</md-checkbox>
              </div>
            </div>
          </div>

          <div fxFlex="40">
            <md-radio-group [(ngModel)]="optionVideo" [disabled]="!sendVideo || !publishTo || session" [ngModelOptions]="{standalone: true}">
              <div>
                <md-radio-button value="video" [checked]="publishTo && sendVideo">Video</md-radio-button>
              </div>
              <div>
                <md-radio-button value="screen" [checked]="publishTo && sendVideo && optionVideo==='screen'">Screen</md-radio-button>
              </div>
            </md-radio-group>
            <md-checkbox class="subscribe-remote-check" name="subscribeToRemote" [(ngModel)]="subscribeToRemote" [disabled]="(!sendAudio && !sendVideo) || !publishTo || session"
              [checked]="(sendAudio || sendVideo) && publishTo && subscribeToRemote">Subscribe<br>to remote</md-checkbox>
          </div>

        </div>

      </form>
    </md-card-content>

  </md-card>
</div>

<div *ngIf="session">
  <md-card class="session-card">
    <div class="session-card-header">
      <div class="session-card-inner">
        <div class="session-title">{{sessionName}}</div>
        <div class="session-actions">
          <button><md-icon class="md-24" aria-label="Mute video button" (click)="toggleVideo()">{{videoIcon}}</md-icon></button>
          <button><md-icon class="md-24" aria-label="Mute audio button" (click)="toggleAudio()">{{audioIcon}}</md-icon></button>
          <button><md-icon class="md-24" aria-label="Leave button" (click)="leaveSession()">clear</md-icon></button>
        </div>
      </div>
    </div>
    <div *ngIf="session.connection" fxLayout>
      <div [attr.id]="'local-vid-' + session.connection.connectionId" fxFlex="135px" class="video-container"></div>
      <div [attr.id]="'remote-vid-' + session.connection.connectionId" fxFlex="270px" class="video-container"></div>
    </div>
  </md-card>
</div>