From 4bca0899ece2dd3904026fc75e89a8ae6a370f40 Mon Sep 17 00:00:00 2001
From: Leah <leah@leahdevs.xyz>
Date: Sat, 11 Jan 2025 22:07:02 +0100
Subject: [PATCH] add ALT indicator for files with alt text

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

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