enhance(frontend): URLプレビューをユーザーサイドで無効化できるように (#16064)
* enhance(frontend): URLプレビューをユーザーサイドで無効化できるように * fix lint * Update Changelog * fix: 設定項目をデータセーバーに移動
This commit is contained in:
parent
7888f771c3
commit
f74c38f313
|
@ -29,6 +29,7 @@
|
||||||
- Enhance: リプライ元にアンケートがあることが表示されるように
|
- Enhance: リプライ元にアンケートがあることが表示されるように
|
||||||
- Enhance: ノートのサーバー情報のデザインを改善・パフォーマンス向上
|
- Enhance: ノートのサーバー情報のデザインを改善・パフォーマンス向上
|
||||||
(Based on https://github.com/taiyme/misskey/pull/198, https://github.com/taiyme/misskey/pull/211, https://github.com/taiyme/misskey/pull/283)
|
(Based on https://github.com/taiyme/misskey/pull/198, https://github.com/taiyme/misskey/pull/211, https://github.com/taiyme/misskey/pull/283)
|
||||||
|
- Enhance: ユーザー設定でURLプレビューを無効化できるように
|
||||||
- Fix: "時計"ウィジェット(Clock)において、Transparent設定が有効でも、その背景が透過されない問題を修正
|
- Fix: "時計"ウィジェット(Clock)において、Transparent設定が有効でも、その背景が透過されない問題を修正
|
||||||
|
|
||||||
### Server
|
### Server
|
||||||
|
|
|
@ -5781,6 +5781,10 @@ export interface Locale extends ILocale {
|
||||||
* リアルタイムモードがオンのときは、この設定に関わらずリアルタイムでコンテンツが更新されます。
|
* リアルタイムモードがオンのときは、この設定に関わらずリアルタイムでコンテンツが更新されます。
|
||||||
*/
|
*/
|
||||||
"contentsUpdateFrequency_description2": string;
|
"contentsUpdateFrequency_description2": string;
|
||||||
|
/**
|
||||||
|
* URLプレビューを表示する
|
||||||
|
*/
|
||||||
|
"showUrlPreview": string;
|
||||||
"_chat": {
|
"_chat": {
|
||||||
/**
|
/**
|
||||||
* 送信者の名前を表示
|
* 送信者の名前を表示
|
||||||
|
@ -10954,7 +10958,7 @@ export interface Locale extends ILocale {
|
||||||
*/
|
*/
|
||||||
"description": string;
|
"description": string;
|
||||||
};
|
};
|
||||||
"_urlPreview": {
|
"_urlPreviewThumbnail": {
|
||||||
/**
|
/**
|
||||||
* URLプレビューのサムネイルを非表示
|
* URLプレビューのサムネイルを非表示
|
||||||
*/
|
*/
|
||||||
|
@ -10964,6 +10968,16 @@ export interface Locale extends ILocale {
|
||||||
*/
|
*/
|
||||||
"description": string;
|
"description": string;
|
||||||
};
|
};
|
||||||
|
"_disableUrlPreview": {
|
||||||
|
/**
|
||||||
|
* URLプレビューを無効化
|
||||||
|
*/
|
||||||
|
"title": string;
|
||||||
|
/**
|
||||||
|
* URLプレビュー機能を無効化します。サムネイル画像だけと違い、リンク先の情報の読み込み自体を削減できます。
|
||||||
|
*/
|
||||||
|
"description": string;
|
||||||
|
};
|
||||||
"_code": {
|
"_code": {
|
||||||
/**
|
/**
|
||||||
* コードハイライトを非表示
|
* コードハイライトを非表示
|
||||||
|
|
|
@ -1445,6 +1445,7 @@ _settings:
|
||||||
contentsUpdateFrequency: "コンテンツの取得頻度"
|
contentsUpdateFrequency: "コンテンツの取得頻度"
|
||||||
contentsUpdateFrequency_description: "高いほどリアルタイムにコンテンツが更新されますが、パフォーマンスが低下し、通信量とバッテリーの消費が多くなります。"
|
contentsUpdateFrequency_description: "高いほどリアルタイムにコンテンツが更新されますが、パフォーマンスが低下し、通信量とバッテリーの消費が多くなります。"
|
||||||
contentsUpdateFrequency_description2: "リアルタイムモードがオンのときは、この設定に関わらずリアルタイムでコンテンツが更新されます。"
|
contentsUpdateFrequency_description2: "リアルタイムモードがオンのときは、この設定に関わらずリアルタイムでコンテンツが更新されます。"
|
||||||
|
showUrlPreview: "URLプレビューを表示する"
|
||||||
|
|
||||||
_chat:
|
_chat:
|
||||||
showSenderName: "送信者の名前を表示"
|
showSenderName: "送信者の名前を表示"
|
||||||
|
@ -2910,9 +2911,12 @@ _dataSaver:
|
||||||
_avatar:
|
_avatar:
|
||||||
title: "アイコン画像のアニメーションを無効化"
|
title: "アイコン画像のアニメーションを無効化"
|
||||||
description: "アイコン画像のアニメーションが停止します。アニメーション画像は通常の画像よりファイルサイズが大きいことがあるので、データ通信量をさらに削減できます。"
|
description: "アイコン画像のアニメーションが停止します。アニメーション画像は通常の画像よりファイルサイズが大きいことがあるので、データ通信量をさらに削減できます。"
|
||||||
_urlPreview:
|
_urlPreviewThumbnail:
|
||||||
title: "URLプレビューのサムネイルを非表示"
|
title: "URLプレビューのサムネイルを非表示"
|
||||||
description: "URLプレビューのサムネイル画像が読み込まれなくなります。"
|
description: "URLプレビューのサムネイル画像が読み込まれなくなります。"
|
||||||
|
_disableUrlPreview:
|
||||||
|
title: "URLプレビューを無効化"
|
||||||
|
description: "URLプレビュー機能を無効化します。サムネイル画像だけと違い、リンク先の情報の読み込み自体を削減できます。"
|
||||||
_code:
|
_code:
|
||||||
title: "コードハイライトを非表示"
|
title: "コードハイライトを非表示"
|
||||||
description: "MFMなどでコードハイライト記法が使われている場合、タップするまで読み込まれなくなります。コードハイライトではハイライトする言語ごとにその定義ファイルを読み込む必要がありますが、それらが自動で読み込まれなくなるため、通信量の削減が見込めます。"
|
description: "MFMなどでコードハイライト記法が使われている場合、タップするまで読み込まれなくなります。コードハイライトではハイライトする言語ごとにその定義ファイルを読み込む必要がありますが、それらが自動で読み込まれなくなるため、通信量の削減が見込めます。"
|
||||||
|
|
|
@ -19,7 +19,7 @@ import { defineAsyncComponent, ref } from 'vue';
|
||||||
import { url as local } from '@@/js/config.js';
|
import { url as local } from '@@/js/config.js';
|
||||||
import { useTooltip } from '@/composables/use-tooltip.js';
|
import { useTooltip } from '@/composables/use-tooltip.js';
|
||||||
import * as os from '@/os.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 type { MkABehavior } from '@/components/global/MkA.vue';
|
||||||
import { maybeMakeRelative } from '@@/js/url.js';
|
import { maybeMakeRelative } from '@@/js/url.js';
|
||||||
|
|
||||||
|
|
|
@ -234,7 +234,7 @@ import { claimAchievement } from '@/utility/achievements.js';
|
||||||
import { getNoteSummary } from '@/utility/get-note-summary.js';
|
import { getNoteSummary } from '@/utility/get-note-summary.js';
|
||||||
import MkRippleEffect from '@/components/MkRippleEffect.vue';
|
import MkRippleEffect from '@/components/MkRippleEffect.vue';
|
||||||
import { showMovedDialog } from '@/utility/show-moved-dialog.js';
|
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 { focusPrev, focusNext } from '@/utility/focus.js';
|
||||||
import { getAppearNote } from '@/utility/get-appear-note.js';
|
import { getAppearNote } from '@/utility/get-appear-note.js';
|
||||||
import { prefer } from '@/preferences.js';
|
import { prefer } from '@/preferences.js';
|
||||||
|
|
|
@ -268,7 +268,7 @@ import MkUserCardMini from '@/components/MkUserCardMini.vue';
|
||||||
import MkPagination from '@/components/MkPagination.vue';
|
import MkPagination from '@/components/MkPagination.vue';
|
||||||
import MkReactionIcon from '@/components/MkReactionIcon.vue';
|
import MkReactionIcon from '@/components/MkReactionIcon.vue';
|
||||||
import MkButton from '@/components/MkButton.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 { getAppearNote } from '@/utility/get-appear-note.js';
|
||||||
import { prefer } from '@/preferences.js';
|
import { prefer } from '@/preferences.js';
|
||||||
import { getPluginHandlers } from '@/plugin.js';
|
import { getPluginHandlers } from '@/plugin.js';
|
||||||
|
|
|
@ -45,7 +45,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||||
</template>
|
</template>
|
||||||
<div v-else>
|
<div v-else>
|
||||||
<component :is="self ? 'MkA' : 'a'" :class="[$style.link, { [$style.compact]: compact }]" :[attr]="maybeRelativeUrl" rel="nofollow noopener" :target="target" :title="url">
|
<component :is="self ? 'MkA' : 'a'" :class="[$style.link, { [$style.compact]: compact }]" :[attr]="maybeRelativeUrl" rel="nofollow noopener" :target="target" :title="url">
|
||||||
<div v-if="thumbnail && !sensitive" :class="$style.thumbnail" :style="prefer.s.dataSaver.urlPreview ? '' : { backgroundImage: `url('${thumbnail}')` }">
|
<div v-if="thumbnail && !sensitive" :class="$style.thumbnail" :style="prefer.s.dataSaver.urlPreviewThumbnail ? '' : { backgroundImage: `url('${thumbnail}')` }">
|
||||||
</div>
|
</div>
|
||||||
<article :class="$style.body">
|
<article :class="$style.body">
|
||||||
<header :class="$style.header">
|
<header :class="$style.header">
|
||||||
|
@ -91,7 +91,7 @@ import { i18n } from '@/i18n.js';
|
||||||
import * as os from '@/os.js';
|
import * as os from '@/os.js';
|
||||||
import { deviceKind } from '@/utility/device-kind.js';
|
import { deviceKind } from '@/utility/device-kind.js';
|
||||||
import MkButton from '@/components/MkButton.vue';
|
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 { store } from '@/store.js';
|
||||||
import { prefer } from '@/preferences.js';
|
import { prefer } from '@/preferences.js';
|
||||||
import { maybeMakeRelative } from '@@/js/url.js';
|
import { maybeMakeRelative } from '@@/js/url.js';
|
||||||
|
|
|
@ -27,7 +27,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||||
import { ref } from 'vue';
|
import { ref } from 'vue';
|
||||||
import { versatileLang } from '@@/js/intl-const.js';
|
import { versatileLang } from '@@/js/intl-const.js';
|
||||||
import MkWindow from '@/components/MkWindow.vue';
|
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';
|
import { prefer } from '@/preferences.js';
|
||||||
|
|
||||||
const props = defineProps<{
|
const props = defineProps<{
|
||||||
|
|
|
@ -30,7 +30,7 @@ import { toUnicode as decodePunycode } from 'punycode.js';
|
||||||
import { url as local } from '@@/js/config.js';
|
import { url as local } from '@@/js/config.js';
|
||||||
import * as os from '@/os.js';
|
import * as os from '@/os.js';
|
||||||
import { useTooltip } from '@/composables/use-tooltip.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 type { MkABehavior } from '@/components/global/MkA.vue';
|
||||||
import { maybeMakeRelative } from '@@/js/url.js';
|
import { maybeMakeRelative } from '@@/js/url.js';
|
||||||
|
|
||||||
|
|
|
@ -17,7 +17,7 @@ import { defineAsyncComponent } from 'vue';
|
||||||
import * as mfm from 'mfm-js';
|
import * as mfm from 'mfm-js';
|
||||||
import * as Misskey from 'misskey-js';
|
import * as Misskey from 'misskey-js';
|
||||||
import { extractUrlFromMfm } from '@/utility/extract-url-from-mfm.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'));
|
const MkUrlPreview = defineAsyncComponent(() => import('@/components/MkUrlPreview.vue'));
|
||||||
|
|
||||||
|
|
|
@ -29,8 +29,6 @@ if (providedAt > cachedAt) {
|
||||||
|
|
||||||
export const instance: Misskey.entities.MetaDetailed = reactive(cachedMeta ?? {});
|
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> {
|
export async function fetchInstance(force = false): Promise<Misskey.entities.MetaDetailed> {
|
||||||
if (!force) {
|
if (!force) {
|
||||||
const cachedAt = miLocalStorage.getItem('instanceCachedAt') ? parseInt(miLocalStorage.getItem('instanceCachedAt')!) : 0;
|
const cachedAt = miLocalStorage.getItem('instanceCachedAt') ? parseInt(miLocalStorage.getItem('instanceCachedAt')!) : 0;
|
||||||
|
|
|
@ -644,9 +644,13 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||||
{{ i18n.ts._dataSaver._avatar.title }}
|
{{ i18n.ts._dataSaver._avatar.title }}
|
||||||
<template #caption>{{ i18n.ts._dataSaver._avatar.description }}</template>
|
<template #caption>{{ i18n.ts._dataSaver._avatar.description }}</template>
|
||||||
</MkSwitch>
|
</MkSwitch>
|
||||||
<MkSwitch v-model="dataSaver.urlPreview">
|
<MkSwitch v-model="dataSaver.disableUrlPreview" :disabled="!instance.enableUrlPreview">
|
||||||
{{ i18n.ts._dataSaver._urlPreview.title }}
|
{{ i18n.ts._dataSaver._disableUrlPreview.title }}
|
||||||
<template #caption>{{ i18n.ts._dataSaver._urlPreview.description }}</template>
|
<template #caption>{{ i18n.ts._dataSaver._disableUrlPreview.description }}</template>
|
||||||
|
</MkSwitch>
|
||||||
|
<MkSwitch v-model="dataSaver.urlPreviewThumbnail" :disabled="!instance.enableUrlPreview || dataSaver.disableUrlPreview">
|
||||||
|
{{ i18n.ts._dataSaver._urlPreviewThumbnail.title }}
|
||||||
|
<template #caption>{{ i18n.ts._dataSaver._urlPreviewThumbnail.description }}</template>
|
||||||
</MkSwitch>
|
</MkSwitch>
|
||||||
<MkSwitch v-model="dataSaver.code">
|
<MkSwitch v-model="dataSaver.code">
|
||||||
{{ i18n.ts._dataSaver._code.title }}
|
{{ i18n.ts._dataSaver._code.title }}
|
||||||
|
|
|
@ -290,9 +290,10 @@ export const PREF_DEF = {
|
||||||
default: {
|
default: {
|
||||||
media: false,
|
media: false,
|
||||||
avatar: false,
|
avatar: false,
|
||||||
urlPreview: false,
|
urlPreviewThumbnail: false,
|
||||||
|
disableUrlPreview: false,
|
||||||
code: false,
|
code: false,
|
||||||
} as Record<string, boolean>,
|
} satisfies Record<string, boolean>,
|
||||||
},
|
},
|
||||||
hemisphere: {
|
hemisphere: {
|
||||||
default: hemisphere as 'N' | 'S',
|
default: hemisphere as 'N' | 'S',
|
||||||
|
|
|
@ -2,7 +2,12 @@
|
||||||
* SPDX-FileCopyrightText: syuilo and misskey-project
|
* SPDX-FileCopyrightText: syuilo and misskey-project
|
||||||
* SPDX-License-Identifier: AGPL-3.0-only
|
* SPDX-License-Identifier: AGPL-3.0-only
|
||||||
*/
|
*/
|
||||||
|
import { computed } from 'vue';
|
||||||
import { hostname } from '@@/js/config.js';
|
import { hostname } from '@@/js/config.js';
|
||||||
|
import { instance } from '@/instance.js';
|
||||||
|
import { prefer } from '@/preferences.js';
|
||||||
|
|
||||||
|
export const isEnabledUrlPreview = computed(() => (instance.enableUrlPreview && !prefer.r.dataSaver.value.disableUrlPreview));
|
||||||
|
|
||||||
export function transformPlayerUrl(url: string): string {
|
export function transformPlayerUrl(url: string): string {
|
||||||
const urlObj = new URL(url);
|
const urlObj = new URL(url);
|
Loading…
Reference in New Issue