feat(client): データセーバーモードの追加

CHANGELOG.md

@@ -29,6 +29,8 @@
 		  - 左耳は上からおよそ 10%, 左からおよそ 20% の位置で決定します
 			- 右耳は上からおよそ 10%, 左からおよそ 80% の位置で決定します
 	- 「UIのアニメーションを減らす」 (`reduceAnimation`) で猫耳を撫でられなくなります
+- 「閲覧注意」設定の文言を「メディアの表示」に変更、設定によってデータ通信量を削減できる旨を追記
+- 非NSFWメディアが隠れている際にも「閲覧注意」が出てしまう問題を修正
 
 ### Server
 - ノート作成時のパフォーマンスを向上

locales/ja-JP.yml

@@ -1387,10 +1387,12 @@ _aboutMisskey:
   morePatrons: "他にも多くの方が支援してくれています。ありがとうございます🥰"
   patrons: "支援者"
 
-_nsfw:
-  respect: "閲覧注意のメディアは隠す"
-  ignore: "閲覧注意のメディアを隠さない"
-  force: "常にメディアを隠す"
+_mediaAppearance:
+  title: "メディアの表示"
+  respect: "閲覧注意のみ隠す"
+  ignore: "すべて表示"
+  force: "すべて隠す"
+  description: "メディアを隠すと、手動で表示するまではメディアが読み込まれないため、データ通信量を削減できます。"
 
 _instanceTicker:
   none: "表示しない"

packages/frontend/src/components/MkMediaImage.vue

@@ -3,8 +3,14 @@
 	<ImgWithBlurhash style="filter: brightness(0.5);" :hash="image.blurhash" :title="image.comment" :alt="image.comment"/>
 	<div :class="$style.hiddenText">
 		<div :class="$style.hiddenTextWrapper">
-			<b style="display: block;"><i class="ti ti-alert-triangle"></i> {{ i18n.ts.sensitive }}</b>
-			<span style="display: block;">{{ i18n.ts.clickToShow }}</span>
+			<template v-if="image.isSensitive">
+				<b style="display: block;"><i class="ti ti-alert-triangle"></i> {{ i18n.ts.sensitive }}</b>
+				<span style="display: block;">{{ i18n.ts.clickToShow }}</span>
+			</template>
+			<template v-else>
+				<b style="display: block;"><i class="ti ti-photo"></i> {{ bytes(image.size) }}</b>
+				<span style="display: block;">{{ i18n.ts.clickToShow }}</span>
+			</template>
 		</div>
 	</div>
 </div>
@@ -28,6 +34,7 @@
 import { watch } from 'vue';
 import * as misskey from 'misskey-js';
 import { getStaticImageUrl } from '@/scripts/media-proxy';
+import bytes from '@/filters/bytes';
 import ImgWithBlurhash from '@/components/MkImgWithBlurhash.vue';
 import { defaultStore } from '@/store';
 import { i18n } from '@/i18n';
@@ -38,6 +45,7 @@ const props = defineProps<{
 }>();
 
 let hide = $ref(true);
+let mediaAppearance = $ref(defaultStore.state.nsfw);
 let darkMode = $ref(defaultStore.state.darkMode);
 
 const url = (props.raw || defaultStore.state.loadRawImages)
@@ -53,6 +61,7 @@ watch(() => props.image, () => {
 	deep: true,
 	immediate: true,
 });
+
 </script>
 
 <style lang="scss" module>

packages/frontend/src/components/MkMediaVideo.vue

@@ -1,9 +1,13 @@
 <template>
 <div v-if="hide" class="icozogqfvdetwohsdglrbswgrejoxbdj" @click="hide = false">
-	<div>
+	<div v-if="video.isSensitive">
 		<b><i class="ti ti-alert-triangle"></i> {{ i18n.ts.sensitive }}</b>
 		<span>{{ i18n.ts.clickToShow }}</span>
 	</div>
+	<div v-else>
+		<b><i class="ti ti-movie"></i> {{ bytes(video.size) }}</b>
+		<span>{{ i18n.ts.clickToShow }}</span>
+	</div>
 </div>
 <div v-else class="kkjnbbplepmiyuadieoenjgutgcmtsvu">
 	<VuePlyr :options="{ volume: 0.5 }">
@@ -25,6 +29,7 @@
 <script lang="ts" setup>
 import { ref } from 'vue';
 import * as misskey from 'misskey-js';
+import bytes from '@/filters/bytes';
 import VuePlyr from 'vue-plyr';
 import { defaultStore } from '@/store';
 import 'vue-plyr/dist/vue-plyr.css';
@@ -34,6 +39,8 @@ const props = defineProps<{
 	video: misskey.entities.DriveFile;
 }>();
 
+const mediaAppearance = ref(defaultStore.state.nsfw);
+
 const hide = ref((defaultStore.state.nsfw === 'force') ? true : props.video.isSensitive && (defaultStore.state.nsfw !== 'ignore'));
 </script>
 

packages/frontend/src/pages/settings/general.vue

@@ -94,10 +94,11 @@
 	</MkSelect>
 
 	<MkSelect v-model="nsfw">
-		<template #label>{{ i18n.ts.nsfw }}</template>
-		<option value="respect">{{ i18n.ts._nsfw.respect }}</option>
-		<option value="ignore">{{ i18n.ts._nsfw.ignore }}</option>
-		<option value="force">{{ i18n.ts._nsfw.force }}</option>
+		<template #label>{{ i18n.ts._mediaAppearance.title }}</template>
+		<option value="respect">{{ i18n.ts._mediaAppearance.respect }}</option>
+		<option value="ignore">{{ i18n.ts._mediaAppearance.ignore }}</option>
+		<option value="force">{{ i18n.ts._mediaAppearance.force }}</option>
+		<template #caption>{{ i18n.ts._mediaAppearance.description }}</template>
 	</MkSelect>
 
 	<MkRange v-model="numberOfPageCache" :min="1" :max="10" :step="1" easing>