enhance(frontend): URLプレビューをユーザーサイドで無効化できるように

locales/index.d.ts

@@ -5781,6 +5781,10 @@ export interface Locale extends ILocale {
          * リアルタイムモードがオンのときは、この設定に関わらずリアルタイムでコンテンツが更新されます。
          */
         "contentsUpdateFrequency_description2": string;
+        /**
+         * URLプレビューを表示する
+         */
+        "showUrlPreview": string;
         "_chat": {
             /**
              * 送信者の名前を表示

locales/ja-JP.yml

@@ -1445,6 +1445,7 @@ _settings:
   contentsUpdateFrequency: "コンテンツの取得頻度"
   contentsUpdateFrequency_description: "高いほどリアルタイムにコンテンツが更新されますが、パフォーマンスが低下し、通信量とバッテリーの消費が多くなります。"
   contentsUpdateFrequency_description2: "リアルタイムモードがオンのときは、この設定に関わらずリアルタイムでコンテンツが更新されます。"
+  showUrlPreview: "URLプレビューを表示する"
 
   _chat:
     showSenderName: "送信者の名前を表示"

packages/frontend/src/components/MkLink.vue

@@ -19,7 +19,7 @@ import { defineAsyncComponent, ref } from 'vue';
 import { url as local } from '@@/js/config.js';
 import { useTooltip } from '@/composables/use-tooltip.js';
 import * as os from '@/os.js';
-import { isEnabledUrlPreview } from '@/instance.js';
+import { isEnabledUrlPreview } from '@/utility/url-preview.js';
 import type { MkABehavior } from '@/components/global/MkA.vue';
 import { maybeMakeRelative } from '@@/js/url.js';
 

packages/frontend/src/components/MkNote.vue

@@ -234,7 +234,7 @@ import { claimAchievement } from '@/utility/achievements.js';
 import { getNoteSummary } from '@/utility/get-note-summary.js';
 import MkRippleEffect from '@/components/MkRippleEffect.vue';
 import { showMovedDialog } from '@/utility/show-moved-dialog.js';
-import { isEnabledUrlPreview } from '@/instance.js';
+import { isEnabledUrlPreview } from '@/utility/url-preview.js';
 import { focusPrev, focusNext } from '@/utility/focus.js';
 import { getAppearNote } from '@/utility/get-appear-note.js';
 import { prefer } from '@/preferences.js';

packages/frontend/src/components/MkNoteDetailed.vue

@@ -268,7 +268,7 @@ import MkUserCardMini from '@/components/MkUserCardMini.vue';
 import MkPagination from '@/components/MkPagination.vue';
 import MkReactionIcon from '@/components/MkReactionIcon.vue';
 import MkButton from '@/components/MkButton.vue';
-import { isEnabledUrlPreview } from '@/instance.js';
+import { isEnabledUrlPreview } from '@/utility/url-preview.js';
 import { getAppearNote } from '@/utility/get-appear-note.js';
 import { prefer } from '@/preferences.js';
 import { getPluginHandlers } from '@/plugin.js';

packages/frontend/src/components/MkUrlPreview.vue

@@ -91,7 +91,7 @@ import { i18n } from '@/i18n.js';
 import * as os from '@/os.js';
 import { deviceKind } from '@/utility/device-kind.js';
 import MkButton from '@/components/MkButton.vue';
-import { transformPlayerUrl } from '@/utility/player-url-transform.js';
+import { transformPlayerUrl } from '@/utility/url-preview.js';
 import { store } from '@/store.js';
 import { prefer } from '@/preferences.js';
 import { maybeMakeRelative } from '@@/js/url.js';

packages/frontend/src/components/MkYouTubePlayer.vue

@@ -27,7 +27,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 import { ref } from 'vue';
 import { versatileLang } from '@@/js/intl-const.js';
 import MkWindow from '@/components/MkWindow.vue';
-import { transformPlayerUrl } from '@/utility/player-url-transform.js';
+import { transformPlayerUrl } from '@/utility/url-preview.js';
 import { prefer } from '@/preferences.js';
 
 const props = defineProps<{

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

@@ -30,7 +30,7 @@ import { toUnicode as decodePunycode } from 'punycode.js';
 import { url as local } from '@@/js/config.js';
 import * as os from '@/os.js';
 import { useTooltip } from '@/composables/use-tooltip.js';
-import { isEnabledUrlPreview } from '@/instance.js';
+import { isEnabledUrlPreview } from '@/utility/url-preview.js';
 import type { MkABehavior } from '@/components/global/MkA.vue';
 import { maybeMakeRelative } from '@@/js/url.js';
 

packages/frontend/src/components/page/page.text.vue

@@ -17,7 +17,7 @@ import { defineAsyncComponent } from 'vue';
 import * as mfm from 'mfm-js';
 import * as Misskey from 'misskey-js';
 import { extractUrlFromMfm } from '@/utility/extract-url-from-mfm.js';
-import { isEnabledUrlPreview } from '@/instance.js';
+import { isEnabledUrlPreview } from '@/utility/url-preview.js';
 
 const MkUrlPreview = defineAsyncComponent(() => import('@/components/MkUrlPreview.vue'));
 

packages/frontend/src/instance.ts

@@ -29,8 +29,6 @@ if (providedAt > cachedAt) {
 
 export const instance: Misskey.entities.MetaDetailed = reactive(cachedMeta ?? {});
 
-export const isEnabledUrlPreview = computed(() => instance.enableUrlPreview ?? true);
-
 export async function fetchInstance(force = false): Promise<Misskey.entities.MetaDetailed> {
 	if (!force) {
 		const cachedAt = miLocalStorage.getItem('instanceCachedAt') ? parseInt(miLocalStorage.getItem('instanceCachedAt')!) : 0;

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

@@ -602,6 +602,18 @@ SPDX-License-Identifier: AGPL-3.0-only
 							</MkPreferenceContainer>
 						</SearchMarker>
 
+
+						<template v-if="instance.enableUrlPreview">
+							<SearchMarker :keywords="['url', 'preview']">
+								<MkPreferenceContainer k="showUrlPreview">
+									<MkSwitch v-model="showUrlPreview">
+										<template #label><SearchLabel>{{ i18n.ts._settings.showUrlPreview }}</SearchLabel></template>
+										<template #caption><SearchKeyword>{{ i18n.ts.turnOffToImprovePerformance }}</SearchKeyword></template>
+									</MkSwitch>
+								</MkPreferenceContainer>
+							</SearchMarker>
+						</template>
+
 						<MkInfo>
 							<div class="_gaps_s">
 								<div>{{ i18n.ts._clientPerformanceIssueTip.title }}</div>
@@ -845,6 +857,7 @@ const chatShowSenderName = prefer.model('chat.showSenderName');
 const chatSendOnEnter = prefer.model('chat.sendOnEnter');
 const useStickyIcons = prefer.model('useStickyIcons');
 const enableHighQualityImagePlaceholders = prefer.model('enableHighQualityImagePlaceholders');
+const showUrlPreview = prefer.model('showUrlPreview');
 const reduceAnimation = prefer.model('animation', v => !v, v => !v);
 const animatedMfm = prefer.model('animatedMfm');
 const disableShowingAnimatedImages = prefer.model('disableShowingAnimatedImages');

packages/frontend/src/preferences/def.ts

@@ -348,6 +348,9 @@ export const PREF_DEF = {
 	mutingEmojis: {
 		default: [] as string[],
 	},
+	showUrlPreview: {
+		default: true,
+	},
 
 	'sound.masterVolume': {
 		default: 0.3,

packages/frontend/src/utility/url-preview.ts

@@ -2,7 +2,12 @@
  * SPDX-FileCopyrightText: syuilo and misskey-project
  * SPDX-License-Identifier: AGPL-3.0-only
  */
+import { computed } from 'vue';
 import { hostname } from '@@/js/config.js';
+import { instance } from '@/instance.js';
+import { prefer } from '@/preferences.js';
+
+export const isEnabledUrlPreview = computed(() => (instance.enableUrlPreview && prefer.r.showUrlPreview.value));
 
 export function transformPlayerUrl(url: string): string {
 	const urlObj = new URL(url);