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