DatseMultimediaSites
/
Sharkey
mirror of https://activitypub.software/TransFem-org/Sharkey.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Cleaning up some old comments

This commit is contained in:
KevinWh0 2024-02-27 01:05:10 +01:00
parent 78975ddcc8
commit 81dfc1bfcb
1 changed files with 49 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
packages/frontend/src/components/MkDriveFileThumbnail.vue
View File

@ -5,17 +5,25 @@ 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="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>
<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="ph-video ph-bold ph-lg" :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>
@ -56,6 +64,20 @@ 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 +104,21 @@ 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-sm);
color: var(--accentLighten);
display: inline-block;
font-weight: bold;
font-size: 0.8em;
padding: 2px 5px;
}
</style>