feat: ALT button (#9265)

locales/en-US.yml

@@ -941,6 +941,7 @@ deleteAccountConfirm: "This will irreversibly delete your account. Proceed?"
 incorrectPassword: "Incorrect password."
 voteConfirm: "Confirm your vote for \"{choice}\"?"
 hide: "Hide"
+alt: "ALT"
 leaveGroup: "Leave group"
 leaveGroupConfirm: "Are you sure you want to leave \"{name}\"?"
 useDrawerReactionPickerForMobile: "Display reaction picker as drawer on mobile"

packages/client/src/components/MkMediaImage.vue

@@ -16,25 +16,34 @@
 		</div>
 	</button>
 	<div v-else class="gqnyydlz">
-		<a :href="image.url" :title="image.name">
+		<a :href="image.url">
 			<ImgWithBlurhash
 				:hash="image.blurhash"
 				:src="url"
 				:alt="image.comment"
 				:type="image.type"
-				:title="image.comment"
 				:cover="false"
 			/>
 			<div v-if="image.type === 'image/gif'" class="gif">GIF</div>
 		</a>
+		<div class="buttons">
+			<button
+				v-if="image.comment"
+				v-tooltip="i18n.ts.alt"
+				class="_button"
+				@click.stop="captionPopup"
+			>
+				<i class="ph-subtitles ph-bold ph-lg"></i>
+			</button>
 			<button
 				v-tooltip="i18n.ts.hide"
-			class="_button hide"
+				class="_button"
 				@click="hide = true"
 			>
 				<i class="ph-eye-slash ph-bold ph-lg"></i>
 			</button>
 		</div>
+	</div>
 </template>
 
 <script lang="ts" setup>
@@ -44,6 +53,8 @@ import { getStaticImageUrl } from "@/scripts/get-static-image-url";
 import ImgWithBlurhash from "@/components/MkImgWithBlurhash.vue";
 import { defaultStore } from "@/store";
 import { i18n } from "@/i18n";
+import * as os from "@/os";
+
 
 const props = defineProps<{
 	image: misskey.entities.DriveFile;
@@ -59,6 +70,13 @@ const url =
 		? getStaticImageUrl(props.image.thumbnailUrl)
 		: props.image.thumbnailUrl;
 
+function captionPopup() {
+	os.alert({
+		type: "info",
+		text: props.image.comment
+	})
+}
+
 // Plugin:register_note_view_interruptor を使って書き換えられる可能性があるためwatchする
 watch(
 	() => props.image,
@@ -110,10 +128,15 @@ watch(
 	position: relative;
 	background: var(--bg);
 
-	> .hide {
-		display: block;
+	> .buttons {
+		display: flex;
+		gap: 4px;
 		position: absolute;
 		border-radius: 6px;
+		overflow: hidden;
+		top: 12px;
+		right: 12px;
+		> * {
 			background-color: var(--accentedBg);
 			-webkit-backdrop-filter: var(--blur, blur(15px));
 			backdrop-filter: var(--blur, blur(15px));
@@ -121,11 +144,6 @@ watch(
 			font-size: 0.8em;
 			padding: 6px 8px;
 			text-align: center;
-		top: 12px;
-		right: 12px;
-
-		> i {
-			display: block;
 		}
 	}
 

packages/client/src/components/MkMediaVideo.vue

@@ -32,7 +32,6 @@
 		>
 			<video
 				:poster="video.thumbnailUrl"
-				:title="video.comment"
 				:aria-label="video.comment"
 				preload="none"
 				controls
@@ -41,14 +40,24 @@
 				<source :src="video.url" :type="video.type" />
 			</video>
 		</VuePlyr>
+		<div class="buttons">
+			<button
+				v-if="video.comment"
+				v-tooltip="i18n.ts.alt"
+				class="_button"
+				@click.stop="captionPopup"
+			>
+				<i class="ph-subtitles ph-bold ph-lg"></i>
+			</button>
 			<button
 				v-tooltip="i18n.ts.hide"
-			class="_button hide"
+				class="_button"
 				@click="hide = true"
 			>
 				<i class="ph-eye-slash ph-bold ph-lg"></i>
 			</button>
 		</div>
+	</div>
 </template>
 
 <script lang="ts" setup>
@@ -58,6 +67,7 @@ import type * as misskey from "calckey-js";
 import { defaultStore } from "@/store";
 import "vue-plyr/dist/vue-plyr.css";
 import { i18n } from "@/i18n";
+import * as os from "@/os";
 
 const props = defineProps<{
 	video: misskey.entities.DriveFile;
@@ -72,6 +82,13 @@ const hide = ref(
 		: props.video.isSensitive && defaultStore.state.nsfw !== "ignore"
 );
 
+function captionPopup() {
+	os.alert({
+		type: "info",
+		text: props.video.comment
+	})
+}
+
 onMounted(() => {
 	mini.value = plyr.value.player.media.scrollWidth < 300;
 	if (mini.value) {
@@ -87,10 +104,15 @@ onMounted(() => {
 	position: relative;
 	--plyr-color-main: var(--accent);
 
-	> .hide {
-		display: block;
+	> .buttons {
+		display: flex;
+		gap: 4px;
 		position: absolute;
 		border-radius: 6px;
+		overflow: hidden;
+		top: 12px;
+		right: 12px;
+		> * {
 			background-color: var(--accentedBg);
 			-webkit-backdrop-filter: var(--blur, blur(15px));
 			backdrop-filter: var(--blur, blur(15px));
@@ -98,11 +120,6 @@ onMounted(() => {
 			font-size: 0.8em;
 			padding: 6px 8px;
 			text-align: center;
-		top: 12px;
-		right: 12px;
-
-		> i {
-			display: block;
 		}
 	}