set the clock color to the header color of the projector

client/src/app/shared/components/projector/projector.component.html

@@ -16,7 +16,7 @@
         </div>
 
         <div *ngFor="let slide of slides">
-            <os-slide-container [slideData]="slide" [scroll]="scroll" [scale]="scale" [headerEnabled]="projector.show_header_footer"></os-slide-container>
+            <os-slide-container [slideData]="slide" [scroll]="scroll" [scale]="scale" [projector]="projector"></os-slide-container>
         </div>
 
         <div id="footer" [ngStyle]="headerFooterStyle" *ngIf="projector && projector.show_header_footer">

client/src/app/shared/components/slide-container/slide-container.component.ts

@@ -7,6 +7,7 @@ import { SlideManager } from 'app/slides/services/slide-manager.service';
 import { BaseSlideComponent } from 'app/slides/base-slide-component';
 import { SlideData } from 'app/site/projector/services/projector-data.service';
 import { ProjectorElement } from 'app/shared/models/core/projector';
+import { ViewProjector } from 'app/site/projector/models/view-projector';
 
 function hasError(obj: object): obj is { error: string } {
     return (<{ error: string }>obj).error !== undefined;
@@ -62,14 +63,23 @@ export class SlideContainerComponent extends BaseComponent {
         this.setDataForComponent();
     }
 
+    public get slideData(): SlideData<object> {
+        return this._slideData;
+    }
+
+    private _projector: ViewProjector;
+
     /**
      * Variable, if the projector header is enabled.
      */
     @Input()
-    public headerEnabled: boolean;
+    public set projector(projector: ViewProjector) {
+        this._projector = projector;
+        this.setProjectorForComponent();
+    }
 
-    public get slideData(): SlideData<object> {
-        return this._slideData;
+    public get projector(): ViewProjector {
+        return this._projector;
     }
 
     /**
@@ -86,6 +96,10 @@ export class SlideContainerComponent extends BaseComponent {
         this.updateScroll();
     }
 
+    public get scroll(): number {
+        return this._scroll;
+    }
+
     /**
      * Update the slideStyle, when the scale changes.
      */
@@ -122,9 +136,9 @@ export class SlideContainerComponent extends BaseComponent {
      */
     private updateScroll(): void {
         if (this.slideOptions.scrollable) {
-            let value = this._scroll;
+            let value = this.scroll;
             value *= -50;
-            if (this.headerEnabled) {
+            if (this.projector.show_header_footer) {
                 value += 50; // Default offset for the header
             }
             this.slideStyle['margin-top'] = `${value}px`;
@@ -154,6 +168,7 @@ export class SlideContainerComponent extends BaseComponent {
             this.slide.clear();
             this.slideRef = this.slide.createComponent(slideFactory);
             this.setDataForComponent();
+            this.setProjectorForComponent();
         });
     }
 
@@ -165,4 +180,14 @@ export class SlideContainerComponent extends BaseComponent {
             this.slideRef.instance.data = this.slideData;
         }
     }
+
+    /**
+     * "injects" the projector into the slide component.
+     */
+    private setProjectorForComponent(): void {
+        if (this.slideRef && this.slideRef.instance) {
+            console.log(this.projector);
+            this.slideRef.instance.projector = this.projector;
+        }
+    }
 }

client/src/app/slides/base-slide-component.ts

@@ -1,5 +1,6 @@
 import { Input } from '@angular/core';
 import { SlideData } from 'app/site/projector/services/projector-data.service';
+import { ViewProjector } from 'app/site/projector/models/view-projector';
 
 /**
  * Every slide has to extends this base class. It forces the slides
@@ -12,5 +13,11 @@ export abstract class BaseSlideComponent<T extends object> {
     @Input()
     public data: SlideData<T>;
 
+    /**
+     * The projector where this slide is projected on.
+     */
+    @Input()
+    public projector: ViewProjector;
+
     public constructor() {}
 }

client/src/app/slides/core/clock/clock-slide.component.html

@@ -1,4 +1,4 @@
-<div id="clock" *ngIf="time">
+<div id="clock" *ngIf="time && projector" [ngStyle]="{color: projector.header_font_color}">
     <mat-icon>schedule</mat-icon>
     <span>{{ time }}</span>
 </div>