room-moderator-page.component.html

<div fxLayout="column" fxLayoutAlign="center" fxLayoutGap="20px" fxFill>
    <div fxLayout="row" fxLayoutAlign="center">
      <mat-progress-spinner *ngIf="isLoading" mode="indeterminate"></mat-progress-spinner>
      <mat-card *ngIf="room">
        <div fxLayout="row">
          <span class="fill-remaining-space"></span>
          <mat-card-header fxLayoutAlign="center">
            <mat-card-title fxLayoutAlign="center">
              <h1>{{ room.name }}</h1>
            </mat-card-title>
            <mat-card-subtitle fxLayoutAlign="center">
              <mat-icon *ngIf="moderationEnabled" class="gavel">
                mic
              </mat-icon>
              <span class="room-short-id">
                {{ 'room-page.session-id' | translate}}: {{ room.shortId.slice(0, 4) }} {{  room.shortId.slice(4, 8) }}
              </span>
              <button id="copy" mat-icon-button (click)="copyShortId()">
                <mat-icon class="copy" matTooltip="{{ 'room-page.copy-session-id' | translate}}">save</mat-icon>
              </button>
            </mat-card-subtitle>
          </mat-card-header>
          <span class="fill-remaining-space"></span>
        </div>
        <mat-divider></mat-divider>
        <mat-card-content *ngIf="room.description" fxLayoutAlign="center">
          <p>{{room.description.trim()}}</p>
        </mat-card-content>
        <div fxLayout="column" fxLayoutAlign="center" fxLayoutGap="20px">
          <mat-grid-list cols="{{viewModuleCount}}" rowHeight="1:1" *ngIf="viewModuleCount > 1">
            <mat-grid-tile>
              <button id="question_answer-button"
                      mat-icon-button [disableRipple]="true"
                      routerLink="/moderator/room/{{ room.shortId }}/comments">
                <mat-icon matBadge="{{commentCounter}}" class="main-icon"
                          [ngClass]="{'desktop' : deviceType === 'desktop'}">question_answer
                </mat-icon>
                <h2>{{ 'room-page.public-stream' | translate}}</h2>
              </button>
            </mat-grid-tile>
            <mat-grid-tile *ngIf="moderationEnabled">
              <button id="gavel-button"
                      mat-icon-button [disableRipple]="true"
                      routerLink="/moderator/room/{{ room.shortId }}/moderator/comments">
                <mat-icon matBadge="{{moderatorCommentCounter}}" class="main-icon"
                          [ngClass]="{'desktop' : deviceType === 'desktop'}">mic
                </mat-icon>
                <h2>{{ 'room-page.moderating-stream' | translate}}</h2>
              </button>
            </mat-grid-tile>
        </mat-grid-list>
          <div fxLayout="row" fxLayoutAlign="center" *ngIf="viewModuleCount <= 1" class="question-button-div">
            <button id="question_answer-button2" mat-icon-button [disableRipple]="true"
                    routerLink="/creator/room/{{ room.shortId }}/comments" aria-labelledby="question_answer">
              <mat-icon matBadge="{{commentCounter}}" class="main-icon"
                        [ngClass]="{'desktop' : deviceType === 'desktop'}">question_answer</mat-icon>
              <h2>{{ 'room-page.comments' | translate}}</h2>
            </button>
          </div>
        </div>
      </mat-card>

    </div>
  <button id="live_announcer-button" tabIndex="-1" (click)="announce()" class="visually-hidden">{{ 'room-page.live-announcer' | translate }}</button>
</div>