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

<div class="div-wrapper">

  <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 class="join-btn" md-button (click)="joinSession()" [disabled]="session">JOIN</button>
            <md-checkbox class="subscribe-checkbox" name="subscribeTo" (change)="toggleSubscribeTo()" [checked]="subscribeTo && checkSubscribeTo" [disabled]="session">Subscribe</md-checkbox>
            <md-checkbox class="publish-checkbox" name="publishTo" (change)="togglePublishTo()" [checked]="publishTo && checkPublishTo" [disabled]="session || disablePublishTo">Publish</md-checkbox>
          </div>

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

            <div fxFlex="60">
              <div>
                <h4>Send</h4>
                <div>
                  <md-checkbox class="send-audio-checkbox" name="sendAudio" (change)="toggleSendAudio()" [checked]="sendAudio && checkSendAudio" [disabled]="session || disableSendAudio">Audio</md-checkbox>
                  <md-checkbox class="send-video-checkbox" name="sendVideo" (change)="toggleSendVideo()" [checked]="sendVideo && checkSendVideo" [disabled]="session || disableSendVideo">Video</md-checkbox>
                </div>
              </div>
              <div style="padding-top: 5px;">
                <h4>Enter active</h4>
                <div>
                  <md-checkbox class="active-audio-checkbox" name="activeAudio" (change)="toggleActiveAudio()" [checked]="activeAudio && checkActiveAudio" [disabled]="session || disableActiveAudio">Audio</md-checkbox>
                  <md-checkbox class="active-video-checkbox" name="activeVideo" (change)="toggleActiveVideo()" [checked]="activeVideo && checkActiveVideo" [disabled]="session || disableActiveVideo">Video</md-checkbox>
                </div>
              </div>
            </div>

            <div fxFlex="40">
              <md-radio-group [(ngModel)]="optionsVideo" [disabled]="session || disableRadioButtons" [ngModelOptions]="{standalone: true}">
                <div>
                  <md-radio-button class="video-radio" value="video" [checked]="checkRadioVideo && optionsVideo==='video'">Video</md-radio-button>
                </div>
                <div>
                  <md-radio-button class="screen-radio" value="screen" [checked]="checkRadioScreen && optionsVideo==='screen'">Screen</md-radio-button>
                </div>
              </md-radio-group>
              <md-checkbox class="subscribe-remote-check" name="subscribeToRemote" (change)="subscribeToRemote = !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 class="video-btn" *ngIf="publishTo && sendVideo" (click)="toggleVideo()"><md-icon aria-label="Mute video button">{{videoIcon}}</md-icon></button>
            <button class="audio-btn" *ngIf="publishTo && sendAudio" (click)="toggleAudio()"><md-icon aria-label="Mute audio button">{{audioIcon}}</md-icon></button>
            <button class="leave-btn" (click)="leaveSession()"><md-icon aria-label="Leave button">clear</md-icon></button>
          </div>
        </div>
      </div>
      <div *ngIf="session.connection" fxLayout>
        <div fxFlex="135px" class="video-container">

          <div class="event-list-div scroll-custom">
            <md-accordion [attr.id]="'events-' + session.connection.connectionId" class="event-list">
              <md-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'" class="event-name">
                  {{event.name}}
                </md-expansion-panel-header>
                <div class="event-content">{{event.content}}</div>
              </md-expansion-panel>
            </md-accordion>
          </div>
        </div>
        <div [attr.id]="'remote-vid-' + session.connection.connectionId" fxFlex="270px" class="video-container">
          <div [attr.id]="'local-vid-' + session.connection.connectionId"></div>
        </div>
      </div>
    </md-card>
  </div>

</div>