feat: global subtitle display setting

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

src/app/player/components/html-video-player/html-video-player.component.ts

@@ -26,6 +26,9 @@ export class HtmlVideoPlayerComponent implements OnChanges, OnDestroy {
     /** HLS object */
     hls: Hls;
 
+    /** Captions/subtitles indicator */
+    @Input() showCaptions!: boolean;
+
     /**
      * Listen for component input changes
      * @param changes component changes
@@ -54,6 +57,19 @@ export class HtmlVideoPlayerComponent implements OnChanges, OnDestroy {
         }
     }
 
+    /**
+     * Disables text based captions based on the global settings
+     */
+    disableCaptions(): void {
+        for (
+            let i = 0;
+            i < this.videoPlayer.nativeElement.textTracks.length;
+            i++
+        ) {
+            this.videoPlayer.nativeElement.textTracks[i].mode = 'hidden';
+        }
+    }
+
     /**
      * Handles promise based play operation
      */
@@ -64,6 +80,9 @@ export class HtmlVideoPlayerComponent implements OnChanges, OnDestroy {
             playPromise
                 .then((_) => {
                     // Automatic playback started!
+                    if (!this.showCaptions) {
+                        this.disableCaptions();
+                    }
                 })
                 .catch((error) => {});
         }

src/app/player/components/video-player/video-player.component.html

@@ -51,7 +51,7 @@
 
             <!-- video.js player -->
             <app-vjs-player
-                *ngIf="player === 'videojs'"
+                *ngIf="playerSettings.player === 'videojs'"
                 [options]="{
                     sources: [
                         {
@@ -60,12 +60,14 @@
                         }
                     ]
                 }"
+                [class.hide-captions]="!playerSettings.showCaptions"
             ></app-vjs-player>
         </ng-container>
         <!-- default html player component -->
         <app-html-video-player
-            *ngIf="player === 'html5'"
+            *ngIf="playerSettings.player === 'html5'"
             [channel]="activeChannel$ | async"
+            [showCaptions]="playerSettings.showCaptions"
         >
         </app-html-video-player>
 

src/app/player/components/video-player/video-player.component.spec.ts

@@ -16,6 +16,7 @@ import * as MOCKED_PLAYLIST from '../../../../mocks/playlist.json';
 import { createChannel } from '../../../state';
 import { HtmlVideoPlayerComponent } from '../html-video-player/html-video-player.component';
 import { EpgListComponent } from '../epg-list/epg-list.component';
+import { VideoPlayer } from '../../../settings/settings.interface';
 
 class MatSnackBarStub {
     open(): void {}
@@ -73,7 +74,10 @@ describe('VideoPlayerComponent', () => {
 
     it('should check default component settings', () => {
         fixture.detectChanges();
-        expect(component.player).toEqual('videojs');
+        expect(component.playerSettings).toEqual({
+            player: VideoPlayer.VideoJs,
+            showCaptions: false,
+        });
     });
 
     it('should update store after channel was faved', () => {

src/app/player/components/video-player/video-player.component.ts

@@ -5,10 +5,7 @@ import { Observable } from 'rxjs';
 import { tap } from 'rxjs/operators';
 import { MatSidenav } from '@angular/material/sidenav';
 import { StorageMap } from '@ngx-pwa/local-storage';
-import {
-    Settings,
-    VideoPlayerType,
-} from '../../../settings/settings.interface';
+import { Settings, VideoPlayer } from '../../../settings/settings.interface';
 import { MatSnackBar } from '@angular/material/snack-bar';
 
 /** Settings key in storage */
@@ -46,8 +43,11 @@ export class VideoPlayerComponent implements OnInit {
         (store) => store.favorites
     );
 
-    /** Selected video player component */
-    player: VideoPlayerType = 'videojs';
+    /** Selected video player options */
+    playerSettings: Partial<Settings> = {
+        player: VideoPlayer.VideoJs,
+        showCaptions: false,
+    };
 
     /** Sidebar object */
     @ViewChild('sidenav') sideNav: MatSidenav;
@@ -79,7 +79,10 @@ export class VideoPlayerComponent implements OnInit {
     applySettings(): void {
         this.storage.get(SETTINGS_STORE_KEY).subscribe((settings: Settings) => {
             if (settings && Object.keys(settings).length > 0) {
-                this.player = settings.player;
+                this.playerSettings = {
+                    player: settings.player,
+                    showCaptions: settings.showCaptions,
+                };
             }
         });
     }

src/app/player/components/vjs-player/vjs-player.component.scss

@@ -5,3 +5,12 @@
     width: 100% !important;
     height: calc(100vh - 85px);
 }
+
+/* Hide the captions settings item from the captions menu. */
+.hide-captions {
+    .vjs-texttrack-settings,
+    .vjs-text-track-display,
+    .vjs-subs-caps-button {
+        display: none;
+    }
+}

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;
 }