サムネイルをMkDriveFileThumbnailに統一

2024-12-27 10:20:27 +01:00 · 2024-12-16 09:25:10 +09:00 · 2024-12-16 09:25:10 +09:00 · a01d75ba01
commit a01d75ba01
parent 33051f06d5
5 changed files with 54 additions and 103 deletions
--- a/packages/frontend/src/components/MkDriveFileThumbnail.vue
+++ b/packages/frontend/src/components/MkDriveFileThumbnail.vue
@ -5,13 +5,21 @@ SPDX-License-Identifier: AGPL-3.0-only

 <template>
 <div
-	ref="thumbnail"
-	:class="[
-		$style.root,
-		{ [$style.sensitiveHighlight]: highlightWhenSensitive && file.isSensitive },
-	]"
+	:class="[$style.root, {
+		[$style.sensitiveHighlight]: highlightWhenSensitive && file.isSensitive,
+		[$style.bgIsPanel]: bgIsPanel,
+		[$style.large]: large,
+	}]"
 >
-	<ImgWithBlurhash v-if="isThumbnailAvailable" :hash="file.blurhash" :src="file.thumbnailUrl" :alt="file.name" :title="file.name" :cover="fit !== 'contain'"/>
+	<ImgWithBlurhash
+		v-if="isThumbnailAvailable"
+		:hash="file.blurhash"
+		:src="file.thumbnailUrl"
+		:alt="file.name"
+		:title="file.name"
+		:cover="fit !== 'contain'"
+		:forceBlurHash="forceBlurhash"
+	/>
 	<i v-else-if="is === 'image'" class="ti ti-photo" :class="$style.icon"></i>
 	<i v-else-if="is === 'video'" class="ti ti-video" :class="$style.icon"></i>
 	<i v-else-if="is === 'audio' || is === 'midi'" class="ti ti-file-music" :class="$style.icon"></i>
