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

This commit is contained in:
mattyatea 2023-09-18 08:24:40 +09:00
parent 8752160645
commit 368afeba34
6 changed files with 25 additions and 2 deletions

2
locales/index.d.ts vendored
View file

@ -1032,6 +1032,7 @@ export interface Locale {
"video": string; "video": string;
"videos": string; "videos": string;
"dataSaver": string; "dataSaver": string;
"cellularWithDataSaver": string;
"accountMigration": string; "accountMigration": string;
"accountMoved": string; "accountMoved": string;
"accountMovedShort": string; "accountMovedShort": string;
@ -1656,6 +1657,7 @@ export interface Locale {
"contributors": string; "contributors": string;
"allContributors": string; "allContributors": string;
"source": string; "source": string;
"forksource": string;
"translation": string; "translation": string;
"donate": string; "donate": string;
"morePatrons": string; "morePatrons": string;

View file

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

View file

@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template> <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"> <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"/> <MkUserOnlineIndicator v-if="indicator" :class="$style.indicator" :user="user"/>
<div v-if="user.isCat" :class="[$style.ears]"> <div v-if="user.isCat" :class="[$style.ears]">
<div :class="$style.earLeft"> <div :class="$style.earLeft">

View file

@ -114,6 +114,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkSwitch v-model="disableDrawer">{{ i18n.ts.disableDrawer }}</MkSwitch> <MkSwitch v-model="disableDrawer">{{ i18n.ts.disableDrawer }}</MkSwitch>
<MkSwitch v-model="forceShowAds">{{ i18n.ts.forceShowAds }}</MkSwitch> <MkSwitch v-model="forceShowAds">{{ i18n.ts.forceShowAds }}</MkSwitch>
<MkSwitch v-model="enableDataSaverMode">{{ i18n.ts.dataSaver }}</MkSwitch> <MkSwitch v-model="enableDataSaverMode">{{ i18n.ts.dataSaver }}</MkSwitch>
<MkSwitch v-model="enableCellularWithDataSaver">{{ i18n.ts.cellularWithDataSaver }}</MkSwitch>
</div> </div>
<div> <div>
<MkRadios v-model="emojiStyle"> <MkRadios v-model="emojiStyle">
@ -228,6 +229,7 @@ const disableShowingAnimatedImages = computed(defaultStore.makeGetterSetter('dis
const forceShowAds = computed(defaultStore.makeGetterSetter('forceShowAds')); const forceShowAds = computed(defaultStore.makeGetterSetter('forceShowAds'));
const loadRawImages = computed(defaultStore.makeGetterSetter('loadRawImages')); 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 imageNewTab = computed(defaultStore.makeGetterSetter('imageNewTab'));
const nsfw = computed(defaultStore.makeGetterSetter('nsfw')); const nsfw = computed(defaultStore.makeGetterSetter('nsfw'));
const showFixedPostForm = computed(defaultStore.makeGetterSetter('showFixedPostForm')); const showFixedPostForm = computed(defaultStore.makeGetterSetter('showFixedPostForm'));

View file

@ -204,6 +204,10 @@ export const defaultStore = markRaw(new Storage('base', {
where: 'device', where: 'device',
default: false, default: false,
}, },
enableCellularWithDataSaver: {
where: 'device',
default: false,
},
disableShowingAnimatedImages: { disableShowingAnimatedImages: {
where: 'device', where: 'device',
default: window.matchMedia('(prefers-reduced-motion)').matches, default: window.matchMedia('(prefers-reduced-motion)').matches,

View file

@ -115,6 +115,20 @@ const XAnnouncements = defineAsyncComponent(() => import('@/ui/_common_/announce
const DESKTOP_THRESHOLD = 1100; const DESKTOP_THRESHOLD = 1100;
const MOBILE_THRESHOLD = 500; 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' // UI deviceKind === 'desktop'
const isDesktop = ref(window.innerWidth >= DESKTOP_THRESHOLD); const isDesktop = ref(window.innerWidth >= DESKTOP_THRESHOLD);
const isMobile = ref(deviceKind === 'smartphone' || window.innerWidth <= MOBILE_THRESHOLD); const isMobile = ref(deviceKind === 'smartphone' || window.innerWidth <= MOBILE_THRESHOLD);