room-moderator-page.component.html 3.37 KB
Newer Older
Tom Käsler's avatar
Tom Käsler committed
1
2
3
4
5
6
7
8
<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">
9
              <h1>{{ room.name }}</h1>
Tom Käsler's avatar
Tom Käsler committed
10
11
            </mat-card-title>
            <mat-card-subtitle fxLayoutAlign="center">
Tom Käsler's avatar
Tom Käsler committed
12
              <mat-icon *ngIf="moderationEnabled" class="gavel">
Tom Käsler's avatar
Tom Käsler committed
13
                mic
Tom Käsler's avatar
Tom Käsler committed
14
15
              </mat-icon>
              <span class="room-short-id">
Tom Käsler's avatar
Tom Käsler committed
16
                {{ 'room-page.session-id' | translate}}: {{ room.shortId.slice(0, 4) }} {{  room.shortId.slice(4, 8) }}
Tom Käsler's avatar
Tom Käsler committed
17
18
              </span>
              <button id="copy" mat-icon-button (click)="copyShortId()">
Klaus-Dieter Quibeldey-Cirkel's avatar
Klaus-Dieter Quibeldey-Cirkel committed
19
                <mat-icon class="copy" matTooltip="{{ 'room-page.copy-session-id' | translate}}">save</mat-icon>
Tom Käsler's avatar
Tom Käsler committed
20
              </button>
Tom Käsler's avatar
Tom Käsler committed
21
22
23
24
25
26
            </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">
27
          <p>{{room.description.trim()}}</p>
Tom Käsler's avatar
Tom Käsler committed
28
        </mat-card-content>
29
30
        <div fxLayout="column" fxLayoutAlign="center" fxLayoutGap="20px">
          <mat-grid-list cols="{{viewModuleCount}}" rowHeight="1:1" *ngIf="viewModuleCount > 1">
Tom Käsler's avatar
Tom Käsler committed
31
            <mat-grid-tile>
32
33
              <button id="question_answer-button"
                      mat-icon-button [disableRipple]="true"
34
                      routerLink="/moderator/room/{{ room.shortId }}/comments">
35
                <mat-icon matBadge="{{commentCounter}}" class="main-icon"
Tom Käsler's avatar
Tom Käsler committed
36
37
                          [ngClass]="{'desktop' : deviceType === 'desktop'}">question_answer
                </mat-icon>
38
                <h2>{{ 'room-page.public-stream' | translate}}</h2>
Tom Käsler's avatar
Tom Käsler committed
39
40
              </button>
            </mat-grid-tile>
41
            <mat-grid-tile *ngIf="moderationEnabled">
42
43
              <button id="gavel-button"
                      mat-icon-button [disableRipple]="true"
44
                      routerLink="/moderator/room/{{ room.shortId }}/moderator/comments">
45
                <mat-icon matBadge="{{moderatorCommentCounter}}" class="main-icon"
Tom Käsler's avatar
Tom Käsler committed
46
                          [ngClass]="{'desktop' : deviceType === 'desktop'}">mic
Tom Käsler's avatar
Tom Käsler committed
47
                </mat-icon>
48
                <h2>{{ 'room-page.moderating-stream' | translate}}</h2>
Tom Käsler's avatar
Tom Käsler committed
49
50
51
              </button>
            </mat-grid-tile>
        </mat-grid-list>
52
53
54
55
56
57
58
59
60
          <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>
Tom Käsler's avatar
Tom Käsler committed
61
      </mat-card>
Klaus-Dieter Quibeldey-Cirkel's avatar
Klaus-Dieter Quibeldey-Cirkel committed
62

Tom Käsler's avatar
Tom Käsler committed
63
    </div>
64
65
  <button id="live_announcer-button" tabIndex="-1" (click)="announce()" class="visually-hidden">{{ 'room-page.live-announcer' | translate }}</button>
</div>