diff --git a/src/intl/en-US.js b/src/intl/en-US.js
index 046a1c57..8516d6bb 100644
--- a/src/intl/en-US.js
+++ b/src/intl/en-US.js
@@ -255,6 +255,8 @@ export default {
showNextMedia: 'Show next media',
enterPinchZoom: 'Pinch-zoom mode',
exitPinchZoom: 'Exit pinch-zoom mode',
+ showFullImageDescription: 'Show full image description',
+ hideFullImageDescription: 'Hide full image description',
showMedia: `Show {index, select,
1 {first}
2 {second}
diff --git a/src/routes/_components/dialog/components/MediaDialog.html b/src/routes/_components/dialog/components/MediaDialog.html
index a2ff2886..a7ac5c97 100644
--- a/src/routes/_components/dialog/components/MediaDialog.html
+++ b/src/routes/_components/dialog/components/MediaDialog.html
@@ -25,8 +25,24 @@
{/each}
+ {#if hasDescription }
+
+ {mediaItem.description}
+
+ {/if}
- {#if canPinchZoom}
+ {#if hasDescription }
+
+ {:elseif canPinchZoom }
{/if}
- {#if canPinchZoom}
+ {#if canPinchZoom }
+ {:elseif hasDescription }
+
{/if}
@@ -142,6 +167,20 @@
padding: 15px 5px 5px 5px;
}
+ .media-description-outside {
+ margin: 5px 15px;
+ max-height: 1.5em;
+ text-align: center;
+ color: white;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ }
+ .media-description-outside.expanded {
+ max-height: none;
+ white-space: normal;
+ }
+
.media-controls-outside {
display: flex;
justify-content: space-between;
@@ -263,12 +302,14 @@
},
store: () => store,
data: () => ({
- pinchZoomMode: false
+ pinchZoomMode: false,
+ showFullImageDescription: false
}),
computed: {
length: ({ mediaItems }) => mediaItems.length,
dots: ({ length }) => times(length, i => ({ i })),
canPinchZoom: ({ mediaItems }) => !mediaItems.some(media => ['video', 'audio'].includes(media.type)),
+ hasDescription: ({ mediaItem }) => mediaItem.description,
mediaItem: ({ mediaItems, scrolledItem }) => mediaItems[scrolledItem],
nativeWidth: ({ mediaItem }) => get(mediaItem, ['meta', 'original', 'width'], 300), // TODO: Pleroma placeholder
nativeHeight: ({ mediaItem }) => get(mediaItem, ['meta', 'original', 'height'], 200) // TODO: Pleroma placeholder
@@ -355,6 +396,9 @@
togglePinchZoomMode () {
this.set({ pinchZoomMode: !this.get().pinchZoomMode })
},
+ toggleFullImageDescription () {
+ this.set({ showFullImageDescription: !this.get().showFullImageDescription })
+ },
onImageClick (e) {
const { nativeWidth, nativeHeight, pinchZoomMode } = this.get()
if (pinchZoomMode) {