diff options
Diffstat (limited to 'packages/frontend/src/components/MkDriveFileThumbnail.vue')
| -rw-r--r-- | packages/frontend/src/components/MkDriveFileThumbnail.vue | 28 |
1 files changed, 21 insertions, 7 deletions
diff --git a/packages/frontend/src/components/MkDriveFileThumbnail.vue b/packages/frontend/src/components/MkDriveFileThumbnail.vue index 1079e52030..5ba5de0c4a 100644 --- 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 }, - ]" + v-panel + :class="[$style.root, { + [$style.sensitiveHighlight]: highlightWhenSensitive && file.isSensitive, + [$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,8 @@ const props = defineProps<{ file: Misskey.entities.DriveFile; fit: 'cover' | 'contain'; highlightWhenSensitive?: boolean; + forceBlurhash?: boolean; + large?: boolean; }>(); const is = computed(() => { @@ -60,7 +70,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> @@ -101,4 +111,8 @@ const isThumbnailAvailable = computed(() => { font-size: 32px; color: #777; } + +.large .icon { + font-size: 40px; +} </style> |