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