Add title info to chyron and add second layout option (#3691)

client/src/app/domain/models/projector/projector.ts

@@ -25,6 +25,8 @@ export class Projector extends BaseModel<Projector> {
     public header_h1_color!: string;
     public chyron_background_color!: string;
     public chyron_font_color!: string;
+    public chyron_background_color_2!: string;
+    public chyron_font_color_2!: string;
     public show_header_footer!: boolean;
     public show_title!: boolean;
     public show_logo!: boolean;
@@ -87,7 +89,9 @@ export class Projector extends BaseModel<Projector> {
         `header_font_color`,
         `header_h1_color`,
         `chyron_background_color`,
+        `chyron_background_color_2`,
         `chyron_font_color`,
+        `chyron_font_color_2`,
         `show_header_footer`,
         `show_title`,
         `show_logo`,

client/src/app/gateways/repositories/projectors/projector-repository.service.ts

@@ -55,6 +55,8 @@ export class ProjectorRepositoryService extends BaseMeetingRelatedRepository<Vie
             header_h1_color: projector.header_h1_color,
             chyron_background_color: projector.chyron_background_color,
             chyron_font_color: projector.chyron_font_color,
+            chyron_background_color_2: projector.chyron_background_color_2,
+            chyron_font_color_2: projector.chyron_font_color_2,
             show_header_footer: projector.show_header_footer,
             show_title: projector.show_title,
             show_logo: projector.show_logo,
@@ -137,9 +139,14 @@ export class ProjectorRepositoryService extends BaseMeetingRelatedRepository<Vie
     public async project(
         descriptor: ProjectionBuildDescriptor,
         projectors: ViewProjector[],
-        options: object | null
+        options: object | null,
+        mode?: 'DEFAULT' | 'UPDATE_ONLY_SELECTED'
     ): Promise<void> {
         const payload = this.createProjectPayload(descriptor, projectors, options);
+        if (mode) {
+            payload.mode = mode;
+        }
+
         return await this.sendActionToBackend(ProjectorAction.PROJECT, payload);
     }
 

client/src/app/site/pages/meetings/modules/meetings-component-collector/projection-dialog/components/projection-dialog/projection-dialog.component.html

@@ -6,7 +6,7 @@ <h2 mat-dialog-title>
     <div class="element-name" *ngIf="descriptor">
         {{ descriptor.getDialogTitle() }}
     </div>
-    <div class="content-wrapper">
+    <div class="content-wrapper" *ngIf="projectorSelectable">
         <div
             class="projectors"
             *ngFor="let projector of projectors"
@@ -49,6 +49,7 @@ <h3>{{ option.displayName | translate }}</h3>
 
 <mat-dialog-actions>
     <button mat-button osAutofocus (click)="onProject()" color="accent">{{ 'Project' | translate }}</button>
-    <button mat-button (click)="onAddToPreview()">{{ 'Add to queue' | translate }}</button>
+    <button mat-button *ngIf="projectorSelectable" (click)="onAddToPreview()">{{ 'Add to queue' | translate }}</button>
+    <button mat-button *ngIf="!projectorSelectable" (click)="onHide()">{{ 'Hide' | translate }}</button>
     <button mat-button (click)="onCancel()">{{ 'Cancel' | translate }}</button>
 </mat-dialog-actions>

client/src/app/site/pages/meetings/modules/meetings-component-collector/projection-dialog/components/projection-dialog/projection-dialog.component.ts

@@ -28,6 +28,7 @@ import { ProjectionDialogReturnType } from '../../definitions';
 export interface ProjectionDialogConfig {
     descriptor: ProjectionBuildDescriptor;
     allowReferenceProjector: boolean;
+    projector?: ViewProjector;
 }
 
 @Component({
@@ -42,6 +43,7 @@ export class ProjectionDialogComponent implements OnInit, OnDestroy {
     public options!: SlideOptions;
     public descriptor: ProjectionBuildDescriptor;
     public allowReferenceProjector = true;
+    public projectorSelectable = false;
     private _projectorSubscription: string;
     private _subscriptions: Subscription[] = [];
 
@@ -54,6 +56,10 @@ export class ProjectionDialogComponent implements OnInit, OnDestroy {
     ) {
         this.descriptor = isProjectionBuildDescriptor(data) ? data : data.descriptor;
         this.allowReferenceProjector = !isProjectionBuildDescriptor(data) && data.allowReferenceProjector;
+        this.projectorSelectable = isProjectionBuildDescriptor(data) || !data.projector;
+        if (!this.projectorSelectable && !isProjectionBuildDescriptor(data)) {
+            this.selectedProjectors = [data.projector.id];
+        }
     }
 
     public ngOnDestroy(): void {
@@ -72,14 +78,14 @@ export class ProjectionDialogComponent implements OnInit, OnDestroy {
             this.projectors = projectors.filter(p => this.allowReferenceProjector || !p.isReferenceProjector);
 
             // TODO: Maybe watch. But this may not be necessary for the short living time of this dialog.
-            if (this.selectedProjectors === null) {
+            if (this.selectedProjectors === null && this.projectorSelectable) {
                 this.selectedProjectors = this.projectorService
                     .getProjectorsWhichAreProjecting(this.descriptor)
                     .map(p => p.id);
             }
 
             // Add default projector, if the projectable is not projected on it.
-            if (this.descriptor?.projectionDefault) {
+            if (this.descriptor?.projectionDefault && this.projectorSelectable) {
                 const defaultProjectors: ViewProjector[] = this.activeMeetingService.meeting!.default_projectors(
                     this.descriptor.projectionDefault
                 );
@@ -141,7 +147,8 @@ export class ProjectionDialogComponent implements OnInit, OnDestroy {
             action: `project`,
             resultDescriptor: this.descriptor,
             projectors: this.selectedProjectors.map(id => this.projectors.find(p => p.id === id)).filter(p => p),
-            options: this.optionValues
+            options: this.optionValues,
+            mode: this.projectorSelectable ? `DEFAULT` : `UPDATE_ONLY_SELECTED`
         });
     }
 
@@ -154,6 +161,15 @@ export class ProjectionDialogComponent implements OnInit, OnDestroy {
         });
     }
 
+    public onHide(): void {
+        this.dialogRef.close({
+            action: `hide`,
+            resultDescriptor: this.descriptor,
+            projectors: this.selectedProjectors.map(id => this.projectors.find(p => p.id === id)).filter(p => p),
+            options: this.optionValues
+        });
+    }
+
     public onCancel(): void {
         this.dialogRef.close();
     }

client/src/app/site/pages/meetings/modules/meetings-component-collector/projection-dialog/definitions.ts

@@ -2,8 +2,9 @@ import { ViewProjector } from 'src/app/site/pages/meetings/pages/projectors';
 import { ProjectionBuildDescriptor } from 'src/app/site/pages/meetings/view-models';
 
 export interface ProjectionDialogReturnType {
-    action: 'project' | 'addToPreview';
+    action: 'project' | 'addToPreview' | 'hide';
     resultDescriptor: ProjectionBuildDescriptor;
     projectors: ViewProjector[];
     options: object | null;
+    mode?: 'DEFAULT' | 'UPDATE_ONLY_SELECTED';
 }

client/src/app/site/pages/meetings/modules/meetings-component-collector/projection-dialog/services/projection-dialog.service.ts

@@ -32,12 +32,17 @@ export class ProjectionDialogService {
             restoreFocus: false
         });
         const response = await firstValueFrom(dialogRef.afterClosed());
+        console.log(response);
         if (response) {
-            const { action, resultDescriptor, projectors, options }: ProjectionDialogReturnType = response;
+            const { action, resultDescriptor, projectors, options, mode }: ProjectionDialogReturnType = response;
             if (action === `project`) {
-                await this.projectorRepo.project(resultDescriptor, projectors, options);
+                await this.projectorRepo.project(resultDescriptor, projectors, options, mode);
             } else if (action === `addToPreview`) {
                 await this.projectorRepo.addToPreview(resultDescriptor, projectors, options);
+            } else if (action === `hide`) {
+                if (this.projectorRepo.isProjectedOn(resultDescriptor, projectors[0])) {
+                    await this.projectorRepo.toggle(resultDescriptor, projectors, options);
+                }
             } else {
                 throw new Error(`Unknown projector action ` + action);
             }

client/src/app/site/pages/meetings/modules/meetings-component-collector/projector-button/components/projector-button/projector-button.component.ts

@@ -21,6 +21,7 @@ export class ProjectorButtonComponent implements OnInit, OnDestroy {
     /**
      * The object to project.
      */
+
     private _object: ProjectionBuildDescriptor | Projectable | null = null;
 
     public get object(): ProjectionBuildDescriptor | Projectable {
@@ -58,6 +59,9 @@ export class ProjectorButtonComponent implements OnInit, OnDestroy {
     @Input()
     public allowReferenceProjector = true;
 
+    @Input()
+    public useToggleDialog = false;
+
     /**
      * If this is re-defined, it will replace the usual click functionality.
      */
@@ -67,7 +71,13 @@ export class ProjectorButtonComponent implements OnInit, OnDestroy {
             return;
         }
         const descriptor = this.projectorService.ensureDescriptor(this.object);
-        if (this.projector) {
+        if (this.useToggleDialog) {
+            this.projectionDialogService.openProjectDialogFor({
+                descriptor,
+                projector: this.projector,
+                allowReferenceProjector: true
+            });
+        } else if (this.projector) {
             this.projectorService.toggle(descriptor, [this.projector]);
         } else {
             // open the projection dialog

client/src/app/site/pages/meetings/modules/projector/modules/slides/components/current-speaker-chyron-slide/components/current-speaker-chyron-slide.component.html

@@ -1,13 +1,29 @@
 <div
-    id="chyron"
-    *ngIf="data"
+    [id]="data.options['chyron_type'] === 'new' ? 'chyron_new' : 'chyron'"
     [ngStyle]="{
-        'background-color': projector?.chyron_background_color || data.data.background_color,
-        color: projector?.chyron_font_color || data.data.font_color
+        '--chyron-background-color': projector?.chyron_background_color || data.data.background_color,
+        '--chyron-font-color': projector?.chyron_font_color || data.data.font_color,
+        '--chyron-background-color-2': projector?.chyron_background_color_2 || data.data.background_color_2,
+        '--chyron-font-color-2': projector?.chyron_font_color_2 || data.data.font_color_2
     }"
 >
-    <span id="inner">
-        <div id="inner-name">{{ data.data.current_speaker_name }}</div>
-        <div id="inner-level">{{ data.data.current_speaker_level }}</div>
-    </span>
+    <div id="chyron_agenda_item" *ngIf="data && data.options['agenda_item'] && data.data.title_information">
+        <span class="inner">
+            {{ data.data.title_information?.agenda_item_number }}
+            {{ !!data.data.title_information?.agenda_item_number ? '&middot;' : '' }}
+            {{ data.data.title_information?.number }}
+            {{ !!data.data.title_information?.number ? '&middot;' : '' }}
+            {{ data.data.title_information?.title }}
+        </span>
+    </div>
+
+    <div id="chyron_speaker" *ngIf="data && data.options['chyron_type'] !== 'none' && data.data.current_speaker_name">
+        <span *ngIf="data.options['chyron_type'] === 'old'" class="inner">
+            <div class="name">{{ data.data.current_speaker_name }}</div>
+            <div class="level">{{ data.data.current_speaker_level }}</div>
+        </span>
+        <span *ngIf="data.options['chyron_type'] === 'new'" class="inner">
+            <os-comma-separated-listing [list]="getSpeaker()"></os-comma-separated-listing>
+        </span>
+    </div>
 </div>

client/src/app/site/pages/meetings/modules/projector/modules/slides/components/current-speaker-chyron-slide/components/current-speaker-chyron-slide.component.scss

@@ -1,33 +1,60 @@
 @import 'src/assets/styles/fonts.scss';
 
-#chyron {
+#chyron,
+#chyron_new {
     position: absolute;
     left: 50px;
     bottom: 20px;
-    right: 0;
+    right: 50px;
     z-index: 10;
-    height: 80px;
-    font-size: 32px;
+}
+
+#chyron_agenda_item,
+#chyron_speaker {
     text-align: left;
-    line-height: 1;
+    line-height: 1.25;
     opacity: 1;
 
-    #inner {
+    .inner {
+        background-color: var(--chyron-background-color);
+        color: var(--chyron-font-color);
+        display: inline-block;
+
         vertical-align: middle;
         padding-left: 18px;
-        padding-right: 20px;
+        padding-right: 18px;
         padding-top: 10px;
         padding-bottom: 10px;
-        height: 60px;
+        height: 40px;
         display: table-cell;
+    }
+}
 
-        #inner-name {
+#chyron_agenda_item {
+    font-size: 24px;
+    .inner {
+        background-color: var(--chyron-background-color-2);
+        color: var(--chyron-font-color-2);
+    }
+    margin-bottom: -1px;
+}
+
+#chyron_speaker {
+    font-size: 32px;
+    .inner {
+        .name {
             font-family: customChyronNameFont, $font-chyronname;
         }
 
-        #inner-level {
+        .level {
             margin-top: 5px;
             font-size: 70%;
         }
     }
 }
+
+#chyron_new {
+    #chyron_speaker {
+        min-height: 80px;
+    }
+}

client/src/app/site/pages/meetings/modules/projector/modules/slides/components/current-speaker-chyron-slide/components/current-speaker-chyron-slide.component.ts

@@ -8,4 +8,12 @@ import { CurrentSpeakerChyronSlideData } from '../current-speaker-chyron-slide-d
     templateUrl: `./current-speaker-chyron-slide.component.html`,
     styleUrls: [`./current-speaker-chyron-slide.component.scss`]
 })
-export class CurrentSpeakerChyronSlideComponent extends BaseSlideComponent<CurrentSpeakerChyronSlideData> {}
+export class CurrentSpeakerChyronSlideComponent extends BaseSlideComponent<CurrentSpeakerChyronSlideData> {
+    public getSpeaker(): string[] {
+        const parts: string[] = [this.data.data.current_speaker_name];
+        if (!!this.data.data.current_speaker_level) {
+            parts.push(this.data.data.current_speaker_level);
+        }
+        return parts;
+    }
+}

client/src/app/site/pages/meetings/modules/projector/modules/slides/components/current-speaker-chyron-slide/current-speaker-chyron-slide-data.ts

@@ -3,4 +3,7 @@ export interface CurrentSpeakerChyronSlideData {
     current_speaker_level?: string;
     background_color: string;
     font_color: string;
+    background_color_2: string;
+    font_color_2: string;
+    title_information?: any;
 }

client/src/app/site/pages/meetings/modules/projector/modules/slides/components/current-speaker-chyron-slide/current-speaker-chyron-slide.module.ts

@@ -1,11 +1,12 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 
+import { CommaSeparatedListingModule } from '../../../../../../../../../ui/modules/comma-separated-listing/comma-separated-listing.module';
 import { SlideToken } from '../../definitions';
 import { CurrentSpeakerChyronSlideComponent } from './components/current-speaker-chyron-slide.component';
 @NgModule({
-    imports: [CommonModule],
     declarations: [CurrentSpeakerChyronSlideComponent],
-    providers: [{ provide: SlideToken.token, useValue: CurrentSpeakerChyronSlideComponent }]
+    providers: [{ provide: SlideToken.token, useValue: CurrentSpeakerChyronSlideComponent }],
+    imports: [CommonModule, CommaSeparatedListingModule]
 })
 export class CurrentSpeakerChyronSlideModule {}

client/src/app/site/pages/meetings/pages/projectors/components/projector-edit-dialog/components/projector-edit-dialog/projector-edit-dialog.component.html

@@ -138,9 +138,9 @@ <h3>{{ 'Projection defaults' | translate }}</h3>
                 </ng-template>
 
                 <ng-template
-                    *ngFor="let field of colorFields | keyvalue"
+                    *ngFor="let colorPair of colorFields"
                     [ngTemplateOutlet]="colorFormField"
-                    [ngTemplateOutletContext]="{ title: field.value, form: field.key }"
+                    [ngTemplateOutletContext]="{ title: colorPair[1], form: colorPair[0] }"
                 ></ng-template>
             </div>
         </mat-dialog-content>

client/src/app/site/pages/meetings/pages/projectors/components/projector-edit-dialog/components/projector-edit-dialog/projector-edit-dialog.component.ts

@@ -100,15 +100,17 @@ export class ProjectorEditDialogComponent extends BaseUiComponent implements OnI
      */
     public readonly projectiondefaultKeys = PROJECTIONDEFAULT;
 
-    public readonly colorFields = {
-        color: _(`Foreground color`),
-        background_color: _(`Background color`),
-        header_background_color: _(`Header background color`),
-        header_font_color: _(`Header font color`),
-        header_h1_color: _(`Headline color`),
-        chyron_background_color: _(`Chyron background color`),
-        chyron_font_color: _(`Chyron font color`)
-    };
+    public readonly colorFields = [
+        [`background_color`, _(`Background color`)],
+        [`color`, _(`Foreground color`)],
+        [`header_background_color`, _(`Header background color`)],
+        [`header_font_color`, _(`Header font color`)],
+        [`header_h1_color`, _(`Headline color`)],
+        [`chyron_background_color`, _(`Chyron background color`)],
+        [`chyron_font_color`, _(`Chyron font color`)],
+        [`chyron_background_color_2`, _(`Chyron second background color`)],
+        [`chyron_font_color_2`, _(`Chyron second font color`)]
+    ];
 
     private get _aspectRatioControl(): AbstractControl {
         return this.updateForm.get(ASPECT_RATIO_FORM_KEY)!;
@@ -150,6 +152,8 @@ export class ProjectorEditDialogComponent extends BaseUiComponent implements OnI
             header_h1_color: [``, Validators.required],
             chyron_background_color: [``, Validators.required],
             chyron_font_color: [``, Validators.required],
+            chyron_background_color_2: [``, Validators.required],
+            chyron_font_color_2: [``, Validators.required],
             show_header_footer: [],
             show_title: [],
             show_logo: [],

client/src/app/site/pages/meetings/pages/projectors/modules/projector-detail/components/projector-detail/projector-detail.component.html

@@ -385,6 +385,7 @@ <h2>{{ projector.name }}</h2>
                                 <os-projector-button
                                     [object]="getChyronBuildDesc()"
                                     [projector]="projector"
+                                    [useToggleDialog]="true"
                                 ></os-projector-button>
                                 <span class="spacer-left-10">{{ 'Chyron – current contribution' | translate }}</span>
                             </mat-list-item>