Mizah/mizzkey
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

2
packages/frontend/src/components/global/MkAvatar.vue
View file

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

4
packages/frontend/src/pages/settings/general.vue
View file

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

4
packages/frontend/src/store.ts
View file

@ -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,

14
packages/frontend/src/ui/universal.vue
View file

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