feat: global subtitle display setting

You can now activate/deactivate the visiblity of
subtitles on a global application level.

src/app/settings/settings.component.html

@@ -119,6 +119,16 @@
                         </p>
                     </div>
                 </mat-list-item>
+                <mat-list-item>
+                    <div matLine fxLayout="row">
+                        <p fxFlex>{{ 'SETTINGS.SHOW_CAPTIONS' | translate }}</p>
+                        <p fxFlex>
+                            <mat-checkbox
+                                formControlName="showCaptions"
+                            ></mat-checkbox>
+                        </p>
+                    </div>
+                </mat-list-item>
                 <mat-list-item>
                     <div matLine fxLayout="row">
                         <p fxFlex>{{ 'SETTINGS.VERSION' | translate }}</p>

src/app/settings/settings.component.spec.ts

@@ -1,3 +1,4 @@
+import { MatCheckboxModule } from '@angular/material/checkbox';
 import { StorageMap } from '@ngx-pwa/local-storage';
 import { FormBuilder } from '@angular/forms';
 /* eslint-disable @typescript-eslint/unbound-method */
@@ -72,6 +73,7 @@ describe('SettingsComponent', () => {
                     MockModule(MatCardModule),
                     MockModule(MatListModule),
                     MockModule(MatFormFieldModule),
+                    MockModule(MatCheckboxModule),
                 ],
             }).compileComponents();
         })

src/app/settings/settings.component.ts

@@ -5,7 +5,7 @@ import { StorageMap } from '@ngx-pwa/local-storage';
 import { Router } from '@angular/router';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { Observable, Subscription } from 'rxjs';
-import { Settings } from './settings.interface';
+import { Settings, VideoPlayer } from './settings.interface';
 import { HttpClient } from '@angular/common/http';
 import * as semver from 'semver';
 import { ElectronService } from '../services/electron.service';
@@ -34,11 +34,11 @@ export class SettingsComponent implements OnInit, OnDestroy {
     /** Player options */
     players = [
         {
-            id: 'html5',
+            id: VideoPlayer.Html5Player,
             label: 'HTML5 Video Player',
         },
         {
-            id: 'videojs',
+            id: VideoPlayer.VideoJs,
             label: 'VideoJs Player',
         },
     ];
@@ -84,9 +84,10 @@ export class SettingsComponent implements OnInit, OnDestroy {
         private translate: TranslateService
     ) {
         this.settingsForm = this.formBuilder.group({
-            player: ['videojs'],
+            player: [VideoPlayer.VideoJs],
             epgUrl: '',
             language: Language.ENGLISH,
+            showCaptions: false,
             theme: Theme.LightTheme,
         });
 
@@ -123,11 +124,16 @@ export class SettingsComponent implements OnInit, OnDestroy {
             this.storage.get('settings').subscribe((settings: Settings) => {
                 if (settings) {
                     this.settingsForm.setValue({
-                        player: settings.player ? settings.player : 'videojs',
+                        player: settings.player
+                            ? settings.player
+                            : VideoPlayer.VideoJs,
                         epgUrl: settings.epgUrl ? settings.epgUrl : '',
                         language: settings.language
                             ? settings.language
                             : Language.ENGLISH,
+                        showCaptions: settings.showCaptions
+                            ? settings.showCaptions
+                            : false,
                         theme: settings.theme
                             ? settings.theme
                             : Theme.LightTheme,

src/app/settings/settings.interface.ts

@@ -1,14 +1,18 @@
 import { Language } from './language.enum';
 import { Theme } from './theme.enum';
 
-export type VideoPlayerType = 'html5' | 'videojs';
+export enum VideoPlayer {
+    VideoJs = 'videojs',
+    Html5Player = 'html5',
+}
 
 /**
  * Describes all available settings options of the application
  */
 export interface Settings {
-    player: VideoPlayerType;
+    player: VideoPlayer;
     epgUrl: string;
     language: Language;
+    showCaptions: boolean;
     theme: Theme;
 }