diff --git a/packages/client/src/components/media-image.vue b/packages/client/src/components/media-image.vue
index ac22557f9..69b94514a 100644
--- a/packages/client/src/components/media-image.vue
+++ b/packages/client/src/components/media-image.vue
@@ -13,7 +13,7 @@
:href="image.url"
:title="image.name"
>
-
+
GIF
diff --git a/packages/client/src/components/media-list.vue b/packages/client/src/components/media-list.vue
index 640f0defd..f9f017cfd 100644
--- a/packages/client/src/components/media-list.vue
+++ b/packages/client/src/components/media-list.vue
@@ -43,7 +43,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];
@@ -86,9 +87,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();
});
@@ -183,4 +214,35 @@ const previewable = (file: foundkey.entities.DriveFile): boolean => {
// なぜか機能しない
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;
+}
+