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; +} +