woem.men/forkey
4
2
Fork 3
Code Issues 34 Pull requests 16 Projects Releases Packages Wiki Activity Actions

add ALT indicator for files with alt text
Some checks failed
Dockle / dockle (pull_request) Failing after 1m2s
Details
Test (frontend) / vitest (22.x) (pull_request) Failing after 5s
Details
Lint / pnpm_install (pull_request) Successful in 2m8s
Details
Pull Request Labeler / triage (pull_request_target) Failing after 2s
Details
Test (production install and build) / production (22.x) (pull_request) Successful in 2m33s
Details
Lint / lint (backend) (pull_request) Failing after 2m6s
Details
Lint / lint (sw) (pull_request) Successful in 2m10s
Details
Lint / lint (misskey-js) (pull_request) Successful in 2m6s
Details
Lint / typecheck (backend) (pull_request) Successful in 2m56s
Details
Lint / typecheck (misskey-js) (pull_request) Successful in 2m9s
Details
Lint / lint (frontend) (pull_request) Failing after 12m58s
Details

Browse source
This commit is contained in:
Leah 2025-01-11 22:07:02 +01:00
parent 53f0cefd04
commit 4bca0899ec
1 changed files with 50 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

60
packages/frontend/src/components/MkDriveFileThumbnail.vue
View file

@ -5,20 +5,29 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<div ref="thumbnail" :class="$style.root">
<ImgWithBlurhash v-if="isThumbnailAvailable" :hash="file.blurhash" :src="file.thumbnailUrl" :alt="file.name" :title="file.name" :cover="fit !== 'contain'"/>
<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>
<i v-else-if="is === 'csv'" class="ti ti-file-text" :class="$style.icon"></i>
<i v-else-if="is === 'pdf'" class="ti ti-file-text" :class="$style.icon"></i>
<i v-else-if="is === 'textfile'" class="ti ti-file-text" :class="$style.icon"></i>
<i v-else-if="is === 'archive'" class="ti ti-file-zip" :class="$style.icon"></i>
<i v-else class="ti ti-file" :class="$style.icon"></i>
<template v-if="isThumbnailAvailable && is === 'image'">
<div class="relative">
<ImgWithBlurhash :hash="file.blurhash" :src="file.thumbnailUrl" :alt="file.name" :title="file.name" :cover="fit !== 'contain'"/>
<i v-if="isThumbnailAvailable && is === 'video'" class="ti ti-video" :class="$style.iconSub"></i>
<div v-if="props.file.comment" v-tooltip="getTrimmedAltText()" :class="$style.hasAltText">ALT</div>
</div>
</template>
<template v-else>
<i v-if="is === 'image'" class="ph-image-square ph-bold ph-lg" :class="$style.icon"></i>
<i v-else-if="is === 'video'" class="ph-video ph-bold ph-lg" :class="$style.icon"></i>
<i v-else-if="is === 'audio' || is === 'midi'" class="ph-file-audio ph-bold ph-lg" :class="$style.icon"></i>
<i v-else-if="is === 'csv'" class="ph-file-text ph-bold ph-lg" :class="$style.icon"></i>
<i v-else-if="is === 'pdf'" class="ph-file-text ph-bold ph-lg" :class="$style.icon"></i>
<i v-else-if="is === 'textfile'" class="ph-file-text ph-bold ph-lg" :class="$style.icon"></i>
<i v-else-if="is === 'archive'" class="ph-file-zip ph-bold ph-lg" :class="$style.icon"></i>
<i v-else class="ph-file ph-bold ph-lg" :class="$style.icon"></i>
<i v-if="isThumbnailAvailable && is === 'video'" class="ph-video ph-bold ph-lg" :class="$style.iconSub"></i>
</template>
</div>
</template>
<script lang="ts" setup>
import { computed } from 'vue';
import * as Misskey from 'misskey-js';
@ -56,6 +65,21 @@ const isThumbnailAvailable = computed(() => {
? (is.value === 'image' as const || is.value === 'video')
: false;
});
const getTrimmedAltText = () => {
if (props.file.comment == null) {
return '';
}
const maxCharacters = 40;
const alt = props.file.comment as unknown as string;
if (alt.length > maxCharacters) {
return alt.substring(0, maxCharacters) + '...';
}
return alt;
};
</script>
<style lang="scss" module>
@ -82,4 +106,20 @@ const isThumbnailAvailable = computed(() => {
font-size: 32px;
color: #777;
}
.hasAltText {
position: absolute;
bottom: 0px;
right: 0px;
z-index: 3;
margin: 5px;
cursor: help;
background-color: black;
border-radius: var(--radius);
color: var(--accentLighten);
display: inline-block;
font-weight: bold;
font-size: 0.8em;
padding: 2px 5px;
}
</style>