Add custom fonts (WIP)

Pretty much angular magic

client/src/app/app.component.ts

@@ -1,13 +1,14 @@
 import { Component } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
 
-import { OperatorService } from './core/core-services/operator.service';
-import { LoginDataService } from './core/ui-services/login-data.service';
 import { ConfigService } from './core/ui-services/config.service';
 import { ConstantsService } from './core/ui-services/constants.service';
+import { CountUsersService } from './core/ui-services/count-users.service';
+import { LoadFontService } from './core/ui-services/load-font.service';
+import { LoginDataService } from './core/ui-services/login-data.service';
+import { OperatorService } from './core/core-services/operator.service';
 import { ServertimeService } from './core/core-services/servertime.service';
 import { ThemeService } from './core/ui-services/theme.service';
-import { CountUsersService } from './core/ui-services/count-users.service';
 
 /**
  * Angular's global App Component
@@ -25,20 +26,26 @@ export class AppComponent {
      *
      * Handles the altering of Array.toString()
      *
-     * @param autoupdateService
-     * @param notifyService
-     * @param translate
+     * @param translate To set the default language
+     * @param operator To call the constructor of the OperatorService
+     * @param loginDataService to call the constructor of the LoginDataService
+     * @param constantService to call the constructor of the ConstantService
+     * @param servertimeService executes the scheduler early on
      * @param themeService used to listen to theme-changes
+     * @param countUsersService to call the constructor of the CountUserService
+     * @param configService to call the constructor of the ConfigService
+     * @param loadFontService to call the constructor of the LoadFontService
      */
     public constructor(
         translate: TranslateService,
         operator: OperatorService,
-        configService: ConfigService,
         loginDataService: LoginDataService,
         constantsService: ConstantsService, // Needs to be started, so it can register itself to the WebsocketService
         servertimeService: ServertimeService,
         themeService: ThemeService,
-        countUsersService: CountUsersService // Needed to register itself.
+        countUsersService: CountUsersService, // Needed to register itself.
+        configService: ConfigService,
+        loadFontService: LoadFontService
     ) {
         // manually add the supported languages
         translate.addLangs(['en', 'de', 'cs']);
@@ -50,7 +57,6 @@ export class AppComponent {
         translate.use(translate.getLangs().includes(browserLang) ? browserLang : 'en');
         // change default JS functions
         this.overloadArrayToString();
-
         servertimeService.startScheduler();
     }
 

client/src/app/core/ui-services/load-font.service.spec.ts

@@ -0,0 +1,12 @@
+import { TestBed } from '@angular/core/testing';
+
+import { LoadFontService } from './load-font.service';
+
+describe('LoadFontService', () => {
+    beforeEach(() => TestBed.configureTestingModule({}));
+
+    it('should be created', () => {
+        const service: LoadFontService = TestBed.get(LoadFontService);
+        expect(service).toBeTruthy();
+    });
+});

client/src/app/core/ui-services/load-font.service.ts

@@ -0,0 +1,82 @@
+import { Injectable } from '@angular/core';
+
+import { ConfigService } from './config.service';
+
+/**
+ * Enables the usage of the FontFace constructor
+ */
+declare let FontFace: any;
+
+/**
+ * The linter refuses to allow Document['fonts'].
+ * Since Document.fonts is working draft since 2016, typescript
+ * dies not yet support it natively (even though it exists in normal browsers)
+ */
+interface FontDocument extends Document {
+    fonts: any;
+}
+
+/**
+ * Service to dynamically load and sets custom loaded fonts
+ * using FontFace.
+ * Browser support might not be perfect yet.
+ */
+@Injectable({
+    providedIn: 'root'
+})
+export class LoadFontService {
+    /**
+     * The prefix to load custom fonts from
+     */
+    private urlPrefix = window.location.origin;
+
+    /**
+     * Constructor
+     *
+     * @param configService To observe the config variables
+     */
+    public constructor(private configService: ConfigService) {
+        this.loadCustomFont();
+    }
+
+    /**
+     * Observes and loads custom fonts for the projector.
+     * Currently, normal and regular fonts can be considered, since
+     * italic fonts can easily be calculated by the browser.
+     * Falls back to the normal OSFont when no custom  font was set.
+     */
+    private loadCustomFont(): void {
+        this.configService.get<any>('font_regular').subscribe(regular => {
+            if (regular) {
+                this.setCustomProjectorFont(regular, 400);
+            }
+        });
+
+        this.configService.get<any>('font_bold').subscribe(bold => {
+            if (bold) {
+                this.setCustomProjectorFont(bold, 500);
+            }
+        });
+    }
+
+    /**
+     * Sets a new font for the custom projector. Weight is required to
+     * differentiate between bold and normal fonts
+     *
+     * @param font the font object from the config service
+     * @param weight the desired weight of the font
+     */
+    private setCustomProjectorFont(font: any, weight: number): void {
+        const path = font.path ? font.path : font.default;
+        const url = font.path ? `${this.urlPrefix}${path}` : path;
+        const fontFace = new FontFace('customProjectorFont', `url(${url})`, { weight: weight });
+        fontFace
+            .load()
+            .then(res => {
+                (document as FontDocument).fonts.add(res);
+            })
+            .catch(error => {
+                console.error(error);
+            });
+    }
+}

client/src/app/site/mediafiles/components/mediafile-list/mediafile-list.component.ts

@@ -149,7 +149,6 @@ export class MediafileListComponent extends ListViewBaseComponent<ViewMediafile,
      * @param file the selected file
      */
     public onEditFile(file: ViewMediafile): void {
-        console.log('edit file ', file);
         this.fileToEdit = file;
 
         this.editFile = true;

client/src/assets/styles/projector.scss

@@ -0,0 +1,42 @@
+#projector {
+    * {
+        font-family: customProjectorFont;
+    }
+
+    h2 {
+        line-height: 40px;
+    }
+    h3 {
+        color: #222;
+        margin-bottom: 10px;
+    }
+
+    .slidetitle {
+        border-bottom: 5px solid #d3d3d3;
+        margin-bottom: 40px;
+
+        h1 {
+            font-size: 1.8em;
+            line-height: 1.1em;
+            margin-bottom: 0;
+            padding-bottom: 0;
+        }
+        h2 {
+            color: #9a9898;
+            margin-top: 10px;
+            margin-bottom: 5px;
+            font-size: 28px;
+            font-weight: normal;
+            display: block;
+        }
+    }
+
+    ul,
+    ol {
+        margin: 0 0 10px 0;
+    }
+
+    hr {
+        margin: 10px 0;
+    }
+}

client/src/styles.scss

@@ -29,6 +29,9 @@
 /** date-time-picker */
 @import '~ng-pick-datetime/assets/style/picker.min.css';
 
+/** Load projector specific SCSS values */
+@import './assets/styles/projector.scss';
+
 /** Define the classes to switch between themes */
 .openslides-theme {
     @include angular-material-theme($openslides-theme);
@@ -602,47 +605,6 @@ button.mat-menu-item.selected {
     font-size: 16px;
 }
 
-/*** Projector slides ***/
-
-#slide {
-    h2 {
-        line-height: 40px;
-    }
-    h3 {
-        color: #222;
-        margin-bottom: 10px;
-    }
-
-    .slidetitle {
-        border-bottom: 5px solid #d3d3d3;
-        margin-bottom: 40px;
-
-        h1 {
-            font-size: 1.8em;
-            line-height: 1.1em;
-            margin-bottom: 0;
-            padding-bottom: 0;
-        }
-        h2 {
-            color: #9a9898;
-            margin-top: 10px;
-            margin-bottom: 5px;
-            font-size: 28px;
-            font-weight: normal;
-            display: block;
-        }
-    }
-
-    ul,
-    ol {
-        margin: 0 0 10px 0;
-    }
-
-    hr {
-        margin: 10px 0;
-    }
-}
-
 .ellipsis-overflow {
     overflow: hidden;
     text-overflow: ellipsis;