diff --git a/packages/client/src/components/MkMediaImage.vue b/packages/client/src/components/MkMediaImage.vue
index 73854352b..c620b73c5 100644
--- a/packages/client/src/components/MkMediaImage.vue
+++ b/packages/client/src/components/MkMediaImage.vue
@@ -13,7 +13,7 @@
:href="image.url"
:title="image.name"
>
-
+
GIF
diff --git a/packages/client/src/components/MkMediaList.vue b/packages/client/src/components/MkMediaList.vue
index 17a039e72..174ed8380 100644
--- a/packages/client/src/components/MkMediaList.vue
+++ b/packages/client/src/components/MkMediaList.vue
@@ -46,7 +46,8 @@ onMounted(() => {
src: media.url,
w: media.properties.width,
h: media.properties.height,
- alt: media.name,
+ alt: media.comment || media.name,
+ comment: media.comment,
};
if (media.properties.orientation != null && media.properties.orientation >= 5) {
[item.w, item.h] = [item.h, item.w];
@@ -89,9 +90,39 @@ onMounted(() => {
[itemData.w, itemData.h] = [itemData.h, itemData.w];
}
itemData.msrc = file.thumbnailUrl;
+ itemData.alt = file.comment || file.name;
+ itemData.comment = file.comment;
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';
+ el.appendChild(textBox);
+
+ let preventProp = function(ev: Event): void {
+ ev.stopPropagation();
+ };
+
+ // Allow scrolling/text selection
+ el.onwheel = preventProp;
+ el.onclick = preventProp;
+ el.onpointerdown = preventProp;
+ el.onpointercancel = preventProp;
+ el.onpointermove = preventProp;
+
+ pwsp.on('change', () => {
+ textBox.textContent = pwsp.currSlide.data.comment?.trim();
+ });
+ },
+ });
+ });
+
lightbox.init();
});
@@ -193,4 +224,35 @@ const previewable = (file: misskey.entities.DriveFile): boolean => {
//z-index: v-bind(pswpZIndex);
z-index: 2000000;
}
+.pwsp__alt-text-container {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+
+ position: absolute;
+ bottom: 30px;
+ left: 50%;
+ transform: translateX(-50%);
+
+ width: 75%;
+}
+
+.pwsp__alt-text {
+ color: white;
+ margin: 0 auto;
+ text-align: center;
+ padding: 10px;
+ background: rgba(0, 0, 0, 0.5);
+ border-radius: 5px;
+
+ max-height: 10vh;
+ overflow-x: clip;
+ overflow-y: auto;
+ overscroll-behavior: contain;
+}
+
+.pwsp__alt-text:empty {
+ display: none;
+}
+