From 368afeba34e2954e75baeae348b38c486650909d Mon Sep 17 00:00:00 2001
From: mattyatea <mattyacocacora0@gmail.com>
Date: Mon, 18 Sep 2023 08:24:40 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=E3=83=87=E3=83=BC=E3=82=BF=E3=82=BB?=
 =?UTF-8?q?=E3=83=BC=E3=83=90=E3=83=BC=E5=BC=B7=E5=8C=96(=E3=81=97?=
 =?UTF-8?q?=E3=81=9F=E3=81=8B=E3=81=A3=E3=81=9F)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 locales/index.d.ts                                 |  2 ++
 locales/ja-JP.yml                                  |  1 +
 .../frontend/src/components/global/MkAvatar.vue    |  2 +-
 packages/frontend/src/pages/settings/general.vue   |  4 +++-
 packages/frontend/src/store.ts                     |  4 ++++
 packages/frontend/src/ui/universal.vue             | 14 ++++++++++++++
 6 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/locales/index.d.ts b/locales/index.d.ts
index ac714258e2..2f8437f52a 100644
--- a/locales/index.d.ts
+++ b/locales/index.d.ts
@@ -1032,6 +1032,7 @@ export interface Locale {
     "video": string;
     "videos": string;
     "dataSaver": string;
+    "cellularWithDataSaver": string;
     "accountMigration": string;
     "accountMoved": string;
     "accountMovedShort": string;
@@ -1656,6 +1657,7 @@ export interface Locale {
         "contributors": string;
         "allContributors": string;
         "source": string;
+        "forksource": string;
         "translation": string;
         "donate": string;
         "morePatrons": string;
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 71c04873ad..b92aa0ec81 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -1029,6 +1029,7 @@ noteIdOrUrl: "ノートIDまたはURL"
 video: "動画"
 videos: "動画"
 dataSaver: "データセーバー"
+cellularWithDataSaver: "モバイルデータ通信でデータセーバーをオンにする"
 accountMigration: "アカウントの移行"
 accountMoved: "このユーザーは新しいアカウントに移行しました："
 accountMovedShort: "このアカウントは移行されています"
diff --git a/packages/frontend/src/components/global/MkAvatar.vue b/packages/frontend/src/components/global/MkAvatar.vue
index 7c344ccf7c..788e4ec9af 100644
--- a/packages/frontend/src/components/global/MkAvatar.vue
+++ b/packages/frontend/src/components/global/MkAvatar.vue
@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <template>
 <component :is="link ? MkA : 'span'" v-user-preview="preview ? user.id : undefined" v-bind="bound" class="_noSelect" :class="[$style.root, { [$style.animation]: animation, [$style.cat]: user.isCat, [$style.square]: squareAvatars }]" :style="{ color }" :title="acct(user)" @click="onClick">
-	<MkImgWithBlurhash :class="$style.inner" :src="url" :hash="user?.avatarBlurhash" :cover="true" :onlyAvgColor="true"/>
+	<MkImgWithBlurhash :class="$style.inner" :src="defaultStore.state.enableDataSaverMode ? undefined : url" :hash="user?.avatarBlurhash" :cover="true" :onlyAvgColor="true"/>
 	<MkUserOnlineIndicator v-if="indicator" :class="$style.indicator" :user="user"/>
 	<div v-if="user.isCat" :class="[$style.ears]">
 		<div :class="$style.earLeft">
diff --git a/packages/frontend/src/pages/settings/general.vue b/packages/frontend/src/pages/settings/general.vue
index b486e6d80f..e5b0d7b63f 100644
--- a/packages/frontend/src/pages/settings/general.vue
+++ b/packages/frontend/src/pages/settings/general.vue
@@ -114,6 +114,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<MkSwitch v-model="disableDrawer">{{ i18n.ts.disableDrawer }}</MkSwitch>
 				<MkSwitch v-model="forceShowAds">{{ i18n.ts.forceShowAds }}</MkSwitch>
 				<MkSwitch v-model="enableDataSaverMode">{{ i18n.ts.dataSaver }}</MkSwitch>
+				<MkSwitch v-model="enableCellularWithDataSaver">{{ i18n.ts.cellularWithDataSaver }}</MkSwitch>
 			</div>
 			<div>
 				<MkRadios v-model="emojiStyle">
@@ -227,7 +228,8 @@ const disableDrawer = computed(defaultStore.makeGetterSetter('disableDrawer'));
 const disableShowingAnimatedImages = computed(defaultStore.makeGetterSetter('disableShowingAnimatedImages'));
 const forceShowAds = computed(defaultStore.makeGetterSetter('forceShowAds'));
 const loadRawImages = computed(defaultStore.makeGetterSetter('loadRawImages'));
-const enableDataSaverMode = computed(defaultStore.makeGetterSetter('enableDataSaverMode'));
+const enableDataSaverMode = computed(defaultStore.makeGetterSetter('enableDataSaverMode')) ;
+const enableCellularWithDataSaver = computed(defaultStore.makeGetterSetter('enableCellularWithDataSaver'));
 const imageNewTab = computed(defaultStore.makeGetterSetter('imageNewTab'));
 const nsfw = computed(defaultStore.makeGetterSetter('nsfw'));
 const showFixedPostForm = computed(defaultStore.makeGetterSetter('showFixedPostForm'));
diff --git a/packages/frontend/src/store.ts b/packages/frontend/src/store.ts
index 787a584f83..06aabba7f6 100644
--- a/packages/frontend/src/store.ts
+++ b/packages/frontend/src/store.ts
@@ -204,6 +204,10 @@ export const defaultStore = markRaw(new Storage('base', {
 		where: 'device',
 		default: false,
 	},
+	enableCellularWithDataSaver: {
+		where: 'device',
+		default: false,
+	},
 	disableShowingAnimatedImages: {
 		where: 'device',
 		default: window.matchMedia('(prefers-reduced-motion)').matches,
diff --git a/packages/frontend/src/ui/universal.vue b/packages/frontend/src/ui/universal.vue
index d9cb81b5ef..73d78bc3b6 100644
--- a/packages/frontend/src/ui/universal.vue
+++ b/packages/frontend/src/ui/universal.vue
@@ -115,6 +115,20 @@ const XAnnouncements = defineAsyncComponent(() => import('@/ui/_common_/announce
 const DESKTOP_THRESHOLD = 1100;
 const MOBILE_THRESHOLD = 500;
 
+onMounted(() => {
+  if (
+      window.navigator.connection.type === "cellular" &&
+      !defaultStore.state.enableDataSaverMode &&
+      defaultStore.state.enableCellularWithDataSaver
+  ) {
+    defaultStore.state.enableDataSaverMode = true;
+  } else if (
+      window.navigator.connection.type !== "cellular" &&
+      defaultStore.state.enableDataSaverMode &&
+      !defaultStore.state.enableCellularWithDataSaver)  {
+    defaultStore.state.enableDataSaverMode = false;
+  }
+});
 // デスクトップでウィンドウを狭くしたときモバイルUIが表示されて欲しいことはあるので deviceKind === 'desktop' の判定は行わない
 const isDesktop = ref(window.innerWidth >= DESKTOP_THRESHOLD);
 const isMobile = ref(deviceKind === 'smartphone' || window.innerWidth <= MOBILE_THRESHOLD);