feat: global subtitle display setting

You can now activate/deactivate the visiblity of subtitles on a global application level.
2026-10-09 01:16:15 -08:00 · 2021-09-05 16:39:56 +02:00
1 parent 3dd2789a36
commit 4d2e17565d
@@ -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) => {});
        }
@@ -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>

@@ -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', () => {
@@ -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,
+                };
            }
        });
    }
@@ -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;
+    }
+}
@@ -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>
@@ -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();
        })
@@ -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,
@@ -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;
 }
@@ -24,7 +24,7 @@
        "PROGRAM_DIALOG": {
            "PROGRAM_DETAILS": "Details zum TV-Programm",
            "TITLE": "Titel",
-            "CATEGORY": "Ketegorie",
+            "CATEGORY": "Kategorie",
            "PARENTAL_RATING_SYSTEM": "Alterskennzeichnung (USK)",
            "DESCRIPTION": "Beschreibung",
            "LANGUAGE": "Sprache",
@@ -105,7 +105,8 @@
        "VIDEO_PLAYER_LABEL": "Video player",
        "VIDEO_PLAYER_PLACEHOLDER": "Option auswählen",
        "SETTINGS_SAVED": "Einstellungen wurden erfolgreich gespeichert!",
-        "THEME": "Farbdesign"
+        "THEME": "Farbdesign",
+        "SHOW_CAPTIONS": "Untertitel anzeigen"
    },
    "THEMES": {
        "DARK_THEME": "Dunkel",
@@ -65,7 +65,8 @@
        "LATEST_VERSION": "You are using the latest version",
        "LANGUAGE": "Language",
        "SETTINGS_SAVED": "Success! Configuration was saved.",
-        "THEME": "Visual theme"
+        "THEME": "Visual theme",
+        "SHOW_CAPTIONS": "Show subtitles"
    },
    "THEMES": {
        "DARK_THEME": "Dark theme",
@@ -65,7 +65,8 @@
        "LATEST_VERSION": "Estás usando la versión reciente",
        "LANGUAGE": "Idioma",
        "SETTINGS_SAVED": "¡Completado! La configuración se guardó.",
-        "THEME": "Tema visual"
+        "THEME": "Tema visual",
+        "SHOW_CAPTIONS": "Mostrar subtítulos"
    },
    "THEMES": {
        "DARK_THEME": "Tema oscuro",
@@ -65,7 +65,8 @@
        "LATEST_VERSION": "최신 버전을 사용하고 있습니다",
        "LANGUAGE": "언어",
        "SETTINGS_SAVED": "설정이 저장되었습니다.",
-        "THEME": "테마"
+        "THEME": "테마",
+        "SHOW_CAPTIONS": "Show subtitles"
    },
    "THEMES": {
        "DARK_THEME": "어두운 테마",
@@ -65,7 +65,8 @@
        "LATEST_VERSION": "Вы используете последнюю версию приложения",
        "LANGUAGE": "Язык",
        "SETTINGS_SAVED": "Новые настройки были успешно сохранены!",
-        "THEME": "Тема оформления"
+        "THEME": "Тема оформления",
+        "SHOW_CAPTIONS": "Отображать субтитры"
    },
    "THEMES": {
        "DARK_THEME": "Тёмная тема",
@@ -1,121 +1,122 @@
-{
-    "HOME": {
-        "TITLE": "IPTVnator",
-        "SUBTITLE": "选择一个播放列表或者从URL/文件中添加一个新的播放列表",
-        "TABS": {
-            "RECENTLY_ADDED": "最近添加的播放列表",
-            "FILE_UPLOAD": "从文件添加",
-            "URL_UPLOAD": "从URL链接添加"
-        },
-        "PLAYLISTS": {
-            "NO_PLAYLISTS": "未添加播放列表",
-            "ADD_FIRST": "从其他标签页添加你的第一个播放列表",
-            "ADDED_VIA_URL": "添加自URL链接:",
-            "ADDED_VIA_FILE": "添加自文件",
-            "CHANNELS": "频道",
-            "ADDED": "已添加的",
-            "SHOW_DETAILS": "显示播放列表详情",
-            "REMOVE": "移除播放列表",
-            "INFO_DIALOG": {
-                "PLAYLIST_DETAILS": "播放列表详情",
-                "TITLE": "标题",
-                "FROM_URL": "添加自URL链接",
-                "IMPORT_DATE": "导入日期",
-                "CHANNELS": "频道数",
-                "CLOSE": "关闭",
-                "SAVE": "保存",
-                "USER_AGENT": "User agent",
-                "ORIGINAL_FILENAME": "原始文件名",
-                "FILE_PATH": "文件路径",
-                "UPDATE_FAILED": "上次播放列表更新失败",
-                "AUTO_UPDATE": "自动更新",
-                "AUTO_UPDATE_DESCRIPTION": "如果启用了自动刷新功能，则每次启动应用程序时都会自动更新播放列表。",
-                "CUSTOM_USER_AGENT": "一些 IPTV 提供商需要特定的用户代理才能播放他们的播放列表。"
-            },
-            "REMOVE_DIALOG": {
-                "TITLE": "移除播放列表",
-                "MESSAGE": "您确定要完全删除此播放列表吗？"
-            },
-            "UPDATED": "更新",
-            "REFRESH": "刷新播放列表"
-        },
-        "FILE_UPLOAD": {
-            "DRAG_DROP": "将文件拖放到此处",
-            "OR": "或",
-            "CHOOSE_PLAYLIST": "选择一个播放列表"
-        },
-        "URL_UPLOAD": {
-            "PLAYLIST_URL": "播放一个播放列表(m3u, m3u8)",
-            "ADD_PLAYLIST": "添加播放列表"
-        }
-    },
-    "SETTINGS": {
-        "TITLE": "设置 / IPTVnator",
-        "SUBTITLE": "更改应用程序的配置 ",
-        "DESCRIPTION": "请调整以下列表中的选项并使用保存按钮确认",
-        "EPG_URL_LABEL": "电子节目单EPG Url (*.xml 或 *.xml.gz)",
-        "EPG_URL_PLACEHOLDER": "输入一个 URL",
-        "REFRESH_EPG": "刷新电子节目单EPG",
-        "VIDEO_PLAYER_LABEL": "视频播放器",
-        "VIDEO_PLAYER_PLACEHOLDER": "选择一个选项",
-        "VERSION": "版本",
-        "SAVE_CHANGES": "保存更改",
-        "BACK_TO_HOME": "回到主页",
-        "NEW_VERSION_AVAILABLE": "有新版本可用 ",
-        "LATEST_VERSION": "您使用的是最新版本",
-        "LANGUAGE": "语言",
-        "SETTINGS_SAVED": "配置已成功保存",
-        "THEME": "主题"
-    },
-    "THEMES": {
-        "DARK_THEME": "暗黑模式",
-        "LIGHT_THEME": "明亮模式"
-    },
-    "CHANNELS": {
-        "SEARCH_CHANNEL": "搜索频道",
-        "UPLOAD_OR_SELECT_OTHER_PLAYLIST": "上传或选择其他播放列表",
-        "ALL_CHANNELS": "所有频道",
-        "GROUPS": "分组",
-        "UNGROUPED": "未分组",
-        "UNNAMED_CHANNEL": "未命名频道",
-        "FAVORITES": "收藏",
-        "NO_FAVORITES": "还没有收藏夹",
-        "USE_STAR_TO_FAVORITE": "使用“☆”图标将频道添加到此列表中",
-        "REMOVE_FAVORITE": "从收藏夹中删除"
-    },
-    "TOP_MENU": {
-        "OPEN_CHANNELS_LIST": "打开频道列表",
-        "TOGGLE_FAVORITE_FLAG": "切换收藏夹标志",
-        "OPEN_EPG_LIST": "打开电子节目单EPG列表"
-    },
-    "EPG": {
-        "NEXT_DAY": "明天",
-        "PREVIOUS_DAY": "昨天",
-        "LIVE_NOW": "Live now",
-        "LIVE_STREAM": "Live stream",
-        "TIMESHIFT_AVAILABLE": "时移功能可用，点击播放",
-        "EPG_NOT_AVAILABLE_DATE": "错误：电子节目单EPG在所选日期不可用",
-        "EPG_NOT_AVAILABLE_CHANNEL_TITLE": "错误：电子节目单EPG不适用于此频道",
-        "EPG_NOT_AVAILABLE_CHANNEL_DESCRIPTION": "请添加/更改设置项中电子节目单的URL",
-        "FETCH_EPG": "获取 EPG 数据...",
-        "PROGRAM_DIALOG": {
-            "PROGRAM_DETAILS": "电视节目详情",
-            "TITLE": "标题",
-            "CATEGORY": "类别",
-            "PARENTAL_RATING_SYSTEM": "电视内容分级系统",
-            "DESCRIPTION": "描述",
-            "LANGUAGE": "语言",
-            "SHOW_PROGRAM_DETAILS": "显示有关此程序的详细信息"
-        }
-    },
-    "LANGUAGES": {
-        "CHINESE": "简体中文",
-        "ENGLISH": "English",
-        "KOREAN": "한국어",
-        "RUSSIAN": "Русский",
-        "GERMAN": "Deutsch",
-        "SPANISH": "Español"
-    },
-    "YES": "是",
-    "NO": "否"
-}
+{
+    "HOME": {
+        "TITLE": "IPTVnator",
+        "SUBTITLE": "选择一个播放列表或者从URL/文件中添加一个新的播放列表",
+        "TABS": {
+            "RECENTLY_ADDED": "最近添加的播放列表",
+            "FILE_UPLOAD": "从文件添加",
+            "URL_UPLOAD": "从URL链接添加"
+        },
+        "PLAYLISTS": {
+            "NO_PLAYLISTS": "未添加播放列表",
+            "ADD_FIRST": "从其他标签页添加你的第一个播放列表",
+            "ADDED_VIA_URL": "添加自URL链接:",
+            "ADDED_VIA_FILE": "添加自文件",
+            "CHANNELS": "频道",
+            "ADDED": "已添加的",
+            "SHOW_DETAILS": "显示播放列表详情",
+            "REMOVE": "移除播放列表",
+            "INFO_DIALOG": {
+                "PLAYLIST_DETAILS": "播放列表详情",
+                "TITLE": "标题",
+                "FROM_URL": "添加自URL链接",
+                "IMPORT_DATE": "导入日期",
+                "CHANNELS": "频道数",
+                "CLOSE": "关闭",
+                "SAVE": "保存",
+                "USER_AGENT": "User agent",
+                "ORIGINAL_FILENAME": "原始文件名",
+                "FILE_PATH": "文件路径",
+                "UPDATE_FAILED": "上次播放列表更新失败",
+                "AUTO_UPDATE": "自动更新",
+                "AUTO_UPDATE_DESCRIPTION": "如果启用了自动刷新功能，则每次启动应用程序时都会自动更新播放列表。",
+                "CUSTOM_USER_AGENT": "一些 IPTV 提供商需要特定的用户代理才能播放他们的播放列表。"
+            },
+            "REMOVE_DIALOG": {
+                "TITLE": "移除播放列表",
+                "MESSAGE": "您确定要完全删除此播放列表吗？"
+            },
+            "UPDATED": "更新",
+            "REFRESH": "刷新播放列表"
+        },
+        "FILE_UPLOAD": {
+            "DRAG_DROP": "将文件拖放到此处",
+            "OR": "或",
+            "CHOOSE_PLAYLIST": "选择一个播放列表"
+        },
+        "URL_UPLOAD": {
+            "PLAYLIST_URL": "播放一个播放列表(m3u, m3u8)",
+            "ADD_PLAYLIST": "添加播放列表"
+        }
+    },
+    "SETTINGS": {
+        "TITLE": "设置 / IPTVnator",
+        "SUBTITLE": "更改应用程序的配置 ",
+        "DESCRIPTION": "请调整以下列表中的选项并使用保存按钮确认",
+        "EPG_URL_LABEL": "电子节目单EPG Url (*.xml 或 *.xml.gz)",
+        "EPG_URL_PLACEHOLDER": "输入一个 URL",
+        "REFRESH_EPG": "刷新电子节目单EPG",
+        "VIDEO_PLAYER_LABEL": "视频播放器",
+        "VIDEO_PLAYER_PLACEHOLDER": "选择一个选项",
+        "VERSION": "版本",
+        "SAVE_CHANGES": "保存更改",
+        "BACK_TO_HOME": "回到主页",
+        "NEW_VERSION_AVAILABLE": "有新版本可用 ",
+        "LATEST_VERSION": "您使用的是最新版本",
+        "LANGUAGE": "语言",
+        "SETTINGS_SAVED": "配置已成功保存",
+        "THEME": "主题",
+        "SHOW_CAPTIONS": "Show subtitles"
+    },
+    "THEMES": {
+        "DARK_THEME": "暗黑模式",
+        "LIGHT_THEME": "明亮模式"
+    },
+    "CHANNELS": {
+        "SEARCH_CHANNEL": "搜索频道",
+        "UPLOAD_OR_SELECT_OTHER_PLAYLIST": "上传或选择其他播放列表",
+        "ALL_CHANNELS": "所有频道",
+        "GROUPS": "分组",
+        "UNGROUPED": "未分组",
+        "UNNAMED_CHANNEL": "未命名频道",
+        "FAVORITES": "收藏",
+        "NO_FAVORITES": "还没有收藏夹",
+        "USE_STAR_TO_FAVORITE": "使用“☆”图标将频道添加到此列表中",
+        "REMOVE_FAVORITE": "从收藏夹中删除"
+    },
+    "TOP_MENU": {
+        "OPEN_CHANNELS_LIST": "打开频道列表",
+        "TOGGLE_FAVORITE_FLAG": "切换收藏夹标志",
+        "OPEN_EPG_LIST": "打开电子节目单EPG列表"
+    },
+    "EPG": {
+        "NEXT_DAY": "明天",
+        "PREVIOUS_DAY": "昨天",
+        "LIVE_NOW": "Live now",
+        "LIVE_STREAM": "Live stream",
+        "TIMESHIFT_AVAILABLE": "时移功能可用，点击播放",
+        "EPG_NOT_AVAILABLE_DATE": "错误：电子节目单EPG在所选日期不可用",
+        "EPG_NOT_AVAILABLE_CHANNEL_TITLE": "错误：电子节目单EPG不适用于此频道",
+        "EPG_NOT_AVAILABLE_CHANNEL_DESCRIPTION": "请添加/更改设置项中电子节目单的URL",
+        "FETCH_EPG": "获取 EPG 数据...",
+        "PROGRAM_DIALOG": {
+            "PROGRAM_DETAILS": "电视节目详情",
+            "TITLE": "标题",
+            "CATEGORY": "类别",
+            "PARENTAL_RATING_SYSTEM": "电视内容分级系统",
+            "DESCRIPTION": "描述",
+            "LANGUAGE": "语言",
+            "SHOW_PROGRAM_DETAILS": "显示有关此程序的详细信息"
+        }
+    },
+    "LANGUAGES": {
+        "CHINESE": "简体中文",
+        "ENGLISH": "English",
+        "KOREAN": "한국어",
+        "RUSSIAN": "Русский",
+        "GERMAN": "Deutsch",
+        "SPANISH": "Español"
+    },
+    "YES": "是",
+    "NO": "否"
+}