Skip to content

Commit

Permalink
Add: [Client][Settings/Quality] 画質設定を全般設定から分離
Browse files Browse the repository at this point in the history 
今後どんどん分量が大きくなるので、わかりやすさの観点からも独立したセクションにしておいた方が望ましい
  • Loading branch information
@tsukumijima
tsukumijima committed Nov 9, 2023
1 parent 917f6da commit bfb0558
Show file tree
Hide file tree
Showing 8 changed files with 174 additions and 105 deletions.
6 changes: 6 additions & 0 deletions client/src/router/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import SettingsDataBroadcasting from '@/views/Settings/DataBroadcasting.vue';
import SettingsGeneral from '@/views/Settings/General.vue';
import SettingsIndex from '@/views/Settings/Index.vue';
import SettingsJikkyo from '@/views/Settings/Jikkyo.vue';
import SettingsQuality from '@/views/Settings/Quality.vue';
import SettingsServer from '@/views/Settings/Server.vue';
import SettingsTwitter from '@/views/Settings/Twitter.vue';
import TVHome from '@/views/TV/Home.vue';
Expand Down Expand Up @@ -65,6 +66,11 @@ const router = new VueRouter({
name: 'Settings General',
component: SettingsGeneral,
},
{
path: '/settings/quality',
name: 'Settings Quality',
component: SettingsQuality,
},
{
path: '/settings/caption',
name: 'Settings Caption',
Expand Down
6 changes: 3 additions & 3 deletions client/src/services/Settings.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,12 +12,12 @@ export interface IClientSettings {
// showed_panel_last_time: 同期無効
// selected_twitter_account_id: 同期無効
saved_twitter_hashtags: string[];
// tv_streaming_quality: 同期無効
// tv_data_saver_mode: 同期無効
// tv_low_latency_mode: 同期無効
panel_display_state: 'RestorePreviousState' | 'AlwaysDisplay' | 'AlwaysFold';
tv_panel_active_tab: 'Program' | 'Channel' | 'Comment' | 'Twitter';
tv_channel_selection_requires_alt_key: boolean;
// tv_streaming_quality: 同期無効
// tv_data_saver_mode: 同期無効
// tv_low_latency_mode: 同期無効
caption_font: string;
always_border_caption_text: boolean;
specify_caption_opacity: boolean;
Expand Down
27 changes: 15 additions & 12 deletions client/src/stores/SettingsStore.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,12 +11,12 @@ interface ILocalClientSettings {
showed_panel_last_time: boolean;
selected_twitter_account_id: number | null;
saved_twitter_hashtags: string[];
tv_streaming_quality: '1080p-60fps' | '1080p' | '810p' | '720p' | '540p' | '480p' | '360p' | '240p';
tv_data_saver_mode: boolean;
tv_low_latency_mode: boolean;
panel_display_state: 'RestorePreviousState' | 'AlwaysDisplay' | 'AlwaysFold';
tv_panel_active_tab: 'Program' | 'Channel' | 'Comment' | 'Twitter';
tv_channel_selection_requires_alt_key: boolean;
tv_streaming_quality: '1080p-60fps' | '1080p' | '810p' | '720p' | '540p' | '480p' | '360p' | '240p';
tv_data_saver_mode: boolean;
tv_low_latency_mode: boolean;
caption_font: string;
always_border_caption_text: boolean;
specify_caption_opacity: boolean;
Expand Down Expand Up @@ -54,12 +54,12 @@ const sync_settings_keys = [
// showed_panel_last_time: 同期無効
// selected_twitter_account_id: 同期無効
'saved_twitter_hashtags',
// tv_streaming_quality: 同期無効
// tv_data_saver_mode: 同期無効
// tv_low_latency_mode: 同期無効
'panel_display_state',
'tv_panel_active_tab',
'tv_channel_selection_requires_alt_key',
// tv_streaming_quality: 同期無効
// tv_data_saver_mode: 同期無効
// tv_low_latency_mode: 同期無効
'caption_font',
'always_border_caption_text',
'specify_caption_opacity',
Expand Down Expand Up @@ -105,19 +105,22 @@ const default_settings: ILocalClientSettings = {

// ***** 設定 → 全般 *****

// テレビのデフォルトのストリーミング画質 (Default: 1080p) (同期無効)
tv_streaming_quality: '1080p',
// テレビを通信節約モードで視聴する (Default: オフ) (同期無効)
tv_data_saver_mode: false,
// テレビを低遅延で視聴する (Default: 低遅延で視聴する) (同期無効)
tv_low_latency_mode: true,
// デフォルトのパネルの表示状態 (Default: 前回の状態を復元する)
panel_display_state: 'RestorePreviousState',
// テレビをみるときにデフォルトで表示されるパネルのタブ (Default: 番組情報タブ)
tv_panel_active_tab: 'Program',
// チャンネル選局のキーボードショートカットを Alt or Option + 数字キー/テンキーに変更する (Default: オフ)
tv_channel_selection_requires_alt_key: false,

// ***** 設定 → 画質 *****

// テレビのデフォルトのストリーミング画質 (Default: 1080p) (同期無効)
tv_streaming_quality: '1080p',
// テレビを通信節約モードで視聴する (Default: オフ) (同期無効)
tv_data_saver_mode: false,
// テレビを低遅延で視聴する (Default: 低遅延で視聴する) (同期無効)
tv_low_latency_mode: true,

// ***** 設定 → 字幕 *****

// 字幕のフォント (Default: Windows TV 丸ゴシック)
Expand Down
8 changes: 8 additions & 0 deletions client/src/views/Settings/Base.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,14 @@
<v-list-item-title>全般</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-list-item link color="primary" class="px-4 mb-1" to="/settings/quality">
<v-list-item-icon class="mr-4">
<Icon icon="fluent:video-clip-multiple-16-filled" width="26px" />
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title>画質</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-list-item link color="primary" class="px-4 mb-1" to="/settings/caption">
<v-list-item-icon class="mr-4">
<Icon icon="fluent:subtitles-16-filled" width="26px" />
Expand Down
88 changes: 1 addition & 87 deletions client/src/views/Settings/General.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,49 +9,6 @@
<span class="ml-3">全般</span>
</h2>
<div class="settings__content">
<div class="settings__item settings__item--sync-disabled">
<div class="settings__item-heading">テレビのデフォルトのストリーミング画質</div>
<div class="settings__item-label">
テレビをライブストリーミングするときのデフォルトの画質を設定します。<br>
ストリーミング画質はプレイヤーの設定からいつでも切り替えられます。<br>
</div>
<div class="settings__item-label">
[1080p (60fps)] は、通常 30fps (60i) の映像を補間し、より滑らか（ぬるぬる）な映像で視聴できます！<br>
[1080p (60fps)] で視聴するときは、サーバー設定の [利用するエンコーダー] をハードウェアエンコーダーに設定してください。FFmpeg (ソフトウェアエンコーダー) では、視聴に支障が出ることがあります。<br>
</div>
<v-select class="settings__item-form" outlined hide-details :dense="is_form_dense"
:items="tv_streaming_quality" v-model="settingsStore.settings.tv_streaming_quality">
</v-select>
</div>
<div class="settings__item settings__item--switch settings__item--sync-disabled"
:class="{'settings__item--disabled': PlayerUtils.isHEVCVideoSupported() === false}">
<label class="settings__item-heading" for="tv_data_saver_mode">テレビを通信節約モードで視聴する</label>
<label class="settings__item-label" for="tv_data_saver_mode">
通信節約モードでは、H.265 / HEVC という圧縮率の高いコーデックを使い、画質はほぼそのまま、通信量を通常の 1/2 程度に抑えながら視聴できます！<br>
通信節約モードで視聴するときは、サーバー設定の [利用するエンコーダー] をハードウェアエンコーダーに設定してください。FFmpeg (ソフトウェアエンコーダー) では、視聴に支障が出る可能性が高いです。<br>
<p class="mt-1 mb-0 error--text lighten-1" v-if="PlayerUtils.isHEVCVideoSupported() === false && Utils.isFirefox() === false">
このデバイスでは通信節約モードがサポートされていません。
</p>
<p class="mt-1 mb-0 error--text lighten-1" v-if="PlayerUtils.isHEVCVideoSupported() === false && Utils.isFirefox() === true">
お使いの Firefox ブラウザでは通信節約モードがサポートされていません。
</p>
</label>
<v-switch class="settings__item-switch" id="tv_data_saver_mode" inset hide-details
v-model="settingsStore.settings.tv_data_saver_mode" :disabled="PlayerUtils.isHEVCVideoSupported() === false">
</v-switch>
</div>
<div class="settings__item settings__item--switch settings__item--sync-disabled">
<label class="settings__item-heading" for="tv_low_latency_mode">テレビを低遅延で視聴する</label>
<label class="settings__item-label" for="tv_low_latency_mode">
低遅延ストリーミングをオンにすると、<b>放送波との遅延を最短 0.9 秒に抑えて視聴できます！</b><br>
また、約 3 秒以上遅延したときに少しだけ再生速度を早める (1.1x) ことで、滑らかにストリーミングの遅延を取り戻します。<br>
宅外視聴などのネットワークが不安定になりがちな環境では、低遅延ストリーミングをオフにしてみると、映像のカクつきを改善できるかもしれません。<br>
</label>
<v-switch class="settings__item-switch" id="tv_low_latency_mode" inset hide-details
v-model="settingsStore.settings.tv_low_latency_mode">
</v-switch>
</div>
<v-divider class="mt-6"></v-divider>
<div class="settings__item">
<div class="settings__item-heading">ピン留め中チャンネルの並び替え</div>
<div class="settings__item-label">
Expand Down Expand Up @@ -144,31 +101,9 @@ import { defineComponent } from 'vue';
import PinnedChannelSettings from '@/components/Settings/PinnedChannelSettings.vue';
import Message from '@/message';
import useSettingsStore from '@/stores/SettingsStore';
import Utils, { PlayerUtils } from '@/utils';
import Utils from '@/utils';
import SettingsBase from '@/views/Settings/Base.vue';
const QUALITY_H264 = [
{text: '1080p (60fps) (約4.50GB/h / 平均10.0Mbps)', value: '1080p-60fps'},
{text: '1080p (約4.50GB/h / 平均10.0Mbps)', value: '1080p'},
{text: '810p (約2.62GB/h / 平均5.8Mbps)', value: '810p'},
{text: '720p (約2.18GB/h / 平均4.9Mbps)', value: '720p'},
{text: '540p (約1.52GB/h / 平均3.4Mbps)', value: '540p'},
{text: '480p (約1.06GB/h / 平均2.3Mbps)', value: '480p'},
{text: '360p (約0.60GB/h / 平均1.3Mbps)', value: '360p'},
{text: '240p (約0.35GB/h / 平均0.8Mbps)', value: '240p'},
];
const QUALITY_H265 = [
{text: '1080p (60fps) (約1.80GB/h / 平均4.0Mbps)', value: '1080p-60fps'},
{text: '1080p (約1.37GB/h / 平均3.0Mbps)', value: '1080p'},
{text: '810p (約1.05GB/h / 平均2.3Mbps)', value: '810p'},
{text: '720p (約0.82GB/h / 平均1.8Mbps)', value: '720p'},
{text: '540p (約0.53GB/h / 平均1.2Mbps)', value: '540p'},
{text: '480p (約0.46GB/h / 平均1.0Mbps)', value: '480p'},
{text: '360p (約0.30GB/h / 平均0.7Mbps)', value: '360p'},
{text: '240p (約0.20GB/h / 平均0.4Mbps)', value: '240p'},
];
export default defineComponent({
name: 'Settings-General',
components: {
Expand All @@ -180,14 +115,10 @@ export default defineComponent({
// ユーティリティをテンプレートで使えるように
Utils: Utils,
PlayerUtils: PlayerUtils,
// フォームを小さくするかどうか
is_form_dense: Utils.isSmartphoneHorizontal(),
// テレビのデフォルトのストリーミング画質の選択肢
tv_streaming_quality: QUALITY_H264,
// ピン留め中チャンネルの並び替え設定のモーダルを表示するか
pinned_channel_settings_modal: false,
Expand All @@ -213,23 +144,6 @@ export default defineComponent({
computed: {
...mapStores(useSettingsStore),
},
watch: {
'settingsStore.settings.tv_data_saver_mode': {
immediate: true,
handler(val: boolean) {
if (val === true) {
this.tv_streaming_quality = QUALITY_H265;
} else {
this.tv_streaming_quality = QUALITY_H264;
}
},
}
},
created() {
if (this.settingsStore.settings.tv_data_saver_mode === true) {
this.tv_streaming_quality = QUALITY_H265;
}
},
methods: {
// 設定データをエクスポートする
Expand Down
8 changes: 8 additions & 0 deletions client/src/views/Settings/Index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,14 @@
<v-list-item-title>全般</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-list-item link color="primary" class="px-4" to="/settings/quality">
<v-list-item-icon class="mr-4">
<Icon icon="fluent:video-clip-multiple-16-filled" width="26px" />
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title>画質</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-list-item link color="primary" class="px-4" to="/settings/caption">
<v-list-item-icon class="mr-4">
<Icon icon="fluent:subtitles-16-filled" width="26px" />
Expand Down
Loading

0 comments on commit bfb0558

Please sign in to comment.