Release: 1.2.1 (#583)

CHANGELOG_YOJO.md

@@ -1,5 +1,29 @@
+## 1.2.1
+Cherrypick 4.13.0  
+Misskey 2024.10.1
+
+### Release Date
+2024-12-21
+
+### General
+-
+
+### Client
+- Fix: すべてのノートに翻訳ボタンが表示される/本文がなくて投票だけあると翻訳が表示されなくなる [#579](https://github.com/yojo-art/cherrypick/pull/579)
+- Fix: ユーザーTLファイル付きノートTLの修正 [#580](https://github.com/yojo-art/cherrypick/pull/580)
+  - ユーザー設定アピアランスのセンシティブ画像を常に表示が無視されてたのを修正
+  - ユーザー設定アピアランスの画像を常に非表示が無視されてたのを修正
+  - ユーザー設定アピアランスの非表示の画像をダブルクリックして開く設定が無視されてたのを修正
+  - ユーザー設定全般のデータセーバー、メディアの読み込みを無効化が無視されてたのを修正
+  - センシティブ画像を開く時に年齢確認ダイアログを表示する機能が無視されてたのを修正
+  - 画像左上にALT/GIF/APNG/センシティブの表示を追加
+- Fix: リモートクリップ/リモートplay機能のURLで外部サイト警告が出る問題を修正 [#581](https://github.com/yojo-art/cherrypick/pull/581)
+
+### Server
+-
+
 ## 1.2.0
-Cherrypick 4.13.0
+Cherrypick 4.13.0  
 Misskey 2024.10.1
 
 ### Release Date
@@ -20,7 +44,7 @@ Misskey 2024.10.1
 - Enhance: `/users/${id}`に`Accept: application/ld+json`ではないリクエストが来たとき`/@${username}`にリダイレクトするように [#554](https://github.com/yojo-art/cherrypick/pull/554)
 
 ## 1.1.0
-Cherrypick 4.11.1
+Cherrypick 4.11.1  
 Misskey 2024.8.0
 
 ### Release Date
@@ -121,7 +145,7 @@ docker環境でノートレコードが多数(数百万件)ある場合**一時
 
 
 ## 1.0.1
-Cherrypick 4.11.1
+Cherrypick 4.11.1  
 Misskey 2024.8.0
 
 ### Release Date
@@ -138,7 +162,7 @@ Misskey 2024.8.0
 
 
 ## 1.0.0
-Cherrypick 4.11.1
+Cherrypick 4.11.1  
 Misskey 2024.8.0
 
 ### Release Date

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "yojo-art",
-	"version": "1.2.0",
+	"version": "1.2.1",
 	"basedMisskeyVersion": "2024.10.1",
 	"basedCherrypickVersion": "4.13.0",
 	"codename": "nasubi",

packages/cherrypick-js/package.json

@@ -1,7 +1,7 @@
 {
 	"type": "module",
 	"name": "cherrypick-js",
-	"version": "1.2.0",
+	"version": "1.2.1",
 	"basedMisskeyVersion": "2024.10.1",
 	"basedCherrypickVersion": "4.13.0",
 	"description": "yojo-art SDK for JavaScript",

packages/frontend/src/components/MkLink.vue

@@ -8,7 +8,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	:is="self ? 'MkA' : 'a'" ref="el" style="word-break: break-all;" class="_link" :[attr]="self ? url_string.substring(local.length) : url_string" :rel="rel ?? 'nofollow noopener'" :target="target"
 	:behavior="props.navigationBehavior"
 	:title="url_string"
-	@click.stop="(ev: MouseEvent) => warningExternalWebsite(ev, props.url)"
+	@click.stop="(ev: MouseEvent) => warningExternalWebsite(ev, url_string)"
 >
 	<slot></slot>
 	<i v-if="target === '_blank' && !hideIcon" class="ti ti-external-link" :class="$style.icon"></i>

packages/frontend/src/components/MkNote.vue

@@ -93,15 +93,15 @@ SPDX-License-Identifier: AGPL-3.0-only
 						:enableEmojiMenuReaction="!!$i"
 						:enableAnimatedMfm="enableAnimatedMfm"
 					/>
-					<div v-if="defaultStore.state.showTranslateButtonInNote && (!defaultStore.state.useAutoTranslate || (!$i.policies.canUseAutoTranslate || (defaultStore.state.useAutoTranslate && (isLong || appearNote.cw != null || !showContent)))) && instance.translatorAvailable && $i && $i.policies.canUseTranslator && appearNote.text && isForeignLanguage" style="padding-top: 5px; color: var(--MI_THEME-accent);">
+					<div v-if="defaultStore.state.showTranslateButtonInNote && (!defaultStore.state.useAutoTranslate || (!$i.policies.canUseAutoTranslate || (defaultStore.state.useAutoTranslate && (isLong || appearNote.cw != null || !showContent)))) && instance.translatorAvailable && $i && $i.policies.canUseTranslator && (appearNote.text || appearNote.poll) && isForeignLanguage" style="padding-top: 5px; color: var(--MI_THEME-accent);">
 						<button v-if="!(translating || translation)" ref="translateButton" class="_button" @click.stop="translate()">{{ i18n.ts.translateNote }}</button>
 						<button v-else class="_button" @click.stop="translation = null">{{ i18n.ts.close }}</button>
 					</div>
 					<div v-if="translating || translation" :class="$style.translation">
 						<MkLoading v-if="translating" mini/>
 						<div v-else-if="translation">
 							<b>{{ i18n.tsx.translatedFrom({ x: translation.sourceLang }) }}:</b><hr style="margin: 10px 0;">
-							<Mfm
+							<Mfm v-if="appearNote.text"
 								:text="translation.text"
 								:author="appearNote.user"
 								:nyaize="defaultStore.state.disableNyaize || noNyaize ? false : 'respect'"
@@ -754,12 +754,19 @@ async function clip(): Promise<void> {
 	os.popupMenu(await getNoteClipMenu({ note: note.value, isDeleted, currentClip: currentClip?.value }), clipButton.value).then(focus);
 }
 
-const isForeignLanguage: boolean = appearNote.value.text != null && (() => {
+const isForeignLanguage: boolean = (appearNote.value.text != null || appearNote.value.poll != null) && (() => {
 	const targetLang = (miLocalStorage.getItem('lang') ?? navigator.language).slice(0, 2);
-	const postLang = detectLanguage(appearNote.value.text);
-	const choicesLang = appearNote.value.poll?.choices.map((choice) => choice.text).join(' ') ?? '';
-	const pollLang = detectLanguage(choicesLang);
-	return postLang !== '' && (postLang !== targetLang || pollLang !== targetLang);
+	if (appearNote.value.text) {
+		const postLang = detectLanguage(appearNote.value.text);
+		if (postLang !== '' && postLang !== targetLang) return true;
+	}
+	if (appearNote.value.poll) {
+		const foreignLang = appearNote.value.poll.choices
+			.map((choice) => detectLanguage(choice.text))
+			.filter((lang) => lang !== targetLang).length;
+		if (0 < foreignLang) return true;
+	}
+	return false;
 })();
 
 if (defaultStore.state.useAutoTranslate && instance.translatorAvailable && $i.policies.canUseTranslator && $i.policies.canUseAutoTranslate && !isLong && (appearNote.value.cw == null || showContent.value) && appearNote.value.text && isForeignLanguage) translate();
@@ -769,6 +776,15 @@ async function translate(): Promise<void> {
 	collapsed.value = false;
 	translating.value = true;
 
+	if (appearNote.value.text == null) {
+		translating.value = false;
+		translation.value = {
+			sourceLang: '',
+			text: '',
+		};
+		return;
+	}
+
 	vibrate(defaultStore.state.vibrateSystem ? 5 : []);
 
 	if (props.mock) {

packages/frontend/src/components/MkNoteDetailed.vue

@@ -117,15 +117,15 @@ SPDX-License-Identifier: AGPL-3.0-only
 					:enableAnimatedMfm="enableAnimatedMfm"
 				/>
 				<a v-if="appearNote.renote != null" :class="$style.rn">RN:</a>
-				<div v-if="defaultStore.state.showTranslateButtonInNote && (!defaultStore.state.useAutoTranslate || (!$i.policies.canUseAutoTranslate || (defaultStore.state.useAutoTranslate && (appearNote.cw != null || !showContent)))) && instance.translatorAvailable && $i && $i.policies.canUseTranslator && appearNote.text && isForeignLanguage" style="padding-top: 5px; color: var(--MI_THEME-accent);">
+				<div v-if="defaultStore.state.showTranslateButtonInNote && (!defaultStore.state.useAutoTranslate || (!$i.policies.canUseAutoTranslate || (defaultStore.state.useAutoTranslate && (appearNote.cw != null || !showContent)))) && instance.translatorAvailable && $i && $i.policies.canUseTranslator && (appearNote.text || appearNote.poll) && isForeignLanguage" style="padding-top: 5px; color: var(--MI_THEME-accent);">
 					<button v-if="!(translating || translation)" ref="translateButton" class="_button" @click="translate()">{{ i18n.ts.translateNote }}</button>
 					<button v-else class="_button" @click="translation = null">{{ i18n.ts.close }}</button>
 				</div>
 				<div v-if="translating || translation" :class="$style.translation">
 					<MkLoading v-if="translating" mini/>
 					<div v-else-if="translation">
 						<b>{{ i18n.tsx.translatedFrom({ x: translation.sourceLang }) }}:</b><hr style="margin: 10px 0;">
-						<Mfm
+						<Mfm v-if="appearNote.text"
 							:text="translation.text"
 							:author="appearNote.user"
 							:nyaize="defaultStore.state.disableNyaize || noNyaize ? false : 'respect'"
@@ -683,12 +683,19 @@ function showMenu(): void {
 	os.popupMenu(menu, menuButton.value).then(focus).finally(cleanup);
 }
 
-const isForeignLanguage: boolean = appearNote.value.text != null && (() => {
+const isForeignLanguage: boolean = (appearNote.value.text != null || appearNote.value.poll != null) && (() => {
 	const targetLang = (miLocalStorage.getItem('lang') ?? navigator.language).slice(0, 2);
-	const postLang = detectLanguage(appearNote.value.text);
-	const choicesLang = appearNote.value.poll?.choices.map((choice) => choice.text).join(' ') ?? '';
-	const pollLang = detectLanguage(choicesLang);
-	return postLang !== '' && (postLang !== targetLang || pollLang !== targetLang);
+	if (appearNote.value.text) {
+		const postLang = detectLanguage(appearNote.value.text);
+		if (postLang !== '' && postLang !== targetLang) return true;
+	}
+	if (appearNote.value.poll) {
+		const foreignLang = appearNote.value.poll.choices
+			.map((choice) => detectLanguage(choice.text))
+			.filter((lang) => lang !== targetLang).length;
+		if (0 < foreignLang) return true;
+	}
+	return false;
 })();
 
 if (defaultStore.state.useAutoTranslate && instance.translatorAvailable && $i.policies.canUseTranslator && $i.policies.canUseAutoTranslate && (appearNote.value.cw == null || showContent.value) && appearNote.value.text && isForeignLanguage) translate();
@@ -699,6 +706,15 @@ async function translate(): Promise<void> {
 
 	vibrate(defaultStore.state.vibrateSystem ? 5 : []);
 
+	if (appearNote.value.text == null) {
+		translating.value = false;
+		translation.value = {
+			sourceLang: '',
+			text: '',
+		};
+		return;
+	}
+
 	const res = await misskeyApi('notes/translate', {
 		noteId: appearNote.value.id,
 		targetLang: miLocalStorage.getItem('lang') ?? navigator.language,

packages/frontend/src/components/MkUrlPreview.vue

@@ -44,7 +44,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	</div>
 </template>
 <div v-else>
-	<component :is="self ? 'MkA' : 'a'" :class="[$style.link, { [$style.compact]: compact }]" :[attr]="self ? url_string.substring(local.length) : url_string" rel="nofollow noopener" :target="target" :title="url_string" @click.stop="(ev: MouseEvent) => warningExternalWebsite(ev, url)">
+	<component :is="self ? 'MkA' : 'a'" :class="[$style.link, { [$style.compact]: compact }]" :[attr]="self ? url_string.substring(local.length) : url_string" rel="nofollow noopener" :target="target" :title="url_string" @click.stop="(ev: MouseEvent) => warningExternalWebsite(ev, url_string)">
 		<div v-if="thumbnail && !sensitive" :class="[$style.thumbnail, { [$style.thumbnailBlur]: sensitive }]" :style="defaultStore.state.dataSaver.urlPreview ? '' : `background-image: url('${thumbnail}')`">
 		</div>
 		<article :class="$style.body">

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

@@ -7,7 +7,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <component
 	:is="self ? 'MkA' : 'a'" ref="el" :class="$style.root" class="_link" :[attr]="self ? url_string.substring(local.length) : url_string" :rel="rel ?? 'nofollow noopener'" :target="target"
 	:behavior="props.navigationBehavior"
-	@click.stop="(ev: MouseEvent) => warningExternalWebsite(ev, props.url)"
+	@click.stop="(ev: MouseEvent) => warningExternalWebsite(ev, url_string)"
 	@contextmenu.stop="() => {}"
 >
 	<template v-if="!self">

packages/frontend/src/pages/user/index.timeline.files.files.vue

@@ -4,48 +4,58 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<div v-if="files.files.length > 0" :class="$style.root">
-	<div v-if="files.files[0].isSensitive && !showingFiles.includes(files.files[0].id)" :key="files.id + files.files[0].id" :class="$style.img" @click="showingFiles.push(files.files[0].id)">
+<div v-if="note.files.length > 0" :class="$style.root">
+	<div v-if="!showingFiles.includes(note.files[0].id)" :key="note.id + note.files[0].id" :class="$style.img" @click="onClick($event,note.files[0])" @dblclick="onDblClick(note.files[0])">
 		<!-- TODO: 画像以外のファイルに対応 -->
-		<ImgWithBlurhash :class="$style.sensitiveImg" :hash="files.files[0].blurhash" :src="thumbnail(files.files[0])" :title="files.files[0].name" :forceBlurhash="true"/>
+		<ImgWithBlurhash :class="$style.sensitiveImg" :hash="note.files[0].blurhash" :src="thumbnail(note.files[0])" :title="note.files[0].name" :forceBlurhash="true"/>
 		<div :class="$style.sensitive">
 			<div>
-				<div><i class="ti ti-eye-exclamation"></i> {{ i18n.ts.sensitive }}</div>
+				<div v-if="note.files[0].isSensitive" style="display: block;"><i class="ti ti-eye-exclamation"></i> {{ i18n.ts.sensitive }}{{ defaultStore.state.dataSaver.media ? ` (${i18n.ts.image}${note.files[0].size ? ' ' + bytes(note.files[0].size) : ''})` : '' }}</div>
+				<div v-else style="display: block;"><i class="ti ti-photo"></i> {{ defaultStore.state.dataSaver.media && note.files[0].size ? bytes(note.files[0].size) : i18n.ts.image }}</div>
 				<div>{{ i18n.ts.clickToShow }}</div>
 			</div>
 		</div>
 	</div>
-	<MkA v-else :class="[$style.img, { [$style.multipleImg]: files.files.length > 1 }]" :to="notePage(files)">
+	<MkA v-else :class="[$style.img, { [$style.multipleImg]: note.files.length > 1 }]" :to="notePage(note)">
 		<!-- TODO: 画像以外のファイルに対応 -->
 		<ImgWithBlurhash
-			:hash="files.files[0].blurhash"
-			:src="thumbnail(files.files[0])"
-			:title="files.files[0].name"
+			:hash="note.files[0].blurhash"
+			:src="thumbnail(note.files[0])"
+			:title="note.files[0].name"
 			@mouseover="defaultStore.state.showingAnimatedImages === 'interaction' ? playAnimation = true : ''"
 			@mouseout="defaultStore.state.showingAnimatedImages === 'interaction' ? playAnimation = false : ''"
 			@touchstart="defaultStore.state.showingAnimatedImages === 'interaction' ? playAnimation = true : ''"
 			@touchend="defaultStore.state.showingAnimatedImages === 'interaction' ? playAnimation = false : ''"
 		/>
+		<div :class="$style.indicators">
+			<div v-if="['image/gif'].includes(note.files[0].type)" :class="$style.indicator">GIF</div>
+			<div v-if="['image/apng'].includes(note.files[0].type)" :class="$style.indicator">APNG</div>
+			<div v-if="note.files[0].isSensitive" :class="$style.indicator" style="color: var(--MI_THEME-warn);" :title="i18n.ts.sensitive"><i class="ti ti-eye-exclamation"></i></div>
+		</div>
 	</MkA>
-	<div v-if="files.files.length > 1" :class="$style.multiple">
+	<div v-if="note.files.length > 1" :class="$style.multiple">
 		<i class="ti ti-box-multiple"></i>
 	</div>
 </div>
 </template>
 
 <script lang="ts" setup>
-import { onMounted, onUnmounted, ref } from 'vue';
+import { onMounted, onUnmounted, ref, watch } from 'vue';
 import * as Misskey from 'cherrypick-js';
 import { getStaticImageUrl } from '@/scripts/media-proxy.js';
 import { notePage } from '@/filters/note.js';
 import ImgWithBlurhash from '@/components/MkImgWithBlurhash.vue';
 import MkA from '@/components/global/MkA.vue';
 import { defaultStore } from '@/store.js';
 import { i18n } from '@/i18n.js';
+import MkRippleEffect from '@/components/MkRippleEffect.vue';
+import * as os from '@/os.js';
+import { confirmR18, wasConfirmR18 } from '@/scripts/check-r18.js';
+import bytes from '@/filters/bytes.js';
 
 const props = defineProps<{
 	user: Misskey.entities.UserDetailed;
-	files: Misskey.entities.DriveFile[];
+	note: Misskey.entities.Note & { files:Misskey.entities.DriveFile[] };
 }>();
 
 const showingFiles = ref<string[]>([]);
@@ -60,6 +70,56 @@ function thumbnail(image: Misskey.entities.DriveFile): string | null {
 		: image.thumbnailUrl;
 }
 
+async function onClick(ev: MouseEvent, image:Misskey.entities.DriveFile) {
+	if (!showingFiles.value.includes(image.id)) {
+		ev.stopPropagation();
+		if (image.isSensitive && !await confirmR18()) return;
+		if (image.isSensitive && defaultStore.state.confirmWhenRevealingSensitiveMedia) {
+			const { canceled } = await os.confirm({
+				type: 'question',
+				text: i18n.ts.sensitiveMediaRevealConfirm,
+			});
+			if (canceled) return;
+			showingFiles.value.push(image.id);
+		}
+	}
+
+	if (defaultStore.state.nsfwOpenBehavior === 'doubleClick') os.popup(MkRippleEffect, { x: ev.clientX, y: ev.clientY }, {});
+	if (defaultStore.state.nsfwOpenBehavior === 'click') showingFiles.value.push(image.id);
+}
+
+async function onDblClick(image:Misskey.entities.DriveFile) {
+	if (image.isSensitive && !await confirmR18()) return;
+	if (!showingFiles.value.includes(image.id) && defaultStore.state.nsfwOpenBehavior === 'doubleClick') showingFiles.value.push(image.id);
+}
+
+watch(() => props.note, () => {
+	if (defaultStore.state.nsfw === 'force' || defaultStore.state.dataSaver.media) {
+		//hide = true;
+	} else {
+		for (const image of props.note.files) {
+			if (image.isSensitive) {
+				if (defaultStore.state.nsfw !== 'ignore') {
+					//hide = true;
+				} else {
+					if (wasConfirmR18()) {
+						if (!showingFiles.value.includes(image.id)) {
+							showingFiles.value.push(image.id);
+						}
+					}
+				}
+			} else {
+				if (!showingFiles.value.includes(image.id)) {
+					showingFiles.value.push(image.id);
+				}
+			}
+		}
+	}
+}, {
+	deep: true,
+	immediate: true,
+});
+
 function resetTimer() {
 	playAnimation.value = true;
 	clearTimeout(playAnimationTimer);
@@ -118,11 +178,16 @@ onUnmounted(() => {
 	width: 100%;
 	height: 100%;
 	display: grid;
-  place-items: center;
+	place-items: center;
 	font-size: 0.8em;
 	color: #fff;
 	cursor: pointer;
 }
+.sensitive > div{
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+}
 
 .multipleImg {
 	filter: brightness(0.9);
@@ -137,6 +202,27 @@ onUnmounted(() => {
 	opacity: .9;
 }
 
+.indicators {
+	display: inline-flex;
+	position: absolute;
+	top: 10px;
+	left: 10px;
+	pointer-events: none;
+	opacity: .5;
+	gap: 6px;
+}
+
+.indicator {
+	/* Hardcode to black because either --MI_THEME-bg or --MI_THEME-fg makes it hard to read in dark/light mode */
+	background-color: black;
+	border-radius: 6px;
+	color: var(--MI_THEME-accentLighten);
+	display: inline-block;
+	font-weight: bold;
+	font-size: 0.8em;
+	padding: 2px 5px;
+}
+
 @container (max-width: 785px) {
 	.img {
 		height: 192px;