From 5bf7813b2d6f6b34043d2dc4a9c200eea591a056 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E3=81=8B=E3=81=A3=E3=81=93=E3=81=8B=E3=82=8A?= <67428053+kakkokari-gtyih@users.noreply.github.com> Date: Sun, 3 Dec 2023 10:58:42 +0900 Subject: [PATCH] =?UTF-8?q?enhance/feat(frontend):=20=E3=83=87=E3=83=BC?= =?UTF-8?q?=E3=82=BF=E3=82=BB=E3=83=BC=E3=83=90=E3=83=BC=E3=81=AE=E6=94=B9?= =?UTF-8?q?=E8=89=AF=E3=83=BB=E5=BC=B7=E5=8C=96=20(#12526)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * enhance(frontend): データセーバーを個別で設定できるように * Update Changelog * fix design * (fix) 設定が当たらない * fix test（無理やり感） * (fix) 設定がない状態ですべて有効・向操作が効かない * fix * tweak --------- Co-authored-by: syuilo --- CHANGELOG.md | 3 + locales/index.d.ts | 20 +++++++ locales/ja-JP.yml | 16 ++++++ .../frontend/src/components/MkCode.core.vue | 2 +- packages/frontend/src/components/MkCode.vue | 49 +++++++++++++--- .../frontend/src/components/MkMediaImage.vue | 8 +-- .../frontend/src/components/MkMediaVideo.vue | 6 +- .../frontend/src/components/MkUrlPreview.vue | 2 +- .../src/components/global/MkAvatar.vue | 2 +- .../frontend/src/pages/settings/general.vue | 57 ++++++++++++++++++- .../pages/settings/preferences-backups.vue | 2 +- packages/frontend/src/store.ts | 13 +++-- packages/frontend/test/init.ts | 12 +++- 13 files changed, 166 insertions(+), 26 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 07b7cc6b9..99ef3a36a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -23,6 +23,7 @@ ### Client - Feat: 今日誕生日のフォロー中のユーザーを一覧表示できるウィジェットを追加 +- Feat: データセーバーでコードハイライトの読み込みを削減できるように - Enhance: 絵文字のオートコンプリート機能強化 #12364 - Enhance: ユーザーのRawデータを表示するページが復活 - Enhance: リアクション選択時に音を鳴らせるように @@ -31,6 +32,8 @@ - Enhance: Shareページで投稿を完了すると、親ウィンドウ（親フレーム）にpostMessageするように - Enhance: チャンネル、クリップ、ページ、Play、ギャラリーにURLのコピーボタンを設置 #11305 - Enhance: ノートプレビューに「内容を隠す」が反映されるように +- Enhance: データセーバーの適用範囲を個別で設定できるように + - 従来のデータセーバーの設定はリセットされます - fix: 「設定のバックアップ」で一部の項目がバックアップに含まれていなかった問題を修正 - Fix: ウィジェットのジョブキューにて音声の発音方法変更に追従できていなかったのを修正 #12367 - Enhance: 絵文字の詳細ページに記載される情報を追加 diff --git a/locales/index.d.ts b/locales/index.d.ts index a8f54e2e1..846a6d503 100644 --- a/locales/index.d.ts +++ b/locales/index.d.ts @@ -1171,6 +1171,8 @@ export interface Locale { "signupPendingError": string; "cwNotationRequired": string; "doReaction": string; + "code": string; + "reloadRequiredToApplySettings": string; "_announcement": { "forExistingUsers": string; "forExistingUsersDescription": string; @@ -2502,6 +2504,24 @@ export interface Locale { }; }; }; + "_dataSaver": { + "_media": { + "title": string; + "description": string; + }; + "_avatar": { + "title": string; + "description": string; + }; + "_urlPreview": { + "title": string; + "description": string; + }; + "_code": { + "title": string; + "description": string; + }; + }; } declare const locales: { [lang: string]: Locale; diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml index 04fb1f947..0d84440bc 100644 --- a/locales/ja-JP.yml +++ b/locales/ja-JP.yml @@ -1168,6 +1168,8 @@ useGroupedNotifications: "通知をグルーピングして表示する" signupPendingError: "メールアドレスの確認中に問題が発生しました。リンクの有効期限が切れている可能性があります。" cwNotationRequired: "「内容を隠す」がオンの場合は注釈の記述が必要です。" doReaction: "リアクションする" +code: "コード" +reloadRequiredToApplySettings: "設定の反映にはリロードが必要です。" _announcement: forExistingUsers: "既存ユーザーのみ" @@ -2389,3 +2391,17 @@ _externalResourceInstaller: _themeInstallFailed: title: "テーマのインストールに失敗しました" description: "テーマのインストール中に問題が発生しました。もう一度お試しください。エラーの詳細はJavascriptコンソールをご覧ください。" + +_dataSaver: + _media: + title: "メディアの読み込み" + description: "画像・動画が自動で読み込まれるのを防止します。隠れている画像・動画はタップすると読み込まれます。" + _avatar: + title: "アイコン画像" + description: "アイコン画像のアニメーションが停止します。アニメーション画像は通常の画像よりファイルサイズが大きいことがあるので、データ通信量をさらに削減できます。" + _urlPreview: + title: "URLプレビューのサムネイル" + description: "URLプレビューのサムネイル画像が読み込まれなくなります。" + _code: + title: "コードハイライト" + description: "MFMなどでコードハイライト記法が使われている場合、タップするまで読み込まれなくなります。コードハイライトではハイライトする言語ごとにその定義ファイルを読み込む必要がありますが、それらが自動で読み込まれなくなるため、通信量の削減が見込めます。" diff --git a/packages/frontend/src/components/MkCode.core.vue b/packages/frontend/src/components/MkCode.core.vue index 4ec354041..eee08b2f0 100644 --- a/packages/frontend/src/components/MkCode.core.vue +++ b/packages/frontend/src/components/MkCode.core.vue @@ -62,7 +62,7 @@ watch(() => props.lang, (to) => { padding: 1em; margin: .5em 0; overflow: auto; - border-radius: .3em; + border-radius: 8px; & pre, & code { diff --git a/packages/frontend/src/components/MkCode.vue b/packages/frontend/src/components/MkCode.vue index b39e6ff23..cb0eef054 100644 --- a/packages/frontend/src/components/MkCode.vue +++ b/packages/frontend/src/components/MkCode.vue @@ -4,18 +4,26 @@ SPDX-License-Identifier: AGPL-3.0-only --> @@ -36,4 +46,27 @@ const XCode = defineAsyncComponent(() => import('@/components/MkCode.core.vue')) padding: .1em; border-radius: .3em; } + +.codePlaceholderRoot { + display: block; + width: 100%; + background: none; + border: none; + outline: none; + font: inherit; + color: inherit; + cursor: pointer; + + box-sizing: border-box; + border-radius: 8px; + padding: 24px; + margin-top: 4px; + color: #D4D4D4; + background: #1E1E1E; +} + +.codePlaceholderContainer { + text-align: center; + font-size: 0.8em; +} diff --git a/packages/frontend/src/components/MkMediaImage.vue b/packages/frontend/src/components/MkMediaImage.vue index cc1c28a9e..003c0979c 100644 --- a/packages/frontend/src/components/MkMediaImage.vue +++ b/packages/frontend/src/components/MkMediaImage.vue @@ -19,7 +19,7 @@ SPDX-License-Identifier: AGPL-3.0-only >
- {{ i18n.ts.sensitive }}{{ defaultStore.state.enableDataSaverMode ? ` (${i18n.ts.image}${image.size ? ' ' + bytes(image.size) : ''})` : '' }} - {{ defaultStore.state.enableDataSaverMode && image.size ? bytes(image.size) : i18n.ts.image }} + {{ i18n.ts.sensitive }}{{ defaultStore.state.dataSaver.media ? ` (${i18n.ts.image}${image.size ? ' ' + bytes(image.size) : ''})` : '' }} + {{ defaultStore.state.dataSaver.media && image.size ? bytes(image.size) : i18n.ts.image }} {{ i18n.ts.clickToShow }}
@@ -94,7 +94,7 @@ function onclick() { // Plugin:register_note_view_interruptor を使って書き換えられる可能性があるためwatchする watch(() => props.image, () => { - hide = (defaultStore.state.nsfw === 'force' || defaultStore.state.enableDataSaverMode) ? true : (props.image.isSensitive && defaultStore.state.nsfw !== 'ignore'); + hide = (defaultStore.state.nsfw === 'force' || defaultStore.state.dataSaver.media) ? true : (props.image.isSensitive && defaultStore.state.nsfw !== 'ignore'); }, { deep: true, immediate: true, diff --git a/packages/frontend/src/components/MkMediaVideo.vue b/packages/frontend/src/components/MkMediaVideo.vue index b6e8f1ff2..f9dba0b15 100644 --- a/packages/frontend/src/components/MkMediaVideo.vue +++ b/packages/frontend/src/components/MkMediaVideo.vue @@ -7,8 +7,8 @@ SPDX-License-Identifier: AGPL-3.0-only
- {{ i18n.ts.sensitive }}{{ defaultStore.state.enableDataSaverMode ? ` (${i18n.ts.video}${video.size ? ' ' + bytes(video.size) : ''})` : '' }} - {{ defaultStore.state.enableDataSaverMode && video.size ? bytes(video.size) : i18n.ts.video }} + {{ i18n.ts.sensitive }}{{ defaultStore.state.dataSaver.media ? ` (${i18n.ts.video}${video.size ? ' ' + bytes(video.size) : ''})` : '' }} + {{ defaultStore.state.dataSaver.media && video.size ? bytes(video.size) : i18n.ts.video }} {{ i18n.ts.clickToShow }}
@@ -43,7 +43,7 @@ const props = defineProps<{ video: Misskey.entities.DriveFile; }>(); -const hide = ref((defaultStore.state.nsfw === 'force' || defaultStore.state.enableDataSaverMode) ? true : (props.video.isSensitive && defaultStore.state.nsfw !== 'ignore')); +const hide = ref((defaultStore.state.nsfw === 'force' || defaultStore.state.dataSaver.media) ? true : (props.video.isSensitive && defaultStore.state.nsfw !== 'ignore')); const videoEl = shallowRef(); diff --git a/packages/frontend/src/components/MkUrlPreview.vue b/packages/frontend/src/components/MkUrlPreview.vue index a460f3ea0..d3c486a98 100644 --- a/packages/frontend/src/components/MkUrlPreview.vue +++ b/packages/frontend/src/components/MkUrlPreview.vue @@ -45,7 +45,7 @@ SPDX-License-Identifier: AGPL-3.0-only
-
+
diff --git a/packages/frontend/src/components/global/MkAvatar.vue b/packages/frontend/src/components/global/MkAvatar.vue index e23883487..51a454b2c 100644 --- a/packages/frontend/src/components/global/MkAvatar.vue +++ b/packages/frontend/src/components/global/MkAvatar.vue @@ -83,7 +83,7 @@ const bound = $computed(() => props.link ? { to: userPage(props.user), target: props.target } : {}); -const url = $computed(() => (defaultStore.state.disableShowingAnimatedImages || defaultStore.state.enableDataSaverMode) +const url = $computed(() => (defaultStore.state.disableShowingAnimatedImages || defaultStore.state.dataSaver.avatar) ? getStaticImageUrl(props.user.avatarUrl) : props.user.avatarUrl); diff --git a/packages/frontend/src/pages/settings/general.vue b/packages/frontend/src/pages/settings/general.vue index 313b5efc4..717021abd 100644 --- a/packages/frontend/src/pages/settings/general.vue +++ b/packages/frontend/src/pages/settings/general.vue @@ -122,7 +122,6 @@ SPDX-License-Identifier: AGPL-3.0-only {{ i18n.ts.useSystemFont }} {{ i18n.ts.disableDrawer }} {{ i18n.ts.forceShowAds }} - {{ i18n.ts.dataSaver }}
@@ -165,6 +164,37 @@ SPDX-License-Identifier: AGPL-3.0-only + + + + +
+ {{ i18n.ts.reloadRequiredToApplySettings }} + +
+ {{ i18n.ts.enableAll }} + {{ i18n.ts.disableAll }} +
+
+ + {{ i18n.ts._dataSaver._media.title }} + + + + {{ i18n.ts._dataSaver._avatar.title }} + + + + {{ i18n.ts._dataSaver._urlPreview.title }} + + + + {{ i18n.ts._dataSaver._code.title }} + + +
+
+
@@ -198,6 +228,7 @@ import MkButton from '@/components/MkButton.vue'; import FormSection from '@/components/form/section.vue'; import FormLink from '@/components/form/link.vue'; import MkLink from '@/components/MkLink.vue'; +import MkInfo from '@/components/MkInfo.vue'; import { langs } from '@/config.js'; import { defaultStore } from '@/store.js'; import * as os from '@/os.js'; @@ -211,6 +242,7 @@ import { claimAchievement } from '@/scripts/achievements.js'; const lang = ref(miLocalStorage.getItem('lang')); const fontSize = ref(miLocalStorage.getItem('fontSize')); const useSystemFont = ref(miLocalStorage.getItem('useSystemFont') != null); +const dataSaver = ref(defaultStore.state.dataSaver); async function reloadAsk() { const { canceled } = await os.confirm({ @@ -241,7 +273,6 @@ const disableShowingAnimatedImages = computed(defaultStore.makeGetterSetter('dis const forceShowAds = computed(defaultStore.makeGetterSetter('forceShowAds')); const loadRawImages = computed(defaultStore.makeGetterSetter('loadRawImages')); const highlightSensitiveMedia = computed(defaultStore.makeGetterSetter('highlightSensitiveMedia')); -const enableDataSaverMode = computed(defaultStore.makeGetterSetter('enableDataSaverMode')); const imageNewTab = computed(defaultStore.makeGetterSetter('imageNewTab')); const nsfw = computed(defaultStore.makeGetterSetter('nsfw')); const showFixedPostForm = computed(defaultStore.makeGetterSetter('showFixedPostForm')); @@ -374,6 +405,28 @@ function testNotification(): void { }, 300); } +function enableAllDataSaver() { + const g = { ...defaultStore.state.dataSaver }; + + Object.keys(g).forEach((key) => { g[key] = true; }); + + dataSaver.value = g; +} + +function disableAllDataSaver() { + const g = { ...defaultStore.state.dataSaver }; + + Object.keys(g).forEach((key) => { g[key] = false; }); + + dataSaver.value = g; +} + +watch(dataSaver, (to) => { + defaultStore.set('dataSaver', to); +}, { + deep: true, +}); + const headerActions = $computed(() => []); const headerTabs = $computed(() => []); diff --git a/packages/frontend/src/pages/settings/preferences-backups.vue b/packages/frontend/src/pages/settings/preferences-backups.vue index 35435238f..036299885 100644 --- a/packages/frontend/src/pages/settings/preferences-backups.vue +++ b/packages/frontend/src/pages/settings/preferences-backups.vue @@ -71,7 +71,7 @@ const defaultStoreSaveKeys: (keyof typeof defaultStore['state'])[] = [ 'advancedMfm', 'loadRawImages', 'imageNewTab', - 'enableDataSaverMode', + 'dataSaver', 'disableShowingAnimatedImages', 'emojiStyle', 'disableDrawer', diff --git a/packages/frontend/src/store.ts b/packages/frontend/src/store.ts index 70d2cf402..8459a5721 100644 --- a/packages/frontend/src/store.ts +++ b/packages/frontend/src/store.ts @@ -223,10 +223,6 @@ export const defaultStore = markRaw(new Storage('base', { where: 'device', default: false, }, - enableDataSaverMode: { - where: 'device', - default: false, - }, disableShowingAnimatedImages: { where: 'device', default: window.matchMedia('(prefers-reduced-motion)').matches, @@ -403,6 +399,15 @@ export const defaultStore = markRaw(new Storage('base', { where: 'device', default: true, }, + dataSaver: { + where: 'device', + default: { + media: false, + avatar: false, + urlPreview: false, + code: false, + } as Record, + }, sound_masterVolume: { where: 'device', diff --git a/packages/frontend/test/init.ts b/packages/frontend/test/init.ts index ab5e84b53..dfc02378d 100644 --- a/packages/frontend/test/init.ts +++ b/packages/frontend/test/init.ts @@ -21,7 +21,17 @@ vi.stubGlobal('WebSocket', class WebSocket extends EventTarget { static CLOSING vi.mock('@/store.js', () => { return { defaultStore: { - state: {}, + state: { + + // なんかtestがうまいこと動かないのでここに書く + dataSaver: { + media: false, + avatar: false, + urlPreview: false, + code: false, + }, + + }, }, }; });