From 4db03cc3c947d395f3ef964c8651b456460e4492 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Mon, 17 May 2021 17:38:36 -0500
Subject: [PATCH] Indicate > 4 attachments, fixes #591

---
 app/soapbox/components/media_gallery.js  | 14 ++++++++++++--
 app/styles/components/media-gallery.scss | 20 ++++++++++++++++++++
 2 files changed, 32 insertions(+), 2 deletions(-)

diff --git a/app/soapbox/components/media_gallery.js b/app/soapbox/components/media_gallery.js
index b526655a3..352d107e7 100644
--- a/app/soapbox/components/media_gallery.js
+++ b/app/soapbox/components/media_gallery.js
@@ -15,6 +15,7 @@ import { getSettings } from 'soapbox/actions/settings';
 import Icon from 'soapbox/components/icon';
 import StillImage from 'soapbox/components/still_image';
 
+const ATTACHMENT_LIMIT = 4;
 const MAX_FILENAME_LENGTH = 45;
 
 const messages = defineMessages({
@@ -38,6 +39,8 @@ class Item extends React.PureComponent {
     visible: PropTypes.bool.isRequired,
     dimensions: PropTypes.object,
     autoPlayGif: PropTypes.bool,
+    last: PropTypes.bool,
+    total: PropTypes.number,
   };
 
   static defaultProps = {
@@ -121,7 +124,7 @@ class Item extends React.PureComponent {
   }
 
   render() {
-    const { attachment, standalone, visible, dimensions, autoPlayGif } = this.props;
+    const { attachment, standalone, visible, dimensions, autoPlayGif, last, total } = this.props;
 
     let width  = 100;
     let height = '100%';
@@ -222,6 +225,11 @@ class Item extends React.PureComponent {
 
     return (
       <div className={classNames('media-gallery__item', `media-gallery__item--${attachment.get('type')}`, { standalone })} key={attachment.get('id')} style={{ position, float, left, top, right, bottom, height, width: `${width}%` }}>
+        {last && total > ATTACHMENT_LIMIT && (
+          <div className='media-gallery__item-overflow'>
+            +{total - ATTACHMENT_LIMIT + 1}
+          </div>
+        )}
         <canvas width={32} height={32} ref={this.setCanvasRef} className={classNames('media-gallery__preview', { 'media-gallery__preview--hidden': visible && this.state.loaded })} />
         {visible && thumbnail}
       </div>
@@ -537,7 +545,7 @@ class MediaGallery extends React.PureComponent {
     const sizeData = this.getSizeData(media.size);
     let children, spoilerButton;
 
-    children = media.take(4).map((attachment, i) => (
+    children = media.take(ATTACHMENT_LIMIT).map((attachment, i) => (
       <Item
         key={attachment.get('id')}
         onClick={this.handleClick}
@@ -547,6 +555,8 @@ class MediaGallery extends React.PureComponent {
         displayWidth={sizeData.get('width')}
         visible={visible}
         dimensions={sizeData.get('itemsDimensions')[i]}
+        last={i === ATTACHMENT_LIMIT - 1}
+        total={media.size}
       />
     ));
 
diff --git a/app/styles/components/media-gallery.scss b/app/styles/components/media-gallery.scss
index 183adb74f..544febb70 100644
--- a/app/styles/components/media-gallery.scss
+++ b/app/styles/components/media-gallery.scss
@@ -25,6 +25,26 @@
     transform: translate(-50%, -50%);
     font-size: 100px;
   }
+
+  &-overflow {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(255, 255, 255, 0.75);
+    z-index: 2;
+    color: #333;
+    text-align: center;
+    font-weight: bold;
+    font-size: 50px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    pointer-events: none;
+  }
 }
 
 .media-gallery__item-thumbnail {