enhance: Alt text in image viewer (#9109)

* Alt text in image viewer

* :art:

Co-authored-by: tamaina <tamaina@hotmail.co.jp>

2 files changed, 54 insertions, 2 deletions

diff --git a/packages/frontend/src/components/MkMediaImage.vue b/packages/frontend/src/components/MkMediaImage.vue
index 9912faffe8..c0638c0feb 100644
--- a/packages/frontend/src/components/MkMediaImage.vue
+++ b/packages/frontend/src/components/MkMediaImage.vue
@@ -13,7 +13,7 @@
 		:href="image.url"
 		:title="image.name"
 	>
-		<ImgWithBlurhash :hash="image.blurhash" :src="url" :alt="image.comment" :title="image.comment" :cover="false"/>
+		<ImgWithBlurhash :hash="image.blurhash" :src="url" :alt="image.comment || image.name" :title="image.comment || image.name" :cover="false"/>
 		<div v-if="image.type === 'image/gif'" class="gif">GIF</div>
 	</a>
 	<button v-tooltip="$ts.hide" class="_button hide" @click="hide = true"><i class="ti ti-eye-off"></i></button>
diff --git a/packages/frontend/src/components/MkMediaList.vue b/packages/frontend/src/components/MkMediaList.vue
index c6f8612182..f263ae0ce9 100644
--- a/packages/frontend/src/components/MkMediaList.vue
+++ b/packages/frontend/src/components/MkMediaList.vue
@@ -45,7 +45,8 @@ onMounted(() => {
 					src: media.url,
 					w: media.properties.width,
 					h: media.properties.height,
-					alt: media.name,
+					alt: media.comment || media.name,
+					comment: media.comment || media.name,
 				};
 				if (media.properties.orientation != null && media.properties.orientation >= 5) {
 					[item.w, item.h] = [item.h, item.w];
@@ -69,6 +70,7 @@ onMounted(() => {
 		},
 		imageClickAction: 'close',
 		tapAction: 'toggle-controls',
+		bgOpacity: 1,
 		pswpModule: PhotoSwipe,
 	});
 
@@ -88,9 +90,28 @@ onMounted(() => {
 			[itemData.w, itemData.h] = [itemData.h, itemData.w];
 		}
 		itemData.msrc = file.thumbnailUrl;
+		itemData.alt = file.comment || file.name;
+		itemData.comment = file.comment || file.name;
 		itemData.thumbCropped = true;
 	});
 
+	lightbox.on('uiRegister', () => {
+		lightbox.pswp.ui.registerElement({
+			name: 'altText',
+			className: 'pwsp__alt-text-container',
+			appendTo: 'wrapper',
+			onInit: (el, pwsp) => {
+				let textBox = document.createElement('p');
+				textBox.className = 'pwsp__alt-text _acrylic';
+				el.appendChild(textBox);
+
+				pwsp.on('change', (a) => {
+					textBox.textContent = pwsp.currSlide.data.comment;
+				});
+			},
+		});
+	});
+
 	lightbox.init();
 });
 
@@ -185,5 +206,36 @@ const previewable = (file: misskey.entities.DriveFile): boolean => {
 	// なぜか機能しない
   //z-index: v-bind(pswpZIndex);
 	z-index: 2000000;
+	--pswp-bg: var(--modalBg);
+}
+
+.pswp__bg {
+	background: var(--modalBg);
+	backdrop-filter: var(--modalBgFilter);
+}
+
+.pwsp__alt-text-container {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+
+	position: absolute;
+	bottom: 30px;
+	left: 50%;
+	transform: translateX(-50%);
+
+	width: 75%;
+	max-width: 800px;
+}
+
+.pwsp__alt-text {
+	color: var(--fg);
+	margin: 0 auto;
+	text-align: center;
+	padding: var(--margin);
+	border-radius: var(--radius);
+	max-height: 8em;
+	overflow-y: auto;
+	text-shadow: var(--bg) 0 0 10px, var(--bg) 0 0 3px, var(--bg) 0 0 3px;
 }
 </style>