@ -34,6 +42,9 @@ const props = defineProps<{
 	file: Misskey.entities.DriveFile;
 	fit: 'cover' | 'contain';
 	highlightWhenSensitive?: boolean;
+	bgIsPanel?: boolean;
+	forceBlurhash?: boolean;
+	large?: boolean;
 }>();

 const is = computed(() => {
@ -60,7 +71,7 @@ const is = computed(() => {

 const isThumbnailAvailable = computed(() => {
 	return props.file.thumbnailUrl
-		? (is.value === 'image' as const || is.value === 'video')
+		? (is.value === 'image' || is.value === 'video')
 		: false;
 });
 </script>
@ -72,6 +83,10 @@ const isThumbnailAvailable = computed(() => {
 	background: var(--MI_THEME-panel);
 	border-radius: 8px;
 	overflow: clip;
+
+	&.bgIsPanel {
+		background: var(--MI_THEME-bg);
+	}
 }

 .sensitiveHighlight::after {
@ -101,4 +116,8 @@ const isThumbnailAvailable = computed(() => {
 	font-size: 32px;
 	color: #777;
 }
+
+.large .icon {
+	font-size: 40px;
+}
 </style>
--- a/packages/frontend/src/components/MkNoteMediaGrid.file.vue
+++ b/packages/frontend/src/components/MkNoteMediaGrid.file.vue
@ -1,46 +0,0 @@
-<!--
-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>
--- a/packages/frontend/src/components/MkNoteMediaGrid.vue
+++ b/packages/frontend/src/components/MkNoteMediaGrid.vue
@ -7,18 +7,18 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<template v-for="file in note.files">
 		<div
 			v-if="(defaultStore.state.nsfw === 'force' || file.isSensitive) && defaultStore.state.nsfw !== 'ignore' && !showingFiles.has(file.id)"
-			:class="[$style.img, { [$style.square]: square }]"
+			:class="[$style.filePreview, { [$style.square]: square }]"
 			@click="showingFiles.add(file.id)"
 		>
-			<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"
+			<MkDriveFileThumbnail
+				:file="file"
+				fit="cover"
+				:highlightWhenSensitive="defaultStore.state.highlightSensitiveMedia"
 				:forceBlurhash="true"
+				:large="true"
+				:bgIsPanel="bgIsPanel"
+				:class="$style.file"
 			/>
-			<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>
@ -26,30 +26,27 @@ SPDX-License-Identifier: AGPL-3.0-only
 				</div>
 			</div>
 		</div>
-		<MkA v-else :class="[$style.img, { [$style.square]: square }]" :to="notePage(note)">
-			<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"
+		<MkA v-else :class="[$style.filePreview, { [$style.square]: square }]" :to="notePage(note)">
+			<MkDriveFileThumbnail
+				:file="file"
+				fit="cover"
+				:highlightWhenSensitive="defaultStore.state.highlightSensitiveMedia"
+				:large="true"
+				:bgIsPanel="bgIsPanel"
+				:class="$style.file"
 			/>
-			<XFilePreview v-else :file="file" :bgIsPanel="bgIsPanel"/>
 		</MkA>
 	</template>
 </template>

 <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';
 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';
+import MkDriveFileThumbnail from '@/components/MkDriveFileThumbnail.vue';

 defineProps<{
 	note: Misskey.entities.Note;
@ -58,12 +55,6 @@ defineProps<{
 }>();

 const showingFiles = ref<Set<string>>(new Set());
-
-function thumbnail(image: Misskey.entities.DriveFile): string {
-	return defaultStore.state.disableShowingAnimatedImages
-		? getStaticImageUrl(image.url)
-		: image.thumbnailUrl ?? getProxiedImageUrl(image.url, 'preview');
-}
 </script>

 <style lang="scss" module>
@ -73,10 +64,10 @@ function thumbnail(image: Misskey.entities.DriveFile): string {
 	aspect-ratio: 1;
 }

-.img {
+.filePreview {
 	position: relative;
 	height: 128px;
-	border-radius: 6px;
+	border-radius: calc(var(--MI-radius) / 2);
 	overflow: clip;

 	&:hover {
@ -88,17 +79,10 @@ function thumbnail(image: Misskey.entities.DriveFile): string {
 	}
 }

-.sensitiveImg {
-	position: absolute;
-	top: 0;
-	left: 0;
+.file {
 	width: 100%;
 	height: 100%;
-	filter: brightness(0.7);
-}
-
-.sensitiveFile {
-	filter: brightness(0.5) blur(2px);
+	border-radius: calc(var(--MI-radius) / 2);
 }

 .sensitive {
@ -111,6 +95,8 @@ function thumbnail(image: Misskey.entities.DriveFile): string {
  place-items: center;
 	font-size: 0.8em;
 	color: #fff;
+	background: rgba(0, 0, 0, 0.5);
+	backdrop-filter: blur(5px);
 	cursor: pointer;
 }
 </style>
--- a/packages/frontend/src/pages/user/files.vue
+++ b/packages/frontend/src/pages/user/files.vue
@ -8,7 +8,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<div :class="$style.root">
 			<MkPagination v-slot="{items}" :pagination="pagination">
 				<div :class="$style.stream">
-					<MkMedias v-for="note in items" :note="note" square/>
+					<MkNoteMediaGrid v-for="note in items" :note="note" square/>
 				</div>
 			</MkPagination>
 		</div>
@ -19,7 +19,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 import { computed } from 'vue';
 import * as Misskey from 'misskey-js';

-import MkMedias from '@/components/MkNoteMediaGrid.vue';
+import MkNoteMediaGrid from '@/components/MkNoteMediaGrid.vue';
 import MkPagination from '@/components/MkPagination.vue';

 const props = defineProps<{
@ -28,7 +28,7 @@ const props = defineProps<{

 const pagination = {
 	endpoint: 'users/notes' as const,
-	limit: 10,
+	limit: 15,
 	params: computed(() => ({
 		userId: props.user.id,
 		withFiles: true,
@ -44,7 +44,7 @@ const pagination = {
 .stream {
 	display: grid;
 	grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
-	grid-gap: 6px;
+	gap: var(--MI-marginHalf);
 }

@media screen and (min-width: 600px) {
--- a/packages/frontend/src/pages/user/index.files.vue
+++ b/packages/frontend/src/pages/user/index.files.vue
@ -20,10 +20,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue';
 import * as Misskey from 'misskey-js';
-import { getProxiedImageUrl, getStaticImageUrl } from '@/scripts/media-proxy.js';
 import { misskeyApi } from '@/scripts/misskey-api.js';
 import MkContainer from '@/components/MkContainer.vue';
-import { defaultStore } from '@/store.js';
 import { i18n } from '@/i18n.js';
 import MkNoteMediaGrid from '@/components/MkNoteMediaGrid.vue';

@ -43,17 +41,11 @@ function unfoldContainer(): boolean {
 	return false;
 }

-function thumbnail(image: Misskey.entities.DriveFile): string {
-	return defaultStore.state.disableShowingAnimatedImages
-		? getStaticImageUrl(image.url)
-		: image.thumbnailUrl ?? getProxiedImageUrl(image.url, 'preview');
-}
-
 onMounted(() => {
 	misskeyApi('users/notes', {
 		userId: props.user.id,
 		withFiles: true,
-		limit: 15,
+		limit: 10,
 	}).then(_notes => {
 		notes.value = _notes;
 		fetching.value = false;