enhance(frontend): blurhash無効化オプションを追加

CHANGELOG.md

@@ -15,6 +15,7 @@
   - 従来のWebsocket接続を行うモードはリアルタイムモードとして再定義されました
 	- チャットなど、一部の機能は引き続き設定に関わらずWebsocket接続が行われます
 - Enhance: メモリ使用量を軽減しました
+- Enhance: 画像の高品質なプレースホルダを無効化してパフォーマンスを向上させるオプションを追加
 - Enhance: 招待されているが参加していないルームを開いたときに、招待を承認するかどうか尋ねるように
 - Enhance: リプライ元にアンケートがあることが表示されるように
 - Enhance: ノートのサーバー情報のデザインを改善・パフォーマンス向上  

locales/index.d.ts

@@ -5713,6 +5713,10 @@ export interface Locale extends ILocale {
          * アイコンをスクロールに追従させる
          */
         "useStickyIcons": string;
+        /**
+         * 高品質な画像のプレースホルダを表示
+         */
+        "enableHighQualityImagePlaceholders": string;
         /**
          * ナビゲーションバーに副ボタンを表示
          */

locales/ja-JP.yml

@@ -1428,6 +1428,7 @@ _settings:
   makeEveryTextElementsSelectable: "全てのテキスト要素を選択可能にする"
   makeEveryTextElementsSelectable_description: "有効にすると、一部のシチュエーションでのユーザビリティが低下する場合があります。"
   useStickyIcons: "アイコンをスクロールに追従させる"
+  enableHighQualityImagePlaceholders: "高品質な画像のプレースホルダを表示"
   showNavbarSubButtons: "ナビゲーションバーに副ボタンを表示"
   ifOn: "オンのとき"
   ifOff: "オフのとき"

packages/frontend-embed/src/components/EmMediaImage.vue

@@ -12,7 +12,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		target="_blank"
 		rel="noopener"
 	>
-		<ImgWithBlurhash
+		<EmImgWithBlurhash
 			:hash="image.blurhash"
 			:src="hide ? null : url"
 			:forceBlurhash="hide"
@@ -45,7 +45,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 import { ref, computed } from 'vue';
 import * as Misskey from 'misskey-js';
-import ImgWithBlurhash from '@/components/EmImgWithBlurhash.vue';
+import EmImgWithBlurhash from '@/components/EmImgWithBlurhash.vue';
 import { i18n } from '@/i18n.js';
 
 const props = withDefaults(defineProps<{

packages/frontend/src/components/MkDriveFileThumbnail.vue

@@ -11,15 +11,24 @@ SPDX-License-Identifier: AGPL-3.0-only
 		[$style.large]: large,
 	}]"
 >
-	<ImgWithBlurhash
+	<MkImgWithBlurhash
-		v-if="isThumbnailAvailable"
+		v-if="isThumbnailAvailable && prefer.s.enableHighQualityImagePlaceholders"
 		:hash="file.blurhash"
 		:src="file.thumbnailUrl"
 		:alt="file.name"
 		:title="file.name"
+		:class="$style.thumbnail"
 		:cover="fit !== 'contain'"
 		:forceBlurhash="forceBlurhash"
 	/>
+	<img
+		v-else-if="isThumbnailAvailable"
+		:src="file.thumbnailUrl"
+		:alt="file.name"
+		:title="file.name"
+		:class="$style.thumbnail"
+		:style="{ objectFit: fit }"
+	/>
 	<i v-else-if="is === 'image'" class="ti ti-photo" :class="$style.icon"></i>
 	<i v-else-if="is === 'video'" class="ti ti-video" :class="$style.icon"></i>
 	<i v-else-if="is === 'audio' || is === 'midi'" class="ti ti-file-music" :class="$style.icon"></i>
@@ -36,7 +45,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 import { computed } from 'vue';
 import * as Misskey from 'misskey-js';
-import ImgWithBlurhash from '@/components/MkImgWithBlurhash.vue';
+import MkImgWithBlurhash from '@/components/MkImgWithBlurhash.vue';
+import { prefer } from '@/preferences.js';
 
 const props = defineProps<{
 	file: Misskey.entities.DriveFile;
@@ -115,4 +125,8 @@ const isThumbnailAvailable = computed(() => {
 .large .icon {
 	font-size: 40px;
 }
+
+.thumbnail {
+	width: 100%;
+}
 </style>

packages/frontend/src/components/MkGalleryPostPreview.vue

@@ -7,7 +7,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <MkA :to="`/gallery/${post.id}`" class="ttasepnz _panel" tabindex="-1" @pointerenter="enterHover" @pointerleave="leaveHover">
 	<div class="thumbnail">
 		<Transition>
-			<ImgWithBlurhash
+			<MkImgWithBlurhash
 				class="img layered"
 				:transition="safe ? null : {
 					duration: 500,
@@ -34,7 +34,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 import * as Misskey from 'misskey-js';
 import { computed, ref } from 'vue';
-import ImgWithBlurhash from '@/components/MkImgWithBlurhash.vue';
+import MkImgWithBlurhash from '@/components/MkImgWithBlurhash.vue';
 import { prefer } from '@/preferences.js';
 
 const props = defineProps<{

packages/frontend/src/components/MkMediaImage.vue

@@ -17,7 +17,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			style: 'cursor: zoom-in;'
 		}"
 	>
-		<ImgWithBlurhash
+		<MkImgWithBlurhash
 			:hash="image.blurhash"
 			:src="(prefer.s.dataSaver.media && hide) ? null : url"
 			:forceBlurhash="hide"
@@ -57,7 +57,7 @@ import type { MenuItem } from '@/types/menu.js';
 import { copyToClipboard } from '@/utility/copy-to-clipboard';
 import { getStaticImageUrl } from '@/utility/media-proxy.js';
 import bytes from '@/filters/bytes.js';
-import ImgWithBlurhash from '@/components/MkImgWithBlurhash.vue';
+import MkImgWithBlurhash from '@/components/MkImgWithBlurhash.vue';
 import { i18n } from '@/i18n.js';
 import * as os from '@/os.js';
 import { $i, iAmModerator } from '@/i.js';

packages/frontend/src/components/global/MkAvatar.vue

@@ -5,7 +5,8 @@ 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 v-if="prefer.s.enableHighQualityImagePlaceholders" :class="$style.inner" :src="url" :hash="user.avatarBlurhash" :cover="true" :onlyAvgColor="true"/>
+	<img v-else :class="$style.inner" :src="url" alt="" decoding="async" style="pointer-events: none;"/>
 	<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/preferences.vue

@@ -575,6 +575,15 @@ SPDX-License-Identifier: AGPL-3.0-only
 							</MkPreferenceContainer>
 						</SearchMarker>
 
+						<SearchMarker :keywords="['blurhash', 'image', 'photo', 'picture', 'thumbnail', 'placeholder']">
+							<MkPreferenceContainer k="enableHighQualityImagePlaceholders">
+								<MkSwitch v-model="enableHighQualityImagePlaceholders">
+									<template #label><SearchLabel>{{ i18n.ts._settings.enableHighQualityImagePlaceholders }}</SearchLabel></template>
+									<template #caption><SearchKeyword>{{ i18n.ts.turnOffToImprovePerformance }}</SearchKeyword></template>
+								</MkSwitch>
+							</MkPreferenceContainer>
+						</SearchMarker>
+
 						<SearchMarker :keywords="['sticky']">
 							<MkPreferenceContainer k="useStickyIcons">
 								<MkSwitch v-model="useStickyIcons">
@@ -808,6 +817,7 @@ const defaultFollowWithReplies = prefer.model('defaultFollowWithReplies');
 const chatShowSenderName = prefer.model('chat.showSenderName');
 const chatSendOnEnter = prefer.model('chat.sendOnEnter');
 const useStickyIcons = prefer.model('useStickyIcons');
+const enableHighQualityImagePlaceholders = prefer.model('enableHighQualityImagePlaceholders');
 const reduceAnimation = prefer.model('animation', v => !v, v => !v);
 const animatedMfm = prefer.model('animatedMfm');
 const disableShowingAnimatedImages = prefer.model('disableShowingAnimatedImages');
@@ -866,6 +876,7 @@ watch([
 	enableSeasonalScreenEffect,
 	chatShowSenderName,
 	useStickyIcons,
+	enableHighQualityImagePlaceholders,
 	keepScreenOn,
 	contextMenu,
 	fontSize,

packages/frontend/src/preferences/def.ts

@@ -202,6 +202,9 @@ export const PREF_DEF = {
 	useStickyIcons: {
 		default: true,
 	},
+	enableHighQualityImagePlaceholders: {
+		default: true,
+	},
 	showFixedPostForm: {
 		default: false,
 	},