Add: [Client][Settings/Caption] ビデオをみるときに文字スーパーを表示するかを切り替える設定を追加

client/src/services/Settings.ts

@@ -27,6 +27,7 @@ export interface IClientSettings {
     specify_caption_opacity: boolean;
     caption_opacity: number;
     tv_show_superimpose: boolean;
+    video_show_superimpose: boolean;
     // tv_show_data_broadcasting: 同期無効
     // capture_copy_to_clipboard: 同期無効
     capture_save_mode: 'Browser' | 'UploadServer' | 'Both';

client/src/services/player/PlayerController.ts

@@ -136,7 +136,6 @@ class PlayerController {
         const channels_store = useChannelsStore();
         const player_store = usePlayerStore();
         const settings_store = useSettingsStore();
-
         console.log('\u001b[31m[PlayerController] Initializing...');
 
         // 破棄済みかどうかのフラグを下ろす
@@ -152,6 +151,11 @@ class PlayerController {
         // こうしないと DPlayer が mpegts.js を認識できない
         (window as any).mpegts = mpegts;
 
+        // 文字スーパーの表示設定
+        // ライブ視聴とビデオ視聴で設定キーが異なる
+        const is_show_superimpose = this.playback_mode === 'Live' ?
+            settings_store.settings.tv_show_superimpose : settings_store.settings.video_show_superimpose;
+
         // DPlayer を初期化
         this.player = new DPlayer({
             // DPlayer を配置する要素
@@ -344,8 +348,8 @@ class PlayerController {
                 },
                 // aribb24.js
                 aribb24: {
-                    // 文字スーパーを表示するかどうか
-                    disableSuperimposeRenderer: settings_store.settings.tv_show_superimpose === false,
+                    // 文字スーパーレンダラーを無効にするかどうか
+                    disableSuperimposeRenderer: is_show_superimpose === false,
                     // 描画フォント
                     normalFont: `"${settings_store.settings.caption_font}", "Rounded M+ 1m for ARIB", sans-serif`,
                     // 縁取りする色
@@ -383,7 +387,7 @@ class PlayerController {
                     PRACallback: async (index: number) => {
 
                         // 設定で文字スーパーが無効なら実行しない
-                        if (settings_store.settings.tv_show_superimpose === false) return;
+                        if (is_show_superimpose === false) return;
 
                         // index に応じた内蔵音を鳴らす
                         // ref: https://ics.media/entry/200427/

client/src/stores/SettingsStore.ts

@@ -30,6 +30,7 @@ interface ILocalClientSettings {
     specify_caption_opacity: boolean;
     caption_opacity: number;
     tv_show_superimpose: boolean;
+    video_show_superimpose: boolean;
     tv_show_data_broadcasting: boolean;
     capture_copy_to_clipboard: boolean;
     capture_save_mode: 'Browser' | 'UploadServer' | 'Both';
@@ -77,6 +78,7 @@ const sync_settings_keys = [
     'specify_caption_opacity',
     'caption_opacity',
     'tv_show_superimpose',
+    'video_show_superimpose',
     // tv_show_data_broadcasting: 同期無効
     // capture_copy_to_clipboard: 同期無効
     'capture_save_mode',
@@ -153,6 +155,8 @@ const default_settings: ILocalClientSettings = {
     caption_opacity: 0.5,
     // テレビをみるときに文字スーパーを表示する (Default: 表示する)
     tv_show_superimpose: true,
+    // ビデオをみるときに文字スーパーを表示する (Default: 表示しない)
+    video_show_superimpose: false,
 
     // ***** 設定 → データ放送 *****
 

client/src/views/Settings/Caption.vue

@@ -60,6 +60,15 @@
                     v-model="settingsStore.settings.tv_show_superimpose">
                 </v-switch>
             </div>
+            <div class="settings__item settings__item--switch">
+                <label class="settings__item-heading" for="video_show_superimpose">ビデオをみるときに文字スーパーを表示する</label>
+                <label class="settings__item-label" for="video_show_superimpose">
+                    文字スーパーは、緊急地震速報の赤テロップや、NHK BS のニュース速報のテロップなどで利用されています。録画当時の文字スーパーによるニュース速報を確認したい方以外は、オフにしておくのがおすすめです。<br>
+                </label>
+                <v-switch class="settings__item-switch" id="video_show_superimpose" inset hide-details
+                    v-model="settingsStore.settings.video_show_superimpose">
+                </v-switch>
+            </div>
         </div>
     </SettingsBase>
 </template>

client/src/views/Settings/General.vue

@@ -21,12 +21,12 @@
                 <span class="ml-1">ピン留め中チャンネルの並び替え設定を開く</span>
             </v-btn>
             <div class="settings__item settings__item--switch">
-                <label class="settings__item-heading" for="tv_show_superimpose">チャンネル選局のキーボードショートカットを {{Utils.AltOrOption()}} + 数字キー/テンキーに変更する</label>
-                <label class="settings__item-label" for="tv_show_superimpose">
+                <label class="settings__item-heading" for="tv_channel_selection_requires_alt_key">チャンネル選局のキーボードショートカットを {{Utils.AltOrOption()}} + 数字キー/テンキーに変更する</label>
+                <label class="settings__item-label" for="tv_channel_selection_requires_alt_key">
                     この設定をオンにすると、数字キーまたはテンキーに対応するリモコン番号（1～12）のチャンネルに切り替える際、{{Utils.AltOrOption()}} キーを同時に押す必要があります。<br>
                     コメントやツイートを入力しようとして誤って数字キーを押してしまい、チャンネルが変わってしまう事態を避けたい方におすすめです。<br>
                 </label>
-                <v-switch class="settings__item-switch" id="tv_show_superimpose" inset hide-details
+                <v-switch class="settings__item-switch" id="tv_channel_selection_requires_alt_key" inset hide-details
                     v-model="settingsStore.settings.tv_channel_selection_requires_alt_key">
                 </v-switch>
             </div>

server/app/config.py

@@ -57,6 +57,7 @@ class ClientSettings(BaseModel):
     specify_caption_opacity: bool = Field(False)
     caption_opacity: float = Field(1.0)
     tv_show_superimpose: bool = Field(True)
+    video_show_superimpose: bool = Field(False)
     # tv_show_data_broadcasting: 同期無効
     # capture_copy_to_clipboard: 同期無効
     capture_save_mode: Literal['Browser', 'UploadServer', 'Both'] = Field('UploadServer')