From 81dfc1bfcb30996c4ce1932dfefc814d4bad217c Mon Sep 17 00:00:00 2001
From: KevinWh0 <45321184+KevinWh0@users.noreply.github.com>
Date: Tue, 27 Feb 2024 01:05:10 +0100
Subject: [PATCH] Cleaning up some old comments

---
 .../src/components/MkDriveFileThumbnail.vue   | 59 +++++++++++++++----
 1 file changed, 49 insertions(+), 10 deletions(-)

diff --git a/packages/frontend/src/components/MkDriveFileThumbnail.vue b/packages/frontend/src/components/MkDriveFileThumbnail.vue
index 2f1fef4ea6..a2bf68691d 100644
--- a/packages/frontend/src/components/MkDriveFileThumbnail.vue
+++ b/packages/frontend/src/components/MkDriveFileThumbnail.vue
@@ -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>