From 0053bb56a2510b4d3d08d9a0efc179c90a2dca62 Mon Sep 17 00:00:00 2001 From: Sean Engelhardt Date: Tue, 26 Feb 2019 11:38:29 +0100 Subject: [PATCH] Add custom fonts (WIP) Pretty much angular magic --- client/src/app/app.component.ts | 24 ++++-- .../ui-services/load-font.service.spec.ts | 12 +++ .../app/core/ui-services/load-font.service.ts | 82 +++++++++++++++++++ .../mediafile-list.component.ts | 1 - client/src/assets/styles/projector.scss | 42 ++++++++++ client/src/styles.scss | 44 +--------- 6 files changed, 154 insertions(+), 51 deletions(-) create mode 100644 client/src/app/core/ui-services/load-font.service.spec.ts create mode 100644 client/src/app/core/ui-services/load-font.service.ts create mode 100644 client/src/assets/styles/projector.scss diff --git a/client/src/app/app.component.ts b/client/src/app/app.component.ts index fe1e5c7f6..eeabdf607 100644 --- a/client/src/app/app.component.ts +++ b/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(); } diff --git a/client/src/app/core/ui-services/load-font.service.spec.ts b/client/src/app/core/ui-services/load-font.service.spec.ts new file mode 100644 index 000000000..114713f42 --- /dev/null +++ b/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(); + }); +}); diff --git a/client/src/app/core/ui-services/load-font.service.ts b/client/src/app/core/ui-services/load-font.service.ts new file mode 100644 index 000000000..b25260844 --- /dev/null +++ b/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('font_regular').subscribe(regular => { + if (regular) { + this.setCustomProjectorFont(regular, 400); + } + }); + + this.configService.get('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); + }); + } +} diff --git a/client/src/app/site/mediafiles/components/mediafile-list/mediafile-list.component.ts b/client/src/app/site/mediafiles/components/mediafile-list/mediafile-list.component.ts index ab9aff492..30ef074e0 100644 --- a/client/src/app/site/mediafiles/components/mediafile-list/mediafile-list.component.ts +++ b/client/src/app/site/mediafiles/components/mediafile-list/mediafile-list.component.ts @@ -149,7 +149,6 @@ export class MediafileListComponent extends ListViewBaseComponent