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

<div class="div-wrapper">

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

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

          <div fxLayout="row">
            <mat-form-field style="margin-right: 10px">
              <input matInput placeholder="Session name" [id]="'session-name-input-' + index" name="sessionName" [(ngModel)]="sessionName"
                [disabled]="session">
            </mat-form-field>

            <mat-form-field>
              <input matInput placeholder="Client data" [id]="'client-data-input-'+ index" name="clientData" [(ngModel)]="clientData" [disabled]="session">
            </mat-form-field>

            <div fxLayout="column" class="session-btns-div">
              <button mat-icon-button title="Session properties" [id]="'session-settings-btn-' + index" class="mat-icon-custom" (click)="openSessionPropertiesDialog()"
                [disabled]="session">
                <mat-icon class="mat-icon-custom-ic" aria-label="Session properties button">settings</mat-icon>
              </button>
              <button mat-icon-button title="Session API" [id]="'session-api-btn-' + index" class="mat-icon-custom" (click)="openSessionApiDialog()">
                <mat-icon class="mat-icon-custom-ic" aria-label="Session API button">cloud_circle</mat-icon>
              </button>
              <button mat-icon-button title="Session events" [id]="'session-events-btn-' + index" class="mat-icon-custom" (click)="openSessionEventsDialog()">
                <mat-icon class="mat-icon-custom-ic" aria-label="Session events button">notifications</mat-icon>
              </button>
            </div>

          </div>

          <div>
            <button class="join-btn" mat-button (click)="joinSession()" [disabled]="session">JOIN</button>
            <mat-checkbox class="subscribe-checkbox" name="subscribeTo" (click)="toggleSubscribeTo()" [checked]="subscribeTo" [disabled]="session">Subscribe</mat-checkbox>
            <mat-checkbox class="publish-checkbox" name="publishTo" (click)="togglePublishTo()" [checked]="publishTo" [disabled]="session">Publish</mat-checkbox>
          </div>

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

            <div fxFlex="55">
              <div>
                <h4>Send</h4>
                <div>
                  <mat-checkbox class="send-audio-checkbox" name="sendAudio" (click)="toggleSendAudio()" [checked]="publisherProperties.audioSource !== false"
                    [disabled]="session || !publishTo">Audio</mat-checkbox>
                  <mat-checkbox class="send-video-checkbox" name="sendVideo" (click)="toggleSendVideo()" [checked]="publisherProperties.videoSource !== false"
                    [disabled]="session || !publishTo">Video</mat-checkbox>
                </div>
              </div>
              <div style="padding-top: 5px;">
                <h4>Enter active</h4>
                <div>
                  <mat-checkbox class="active-audio-checkbox" name="activeAudio" [(ngModel)]="publisherProperties.publishAudio" (click)="publisherProperties.publishAudio = !publisherProperties.publishAudio"
                    [disabled]="session || !publishTo">Audio</mat-checkbox>
                  <mat-checkbox class="active-video-checkbox" name="activeVideo" [(ngModel)]="publisherProperties.publishVideo" (click)="publisherProperties.publishVideo = !publisherProperties.publishVideo"
                    [disabled]="session || !publishTo">Video</mat-checkbox>
                </div>
              </div>
            </div>

            <div fxFlex="35">
              <mat-radio-group [(ngModel)]="optionsVideo" (change)="updateOptionsVideo($event)" [disabled]="session || !publishTo" [ngModelOptions]="{standalone: true}">
                <div>
                  <mat-radio-button class="video-radio" value="video">Video</mat-radio-button>
                </div>
                <div>
                  <mat-radio-button class="screen-radio" value="screen">Screen</mat-radio-button>
                </div>
              </mat-radio-group>
              <mat-checkbox class="subscribe-remote-check" name="subscribeToRemote" (click)="subscribeToRemote = !subscribeToRemote" [disabled]="!publishTo || session"
                [checked]="publishTo && subscribeToRemote">Subscribe
                <br>to remote</mat-checkbox>
            </div>

            <div fxFlex="10">
              <div fxLayout="column" class="publisher-btns-div">
                <button mat-icon-button title="Publisher properties" [id]="'publisher-settings-btn-' + index" class="mat-icon-custom" (click)="openPublisherPropertiesDialog()"
                  [disabled]="!publishTo">
                  <mat-icon class="mat-icon-custom-ic" aria-label="Publisher properties button">settings</mat-icon>
                </button>
                <button mat-icon-button title="Add new publisher to running session" [id]="'session-api-btn-' + index" class="mat-icon-custom"
                  [disabled]="!session || !publishTo">
                  <mat-icon class="mat-icon-custom-ic" aria-label="Session API button">add_circle</mat-icon>
                </button>
              </div>
            </div>

          </div>

        </form>
      </mat-card-content>

    </mat-card>
  </div>

  <div *ngIf="session">
    <mat-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="message-btn" (click)="sendMessage()" title="Broadcast message">
              <mat-icon aria-label="Send message button" style="font-size: 20px">chat</mat-icon>
            </button>
            <button class="leave-btn" (click)="leaveSession()" title="Leave session">
              <mat-icon aria-label="Leave button">clear</mat-icon>
            </button>
          </div>
        </div>
      </div>
      <div *ngIf="session.connection" fxLayout>
        <div fxFlex="140px" class="video-container">

          <div class="event-list-div scroll-custom">
            <mat-accordion [attr.id]="'events-' + session.connection.connectionId" class="event-list">
              <mat-expansion-panel *ngFor="let event of events" class="event-item">
                <mat-expansion-panel-header [attr.id]="event.name + '-' + session.connection.connectionId" [collapsedHeight]="'20px'" [expandedHeight]="'20px'"
                  class="event-name">
                  {{event.name}}
                </mat-expansion-panel-header>
                <div class="event-content">{{event.content}}</div>
              </mat-expansion-panel>
            </mat-accordion>
          </div>
        </div>
        <div [attr.id]="'remote-vid-' + session.connection.connectionId" fxFlex="240px" class="video-container">
          <div [attr.id]="'local-vid-' + session.connection.connectionId"></div>
          <app-video *ngIf="this.publisher" [streamManager]="this.publisher" [OV]="OV" [properties]="publisherProperties" (updateEventListInParent)="updateEventFromChild($event)">
          </app-video>
          <app-video *ngFor="let subscriber of this.subscribers" [streamManager]="subscriber" [OV]="OV" (updateEventListInParent)="updateEventFromChild($event)"
            (reSubbed)="updateSubscriberFromChild($event)">
          </app-video>
        </div>
      </div>
    </mat-card>
  </div>

</div>