From abd08e70ce7003c5a7f3d26c3847f8a58963a4a0 Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Sat, 14 Dec 2024 20:04:18 +0900
Subject: [PATCH] =?UTF-8?q?=E3=81=9D=E3=81=AE=E4=BB=96=E3=81=AE=E3=83=A1?=
 =?UTF-8?q?=E3=83=87=E3=82=A3=E3=82=A2=E3=81=8C=E3=81=A1=E3=82=83=E3=82=93?=
 =?UTF-8?q?=E3=81=A8=E3=83=97=E3=83=AC=E3=83=93=E3=83=A5=E3=83=BC=E3=81=95?=
 =?UTF-8?q?=E3=82=8C=E3=82=8B=E3=82=88=E3=81=86=E3=81=AB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/MkNoteMediaGrid.file.vue   | 46 +++++++++++++++++++
 .../src/components/MkNoteMediaGrid.vue        | 36 +++++++++++----
 .../frontend/src/pages/user/index.files.vue   |  2 +-
 3 files changed, 75 insertions(+), 9 deletions(-)
 create mode 100644 packages/frontend/src/components/MkNoteMediaGrid.file.vue

diff --git a/packages/frontend/src/components/MkNoteMediaGrid.file.vue b/packages/frontend/src/components/MkNoteMediaGrid.file.vue
new file mode 100644
index 0000000000..3eaf68ba49
--- /dev/null
+++ b/packages/frontend/src/components/MkNoteMediaGrid.file.vue
@@ -0,0 +1,46 @@
+<!--
+SPDX-FileCopyrightText: syuilo and misskey-project
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<div :class="[$style.filePreview, { [$style.bgIsPanel]: bgIsPanel }]">
+	<div :class="$style.icon">
+		<i v-if="!FILE_TYPE_BROWSERSAFE.includes(file.type)" class="ti ti-file"></i>
+		<i v-else-if="file.type.startsWith('video/')" class="ti ti-video"></i>
+		<i v-else-if="file.type.startsWith('audio/')" class="ti ti-music"></i>
+		<i v-else class="ti ti-file"></i>
+	</div>
+</div>
+</template>
+
+<script setup lang="ts">
+import * as Misskey from 'misskey-js';
+
+import { FILE_TYPE_BROWSERSAFE } from '@@/js/const.js';
+
+defineProps<{
+	file: Misskey.entities.DriveFile;
+	bgIsPanel?: boolean;
+}>();
+</script>
+
+<style lang="scss" module>
+.filePreview {
+	background-color: var(--MI_THEME-panel);
+	height: 100%;
+	border-radius: 6px;
+	display: flex;
+	align-items: center;
+
+	&.bgIsPanel {
+		background-color: var(--MI_THEME-bg);
+	}
+
+	> .icon {
+		width: 100%;
+		text-align: center;
+		font-size: 36px;
+	}
+}
+</style>
diff --git a/packages/frontend/src/components/MkNoteMediaGrid.vue b/packages/frontend/src/components/MkNoteMediaGrid.vue
index 14d7efc817..5c01b9298b 100644
--- a/packages/frontend/src/components/MkNoteMediaGrid.vue
+++ b/packages/frontend/src/components/MkNoteMediaGrid.vue
@@ -7,7 +7,15 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<template v-for="file in note.files">
 		<div v-if="file.isSensitive && !showingFiles.includes(file.id)" :class="[$style.img, { [$style.square]: square }]" @click="showingFiles.push(file.id)">
 			<!-- TODO: 画像以外のファイルに対応 -->
-			<ImgWithBlurhash :class="$style.sensitiveImg" :hash="file.blurhash" :src="thumbnail(file)" :title="file.name" :forceBlurhash="true"/>
+			<ImgWithBlurhash
+				v-if="FILE_TYPE_BROWSERSAFE.includes(file.type) && (file.type.startsWith('image/') || (file.type.startsWith('video/') && file.thumbnailUrl != null))"
+				:class="$style.sensitiveImg"
+				:hash="file.blurhash"
+				:src="thumbnail(file)"
+				:title="file.name"
+				:forceBlurhash="true"
+			/>
+			<XFilePreview v-else :class="$style.sensitiveFile" :file="file" :bgIsPanel="bgIsPanel"/>
 			<div :class="$style.sensitive">
 				<div>
 					<div><i class="ti ti-eye-exclamation"></i> {{ i18n.ts.sensitive }}</div>
@@ -17,7 +25,13 @@ SPDX-License-Identifier: AGPL-3.0-only
 		</div>
 		<MkA v-else :class="[$style.img, { [$style.square]: square }]" :to="notePage(note)">
 			<!-- TODO: 画像以外のファイルに対応 -->
-			<ImgWithBlurhash :hash="file.blurhash" :src="thumbnail(file)" :title="file.name"/>
+			<ImgWithBlurhash
+				v-if="FILE_TYPE_BROWSERSAFE.includes(file.type) && (file.type.startsWith('image/') || (file.type.startsWith('video/') && file.thumbnailUrl != null))"
+				:hash="file.blurhash"
+				:src="thumbnail(file)"
+				:title="file.name"
+			/>
+			<XFilePreview v-else :file="file" :bgIsPanel="bgIsPanel"/>
 		</MkA>
 	</template>
 </template>
@@ -25,6 +39,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 
 import { ref } from 'vue';
+import { FILE_TYPE_BROWSERSAFE } from '@@/js/const.js';
 import { notePage } from '@/filters/note.js';
 import { i18n } from '@/i18n.js';
 import ImgWithBlurhash from '@/components/MkImgWithBlurhash.vue';
@@ -32,9 +47,12 @@ import * as Misskey from 'misskey-js';
 import { defaultStore } from '@/store.js';
 import { getProxiedImageUrl, getStaticImageUrl } from '@/scripts/media-proxy.js';
 
+import XFilePreview from '@/components/MkNoteMediaGrid.file.vue';
+
 defineProps<{
 	note: Misskey.entities.Note;
 	square?: boolean;
+	bgIsPanel?: boolean;
 }>();
 
 const showingFiles = ref<string[]>([]);
@@ -59,17 +77,15 @@ function thumbnail(image: Misskey.entities.DriveFile): string {
 	border-radius: 6px;
 	overflow: clip;
 
+	&:hover {
+		text-decoration: none;
+	}
+
 	&.square {
 		height: 100%;
 	}
 }
 
-.empty {
-	margin: 0;
-	padding: 16px;
-	text-align: center;
-}
-
 .sensitiveImg {
 	position: absolute;
 	top: 0;
@@ -79,6 +95,10 @@ function thumbnail(image: Misskey.entities.DriveFile): string {
 	filter: brightness(0.7);
 }
 
+.sensitiveFile {
+	filter: brightness(0.5) blur(2px);
+}
+
 .sensitive {
 	position: absolute;
 	top: 0;
diff --git a/packages/frontend/src/pages/user/index.files.vue b/packages/frontend/src/pages/user/index.files.vue
index dda7f4faaa..33b40d657c 100644
--- a/packages/frontend/src/pages/user/index.files.vue
+++ b/packages/frontend/src/pages/user/index.files.vue
@@ -10,7 +10,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<div :class="$style.root">
 		<MkLoading v-if="fetching"/>
 		<div v-if="!fetching && notes.length > 0" :class="$style.stream">
-			<MkNoteMediaGrid v-for="note in notes" :note="note"/>
+			<MkNoteMediaGrid v-for="note in notes" :note="note" bgIsPanel/>
 		</div>
 		<p v-if="!fetching && notes.length == 0" :class="$style.empty">{{ i18n.ts.nothing }}</p>
 	</div>