ユーザー概要の「ファイル」の挙動を通常の添付ファイルに合わせる (#472)

CHANGELOG_YOJO.md

@@ -15,6 +15,7 @@ Cherrypick 4.11.1
 - Enhance: お気に入り登録クリップの一覧画面から登録解除できるように
 - Fix: リモートから添付されてきたクリップURLにホスト情報があると二重になる不具合を修正 [#460](https://github.com/yojo-art/cherrypick/pull/460)
 - Fix: リモートクリップ説明文がローカル仕様になってる問題の修正 [#466](https://github.com/yojo-art/cherrypick/pull/466)
+- Fix: ユーザー概要の「ファイル」の挙動を通常の添付ファイルに合わせる [#472](https://github.com/yojo-art/cherrypick/pull/472)
 
 ### Server
 - Enhance: リモートユーザーの`/api/clips/show`と`/api/users/clips`の応答にemojisを追加 [#466](https://github.com/yojo-art/cherrypick/pull/466)

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

@@ -11,13 +11,14 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<MkLoading v-if="fetching"/>
 		<div v-if="!fetching && files.length > 0" :class="$style.stream">
 			<template v-for="file in files" :key="file.note.id + file.file.id">
-				<div v-if="file.file.isSensitive && !showingFiles.includes(file.file.id)" :class="$style.img" @click="showingFiles.push(file.file.id)">
+				<div v-if="!showingFiles.includes(file.file.id)" :class="$style.img" @click="e=>onClick(e,file.file)" @dblclick="e=>onDblClick(file.file)">
 					<!-- TODO: 画像以外のファイルに対応 -->
 					<ImgWithBlurhash :class="$style.sensitiveImg" :hash="file.file.blurhash" :src="thumbnail(file.file)" :title="file.file.name" :forceBlurhash="true"/>
-					<div :class="$style.sensitive">
+					<div :class="$style.hiddenTextWrapper">
 						<div>
-							<div><i class="ti ti-eye-exclamation"></i> {{ i18n.ts.sensitive }}</div>
-							<div>{{ i18n.ts.clickToShow }}</div>
+							<div v-if="file.file.isSensitive"><i class="ti ti-eye-exclamation"></i> {{ i18n.ts.sensitive }}{{ defaultStore.state.dataSaver.media ? ` (${i18n.ts.image}${file.file.size ? ' ' + bytes(file.file.size) : ''})` : '' }}</div>
+							<div v-else><i class="ti ti-photo"></i> {{ defaultStore.state.dataSaver.media && file.file.size ? bytes(file.file.size) : i18n.ts.image }}</div>
+							<div>{{ clickToShowMessage }}</div>
 						</div>
 					</div>
 				</div>
@@ -41,8 +42,9 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { onMounted, onUnmounted, ref } from 'vue';
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
 import * as Misskey from 'cherrypick-js';
+import bytes from '@/filters/bytes.js';
 import { getStaticImageUrl } from '@/scripts/media-proxy.js';
 import { notePage } from '@/filters/note.js';
 import { misskeyApi } from '@/scripts/misskey-api.js';
@@ -52,6 +54,9 @@ import MkA from '@/components/global/MkA.vue';
 import MkLoading from '@/components/global/MkLoading.vue';
 import { defaultStore } from '@/store.js';
 import { i18n } from '@/i18n.js';
+import { confirmR18, wasConfirmR18 } from '@/scripts/check-r18';
+import MkRippleEffect from '@/components/MkRippleEffect.vue';
+import * as os from '@/os.js';
 
 const props = defineProps<{
 	user: Misskey.entities.UserDetailed;
@@ -63,7 +68,34 @@ const files = ref<{
 	file: Misskey.entities.DriveFile;
 }[]>([]);
 const showingFiles = ref<string[]>([]);
+watch(() => files, () => {
+	for (const file of files.value) {
+		if (defaultStore.state.nsfw === 'force' || defaultStore.state.dataSaver.media) {
+			//nop
+		} else if (file.file.isSensitive) {
+			if (defaultStore.state.nsfw !== 'ignore') {
+				//nop
+			} else {
+				if (wasConfirmR18()) {
+					showingFiles.value.push(file.file.id);
+				}
+			}
+		} else {
+			showingFiles.value.push(file.file.id);
+		}
+	}
+}, {
+	deep: true,
+	immediate: true,
+});
 
+const clickToShowMessage = computed(() => defaultStore.state.nsfwOpenBehavior === 'click'
+	? i18n.ts.clickToShow
+	// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+	: defaultStore.state.nsfwOpenBehavior === 'doubleClick'
+		? i18n.ts.doubleClickToShow
+		: '',
+);
 const playAnimation = ref(true);
 if (defaultStore.state.showingAnimatedImages === 'interaction') playAnimation.value = false;
 let playAnimationTimer = setTimeout(() => playAnimation.value = false, 5000);
@@ -93,6 +125,7 @@ onMounted(() => {
 		limit: 15,
 	}).then(notes => {
 		for (const note of notes) {
+			if (!note.files) continue;
 			for (const file of note.files) {
 				files.value.push({
 					note,
@@ -111,6 +144,34 @@ onUnmounted(() => {
 		window.removeEventListener('touchend', resetTimer);
 	}
 });
+
+async function onClick(ev: MouseEvent, file: Misskey.entities.DriveFile) {
+	const isShow = showingFiles.value.includes(file.id);
+	if (!isShow) {
+		ev.stopPropagation();
+		if (file.isSensitive && !await confirmR18()) return;
+		if (file.isSensitive && defaultStore.state.confirmWhenRevealingSensitiveMedia) {
+			const { canceled } = await os.confirm({
+				type: 'question',
+				text: i18n.ts.sensitiveMediaRevealConfirm,
+			});
+			if (canceled) return;
+			showingFiles.value.push(file.id);
+		}
+	}
+
+	if (defaultStore.state.nsfwOpenBehavior === 'doubleClick') os.popup(MkRippleEffect, { x: ev.clientX, y: ev.clientY }, {});
+	if (!isShow && defaultStore.state.nsfwOpenBehavior === 'click') {
+		showingFiles.value.push(file.id);
+	}
+}
+
+async function onDblClick(file: Misskey.entities.DriveFile) {
+	if (file.isSensitive && !await confirmR18()) return;
+	if (!showingFiles.value.includes(file.id) && defaultStore.state.nsfwOpenBehavior === 'doubleClick') {
+		showingFiles.value.push(file.id);
+	};
+}
 </script>
 
 <style lang="scss" module>
@@ -145,14 +206,16 @@ onUnmounted(() => {
 	height: 100%;
 	filter: brightness(0.7);
 }
-.sensitive {
+.hiddenTextWrapper {
 	position: absolute;
 	top: 0;
 	left: 0;
 	width: 100%;
 	height: 100%;
-	display: grid;
-  place-items: center;
+	display: flex;
+	text-align: center;
+	align-items: center;
+	justify-content: center;
 	font-size: 0.8em;
 	color: #fff;
 	cursor: pointer;