mirror of
https://github.com/misskey-dev/misskey.git
synced 2024-12-27 10:20:27 +01:00
その他のメディアがちゃんとプレビューされるように
This commit is contained in:
kakkokari-gtyih
parent
562d3c23c5
commit
abd08e70ce
3 changed files with 75 additions and 9 deletions
46
packages/frontend/src/components/MkNoteMediaGrid.file.vue
Normal file
46
packages/frontend/src/components/MkNoteMediaGrid.file.vue
Normal file
|
|
@ -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>
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue