Improve speaking times in autopilot (#3201)

* Fix overlaying speaking times

* Hide right col on mobile devices

* Countdown font mono

* Countdown time color

* Rename speaker export menu item

client/src/app/site/pages/meetings/modules/list-of-speakers-content/components/speaking-times/speaking-times.component.scss

@@ -4,7 +4,7 @@
     justify-content: start;
     padding: 8px 25px 0 25px;
     .structure-level {
-        width: 33%;
+        min-width: 33%;
         margin-bottom: 16px;
         display: flex;
         flex-direction: row;

client/src/app/site/pages/meetings/modules/projector/modules/countdown-time/countdown-time.component.html

@@ -24,6 +24,13 @@
         </span>
     </div>
 </div>
-<span *ngIf="unstyled" id="countdown">
+<span
+    *ngIf="unstyled"
+    id="countdown"
+    [ngClass]="{
+        'negative-time': seconds <= 0 && (countdown.default_time !== 0 || seconds < 0),
+        'warning-time': seconds <= warningTime && seconds > 0,
+    }"
+>
     {{ time }}
 </span>

client/src/app/site/pages/meetings/modules/projector/modules/countdown-time/countdown-time.component.scss

@@ -1,6 +1,21 @@
 @import 'src/assets/styles/media-queries.scss';
 @import 'src/assets/styles/fonts.scss';
 
+#countdown {
+    white-space: nowrap;
+    font-family: $font-monospace;
+
+    &.warning-time {
+        $color: #ed940e;
+        color: $color;
+    }
+
+    &.negative-time {
+        $color: #c00;
+        color: $color;
+    }
+}
+
 .countdown-time-wrapper {
     $margin: 50px;
     display: flex;

client/src/app/site/pages/meetings/pages/autopilot/components/autopilot/autopilot.component.html

@@ -74,6 +74,10 @@ <h1 class="line-and-icon">
             </ng-template>
         </os-list-of-speakers-content>
 
+        <div *ngIf="structureLevelCountdownEnabled && listOfSpeakers && (showRightCol | async) === false">
+            <ng-container [ngTemplateOutlet]="speakingTimes"></ng-container>
+        </div>
+
         <!-- Poll-Collection -->
         <os-poll-collection *ngIf="showPollCollection" [currentProjection]="projectedViewModel"></os-poll-collection>
 
@@ -93,13 +97,17 @@ <h1 class="line-and-icon">
         </mat-card>
     </div>
 
-    <div *ngIf="structureLevelCountdownEnabled && listOfSpeakers" class="col-right">
-        <mat-card class="os-card spacer-bottom-60">
-            <mat-card-content>
-                <os-speaking-times
-                    [currentSpeakingTimes]="listOfSpeakers.structure_level_list_of_speakers_ids"
-                ></os-speaking-times>
-            </mat-card-content>
-        </mat-card>
+    <div *ngIf="structureLevelCountdownEnabled && listOfSpeakers && showRightCol | async" class="col-right">
+        <ng-container [ngTemplateOutlet]="speakingTimes"></ng-container>
     </div>
 </div>
+
+<ng-template #speakingTimes>
+    <mat-card class="os-card spacer-bottom-60">
+        <mat-card-content>
+            <os-speaking-times
+                [currentSpeakingTimes]="listOfSpeakers.structure_level_list_of_speakers_ids"
+            ></os-speaking-times>
+        </mat-card-content>
+    </mat-card>
+</ng-template>

client/src/app/site/pages/meetings/pages/autopilot/components/autopilot/autopilot.component.ts

@@ -1,5 +1,7 @@
+import { BreakpointObserver, BreakpointState } from '@angular/cdk/layout';
 import { Component, OnInit } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
+import { BehaviorSubject } from 'rxjs';
 import { HasProjectorTitle } from 'src/app/domain/interfaces';
 import { DetailNavigable, isDetailNavigable } from 'src/app/domain/interfaces/detail-navigable';
 import { Mediafile } from 'src/app/domain/models/mediafiles/mediafile';
@@ -95,14 +97,17 @@ export class AutopilotComponent extends BaseMeetingComponent implements OnInit {
 
     public structureLevelCountdownEnabled = false;
 
+    public showRightCol: BehaviorSubject<boolean> = new BehaviorSubject(false);
+
     private _currentProjection: ViewProjection | null = null;
 
     public constructor(
         protected override translate: TranslateService,
         private operator: OperatorService,
         projectorRepo: ProjectorControllerService,
         closService: CurrentListOfSpeakersService,
-        private listOfSpeakersRepo: ListOfSpeakersControllerService
+        private listOfSpeakersRepo: ListOfSpeakersControllerService,
+        breakpoint: BreakpointObserver
     ) {
         super();
 
@@ -120,7 +125,10 @@ export class AutopilotComponent extends BaseMeetingComponent implements OnInit {
             }),
             this.meetingSettingsService
                 .get(`list_of_speakers_default_structure_level_time`)
-                .subscribe(time => (this.structureLevelCountdownEnabled = time > 0))
+                .subscribe(time => (this.structureLevelCountdownEnabled = time > 0)),
+            breakpoint.observe([`(min-width: 1050px)`]).subscribe((state: BreakpointState) => {
+                this.showRightCol.next(state.matches);
+            })
         );
     }
 

client/src/app/site/pages/meetings/pages/participants/export/speaker-csv-export.service/speaker-csv-export.service.ts

@@ -33,7 +33,7 @@ export class SpeakerCsvExportService {
                     label: this.translate.instant(speakerHeadersAndVerboseNames[key])
                 } as CsvColumnDefinitionProperty<ViewSpeaker>;
             }) as CsvColumnsDefinition<ViewSpeaker>,
-            this.translate.instant(`lists_of_speakers`) + `.csv`
+            this.translate.instant(`contributions`) + `.csv`
         );
     }
 }

client/src/app/site/pages/meetings/pages/participants/pages/participant-list/components/participant-list/participant-list.component.html

@@ -200,7 +200,7 @@ <h2>{{ 'Participants' | translate }}</h2>
 
         <button mat-menu-item *osPerms="permission.userCanManage" routerLink="speaker-list">
             <mat-icon>record_voice_over</mat-icon>
-            <span translate>List of speakers</span>
+            <span translate>Contributions</span>
         </button>
 
         <button mat-menu-item (click)="pdfExportUserList()">