From 7b79658dbdac7d2b9d3eb897a2b5a91420c39f6b Mon Sep 17 00:00:00 2001
From: Insert5StarName <anime@shourai.de>
Date: Fri, 22 Sep 2023 16:39:53 +0200
Subject: [PATCH] fix: alt text indicator and sensetive button

---
 .../frontend/src/components/MkMediaImage.vue  |  2 +-
 .../frontend/src/components/MkMediaVideo.vue  | 26 ++++++++++++++++++-
 2 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/packages/frontend/src/components/MkMediaImage.vue b/packages/frontend/src/components/MkMediaImage.vue
index ab770e5135..6375fba55b 100644
--- a/packages/frontend/src/components/MkMediaImage.vue
+++ b/packages/frontend/src/components/MkMediaImage.vue
@@ -142,7 +142,7 @@ function showMenu(ev: MouseEvent) {
 	display: block;
 	position: absolute;
 	border-radius: 6px;
-	background-color: var(--fg);
+	background-color: black;
 	color: var(--accentLighten);
 	font-size: 12px;
 	opacity: .5;
diff --git a/packages/frontend/src/components/MkMediaVideo.vue b/packages/frontend/src/components/MkMediaVideo.vue
index c5afe09745..103c725bdc 100644
--- a/packages/frontend/src/components/MkMediaVideo.vue
+++ b/packages/frontend/src/components/MkMediaVideo.vue
@@ -13,6 +13,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 	</div>
 </div>
 <div v-else :class="$style.visible">
+	<div :class="$style.indicators">
+			<div v-if="video.comment" :class="$style.indicator">ALT</div>
+			<div v-if="!video.comment" :class="$style.indicator" title="Video lacks descriptive text"><i class="ti ti-pencil-off"></i></div>
+	</div>
 	<video
 		:class="$style.video"
 		:poster="video.thumbnailUrl"
@@ -53,7 +57,7 @@ const hide = ref((defaultStore.state.nsfw === 'force' || defaultStore.state.enab
 	display: block;
 	position: absolute;
 	border-radius: 6px;
-	background-color: var(--fg);
+	background-color: black;
 	color: var(--accentLighten);
 	font-size: 14px;
 	opacity: .5;
@@ -89,4 +93,24 @@ const hide = ref((defaultStore.state.nsfw === 'force' || defaultStore.state.enab
 	text-align: center;
 	font-size: 12px;
 }
+.indicators {
+	display: inline-flex;
+	position: absolute;
+	top: 10px;
+	left: 10px;
+	pointer-events: none;
+	opacity: .5;
+	gap: 6px;
+}
+
+.indicator {
+	/* Hardcode to black because either --bg or --fg makes it hard to read in dark/light mode */
+	background-color: black;
+	border-radius: 6px;
+	color: var(--accentLighten);
+	display: inline-block;
+	font-weight: bold;
+	font-size: 0.8em;
+	padding: 2px 5px;
+}
 </style>