feat: show alt button even when content hidden

packages/client/src/components/MkMedia.vue

@@ -1,62 +1,64 @@
 <template>
-	<button v-if="hide" class="qjewsnkg" @click="hide = false">
+	<div class="media" :class="{ mini: plyrMini }">
-		<ImgWithBlurhash
+		<button v-if="hide" class="hidden" @click="hide = false">
-			:hash="media.blurhash"
-			:title="media.comment"
-			:alt="media.comment"
-		/>
-		<div class="text">
-			<div class="wrapper">
-				<b style="display: block"
-					><i class="ph-warning ph-bold ph-lg"></i>
-					{{ i18n.ts.sensitive }}</b
-				>
-				<span style="display: block">{{ i18n.ts.clickToShow }}</span>
-			</div>
-		</div>
-	</button>
-	<div v-else class="gqnyydlz media" :class="{ mini: plyrMini }">
-		<a 
-			v-if="media.type.startsWith('image')" 
-			:href="media.url"
-		>
 			<ImgWithBlurhash
 				:hash="media.blurhash"
-				:src="url"
+				:title="media.comment"
 				:alt="media.comment"
-				:type="media.type"
-				:cover="false"
 			/>
-			<div v-if="media.type === 'image/gif'" class="gif">GIF</div>
+			<div class="text">
-		</a>
+				<div class="wrapper">
-		<VuePlyr
+					<b style="display: block"
-			v-if="media.type.startsWith('video')" 
+						><i class="ph-warning ph-bold ph-lg"></i>
-			ref="plyr"
+						{{ i18n.ts.sensitive }}</b
-			:options="{
+					>
-				controls: [
+					<span style="display: block">{{ i18n.ts.clickToShow }}</span>
-					'play-large',
+				</div>
-					'play',
+			</div>
-					'progress',
+		</button>
-					'current-time',
+		<template v-else>
-					'mute',
+			<a 
-					'volume',
+				v-if="media.type.startsWith('image')" 
-					'pip',
+				:href="media.url"
-					'download',
-					'fullscreen',
-				],
-				disableContextMenu: false,
-			}"
-		>
-			<video
-				:poster="media.thumbnailUrl"
-				:aria-label="media.comment"
-				preload="none"
-				controls
-				@contextmenu.stop
 			>
-				<source :src="media.url" :type="media.type" />
+				<ImgWithBlurhash
-			</video>
+					:hash="media.blurhash"
-		</VuePlyr>
+					:src="url"
+					:alt="media.comment"
+					:type="media.type"
+					:cover="false"
+				/>
+				<div v-if="media.type === 'image/gif'" class="gif">GIF</div>
+			</a>
+			<VuePlyr
+				v-if="media.type.startsWith('video')"
+				ref="plyr"
+				:options="{
+					controls: [
+						'play-large',
+						'play',
+						'progress',
+						'current-time',
+						'mute',
+						'volume',
+						'pip',
+						'download',
+						'fullscreen',
+					],
+					disableContextMenu: false,
+				}"
+			>
+				<video
+					:poster="media.thumbnailUrl"
+					:aria-label="media.comment"
+					preload="none"
+					controls
+					@contextmenu.stop
+				>
+					<source :src="media.url" :type="media.type" />
+				</video>
+			</VuePlyr>
+		</template>
 		<div class="buttons">
 			<button
 				v-if="media.comment"
@@ -67,9 +69,10 @@
 				<i class="ph-subtitles ph-bold ph-lg"></i>
 			</button>
 			<button
+				v-if="!hide"
 				v-tooltip="i18n.ts.hide"
 				class="_button"
-				@click="hide = true"
+				@click.stop="hide = true"
 			>
 				<i class="ph-eye-slash ph-bold ph-lg"></i>
 			</button>
@@ -141,9 +144,11 @@ onMounted(() => {
 </script>
 
 <style lang="scss" scoped>
-.qjewsnkg {
+.hidden {
 	all: unset;
 	position: relative;
+	width: 100%;
+	height: 100%;
 
 	> .text {
 		position: relative;