feat: データセーバー強化(したかった)

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;

locales/ja-JP.yml

@@ -1029,6 +1029,7 @@ noteIdOrUrl: "ノートIDまたはURL"
 video: "動画"
 videos: "動画"
 dataSaver: "データセーバー"
+cellularWithDataSaver: "モバイルデータ通信でデータセーバーをオンにする"
 accountMigration: "アカウントの移行"
 accountMoved: "このユーザーは新しいアカウントに移行しました："
 accountMovedShort: "このアカウントは移行されています"

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">

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">
@@ -228,6 +229,7 @@ const disableShowingAnimatedImages = computed(defaultStore.makeGetterSetter('dis
 const forceShowAds = computed(defaultStore.makeGetterSetter('forceShowAds'));
 const loadRawImages = computed(defaultStore.makeGetterSetter('loadRawImages'));
 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'));

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,

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);