From d8d5186a0172b16539a675b5b723a4784894a108 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Fri, 4 Sep 2020 20:17:03 -0500
Subject: [PATCH 01/13] Chats: basic display of attachments

---
 .../chats/components/chat_message_list.js     | 28 +++++++++++++++++--
 app/styles/chats.scss                         |  5 ++++
 2 files changed, 30 insertions(+), 3 deletions(-)

diff --git a/app/soapbox/features/chats/components/chat_message_list.js b/app/soapbox/features/chats/components/chat_message_list.js
index baa50a08f..d8568d385 100644
--- a/app/soapbox/features/chats/components/chat_message_list.js
+++ b/app/soapbox/features/chats/components/chat_message_list.js
@@ -9,6 +9,8 @@ import { fetchChatMessages } from 'soapbox/actions/chats';
 import emojify from 'soapbox/features/emoji/emoji';
 import classNames from 'classnames';
 import { escape, throttle } from 'lodash';
+import { MediaGallery } from 'soapbox/features/ui/util/async-components';
+import Bundle from 'soapbox/features/ui/components/bundle';
 
 const scrollBottom = (elem) => elem.scrollHeight - elem.offsetHeight - elem.scrollTop;
 
@@ -115,6 +117,21 @@ class ChatMessageList extends ImmutablePureComponent {
     trailing: true,
   });
 
+  maybeRenderMedia = chatMessage => {
+    const attachment = chatMessage.get('attachment');
+    if (!attachment) return null;
+    return (
+      <Bundle fetchComponent={MediaGallery}>
+        {Component => (
+          <Component
+            media={ImmutableList([attachment])}
+            height={100}
+          />
+        )}
+      </Bundle>
+    );
+  }
+
   parsePendingContent = content => {
     return escape(content).replace(/(?:\r\n|\r|\n)/g, '<br>');
   }
@@ -145,12 +162,17 @@ class ChatMessageList extends ImmutablePureComponent {
             })}
             key={chatMessage.get('id')}
           >
-            <span
+            <div
               title={this.getFormattedTimestamp(chatMessage)}
               className='chat-message__bubble'
-              dangerouslySetInnerHTML={{ __html: this.parseContent(chatMessage) }}
               ref={this.setBubbleRef}
-            />
+            >
+              <span
+                className='chat-message__content'
+                dangerouslySetInnerHTML={{ __html: this.parseContent(chatMessage) }}
+              />
+              {this.maybeRenderMedia(chatMessage)}
+            </div>
           </div>
         ))}
       </div>
diff --git a/app/styles/chats.scss b/app/styles/chats.scss
index 38550ac3b..f49450155 100644
--- a/app/styles/chats.scss
+++ b/app/styles/chats.scss
@@ -290,3 +290,8 @@
     }
   }
 }
+
+.chat-message .media-gallery__item-thumbnail img,
+.chat-message .media-gallery__item-thumbnail .still-image img {
+  object-fit: contain;
+}

From 84e51754813b3aab28ee437d28b5f132721b2005 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sat, 5 Sep 2020 16:39:57 -0500
Subject: [PATCH 02/13] Chats: improve attachments, make modal work

---
 .../features/chats/components/chat_message_list.js |  8 +++++++-
 app/styles/chats.scss                              | 14 +++++++++++---
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/app/soapbox/features/chats/components/chat_message_list.js b/app/soapbox/features/chats/components/chat_message_list.js
index d8568d385..d6acefe2f 100644
--- a/app/soapbox/features/chats/components/chat_message_list.js
+++ b/app/soapbox/features/chats/components/chat_message_list.js
@@ -8,6 +8,7 @@ import { Map as ImmutableMap, List as ImmutableList } from 'immutable';
 import { fetchChatMessages } from 'soapbox/actions/chats';
 import emojify from 'soapbox/features/emoji/emoji';
 import classNames from 'classnames';
+import { openModal } from 'soapbox/actions/modal';
 import { escape, throttle } from 'lodash';
 import { MediaGallery } from 'soapbox/features/ui/util/async-components';
 import Bundle from 'soapbox/features/ui/components/bundle';
@@ -117,6 +118,10 @@ class ChatMessageList extends ImmutablePureComponent {
     trailing: true,
   });
 
+  onOpenMedia = (media, index) => {
+    this.props.dispatch(openModal('MEDIA', { media, index }));
+  };
+
   maybeRenderMedia = chatMessage => {
     const attachment = chatMessage.get('attachment');
     if (!attachment) return null;
@@ -125,7 +130,8 @@ class ChatMessageList extends ImmutablePureComponent {
         {Component => (
           <Component
             media={ImmutableList([attachment])}
-            height={100}
+            height={120}
+            onOpenMedia={this.onOpenMedia}
           />
         )}
       </Bundle>
diff --git a/app/styles/chats.scss b/app/styles/chats.scss
index f49450155..7d8c7d6fb 100644
--- a/app/styles/chats.scss
+++ b/app/styles/chats.scss
@@ -291,7 +291,15 @@
   }
 }
 
-.chat-message .media-gallery__item-thumbnail img,
-.chat-message .media-gallery__item-thumbnail .still-image img {
-  object-fit: contain;
+.chat-message .media-gallery {
+  height: 120px !important;
+
+  .spoiler-button {
+    display: none;
+  }
+
+  &__item-thumbnail img,
+  &__item-thumbnail .still-image img {
+    object-fit: contain;
+  }
 }

From 6dc38adeaa37993fef4ae647d82d39a0250b24ca Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sat, 5 Sep 2020 21:48:25 -0500
Subject: [PATCH 03/13] Chats: add upload button to chat input

---
 app/soapbox/features/chats/components/chat_box.js |  6 ++++++
 app/styles/chats.scss                             | 15 +++++++++++++++
 2 files changed, 21 insertions(+)

diff --git a/app/soapbox/features/chats/components/chat_box.js b/app/soapbox/features/chats/components/chat_box.js
index 12b28d513..e307325a5 100644
--- a/app/soapbox/features/chats/components/chat_box.js
+++ b/app/soapbox/features/chats/components/chat_box.js
@@ -10,6 +10,7 @@ import {
 } from 'soapbox/actions/chats';
 import { OrderedSet as ImmutableOrderedSet } from 'immutable';
 import ChatMessageList from './chat_message_list';
+import UploadButton from 'soapbox/features/compose/components/upload_button';
 
 const messages = defineMessages({
   placeholder: { id: 'chat_box.input.placeholder', defaultMessage: 'Send a message…' },
@@ -91,6 +92,10 @@ class ChatBox extends ImmutablePureComponent {
       this.markRead();
   }
 
+  handleFiles = (files) => {
+    // TODO: Upload attachment
+  }
+
   render() {
     const { chatMessageIds, chatId, intl } = this.props;
     if (!chatMessageIds) return null;
@@ -99,6 +104,7 @@ class ChatBox extends ImmutablePureComponent {
       <div className='chat-box' onMouseOver={this.handleHover}>
         <ChatMessageList chatMessageIds={chatMessageIds} chatId={chatId} />
         <div className='chat-box__actions simple_form'>
+          <UploadButton onSelectFile={this.handleFiles} />
           <textarea
             rows={1}
             placeholder={intl.formatMessage(messages.placeholder)}
diff --git a/app/styles/chats.scss b/app/styles/chats.scss
index 7d8c7d6fb..7af2fb5f8 100644
--- a/app/styles/chats.scss
+++ b/app/styles/chats.scss
@@ -185,6 +185,19 @@
     background: var(--foreground-color);
     margin-top: auto;
     padding: 6px;
+    position: relative;
+
+    .icon-button {
+      position: absolute;
+      right: 10px;
+      top: 8px;
+      width: auto;
+      height: auto;
+      background: transparent !important;
+      border: 0;
+      padding: 0;
+      margin: 0;
+    }
 
     textarea {
       width: 100%;
@@ -192,11 +205,13 @@
       margin: 0;
       box-sizing: border-box;
       padding: 6px;
+      padding-right: 25px;
       background: var(--background-color);
       border: 0;
       border-radius: 6px;
       color: var(--primary-text-color);
       font-size: 15px;
+      overflow: hidden;
     }
   }
 }

From b7295e238f8fad16ffacd8977249d8358c337360 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sun, 6 Sep 2020 12:37:38 -0500
Subject: [PATCH 04/13] Chats: get media uploads working

---
 app/soapbox/features/chats/components/chat_box.js | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/app/soapbox/features/chats/components/chat_box.js b/app/soapbox/features/chats/components/chat_box.js
index e307325a5..41ac52b05 100644
--- a/app/soapbox/features/chats/components/chat_box.js
+++ b/app/soapbox/features/chats/components/chat_box.js
@@ -11,6 +11,7 @@ import {
 import { OrderedSet as ImmutableOrderedSet } from 'immutable';
 import ChatMessageList from './chat_message_list';
 import UploadButton from 'soapbox/features/compose/components/upload_button';
+import { uploadMedia } from 'soapbox/actions/media';
 
 const messages = defineMessages({
   placeholder: { id: 'chat_box.input.placeholder', defaultMessage: 'Send a message…' },
@@ -38,11 +39,13 @@ class ChatBox extends ImmutablePureComponent {
 
   state = {
     content: '',
+    media_id: undefined,
   }
 
   sendMessage = () => {
     const { chatId } = this.props;
-    if (this.state.content.length < 1) return;
+    const { content, media_id } = this.state;
+    if (content.length < 1 && !media_id) return;
     this.props.dispatch(sendChatMessage(chatId, this.state));
     this.setState({ content: '' });
   }
@@ -93,7 +96,11 @@ class ChatBox extends ImmutablePureComponent {
   }
 
   handleFiles = (files) => {
-    // TODO: Upload attachment
+    const data = new FormData();
+    data.append('file', files[0]);
+    this.props.dispatch(uploadMedia(data)).then(response => {
+      this.setState({ media_id: response.data.id });
+    }).catch(() => {});
   }
 
   render() {

From afd823fae05d8699d49266ac923888ac13418f81 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sun, 6 Sep 2020 13:55:24 -0500
Subject: [PATCH 05/13] Chats: refactor ChatBox state

---
 .../features/chats/components/chat_box.js     | 42 ++++++++++++++-----
 1 file changed, 32 insertions(+), 10 deletions(-)

diff --git a/app/soapbox/features/chats/components/chat_box.js b/app/soapbox/features/chats/components/chat_box.js
index 41ac52b05..7d9f03342 100644
--- a/app/soapbox/features/chats/components/chat_box.js
+++ b/app/soapbox/features/chats/components/chat_box.js
@@ -12,6 +12,7 @@ import { OrderedSet as ImmutableOrderedSet } from 'immutable';
 import ChatMessageList from './chat_message_list';
 import UploadButton from 'soapbox/features/compose/components/upload_button';
 import { uploadMedia } from 'soapbox/actions/media';
+import { Map as ImmutableMap } from 'immutable';
 
 const messages = defineMessages({
   placeholder: { id: 'chat_box.input.placeholder', defaultMessage: 'Send a message…' },
@@ -37,22 +38,42 @@ class ChatBox extends ImmutablePureComponent {
     me: PropTypes.node,
   }
 
-  state = {
+  initialParams = {
     content: '',
     media_id: undefined,
   }
 
+  state = {
+    params: ImmutableMap(this.initialParams),
+  }
+
+  setParams = newParams => {
+    const { params } = this.state;
+    this.setState({ params: params.merge(newParams) });
+  }
+
+  clearParams = () => {
+    this.setState({ params: ImmutableMap(this.initialParams) });
+  }
+
   sendMessage = () => {
     const { chatId } = this.props;
-    const { content, media_id } = this.state;
-    if (content.length < 1 && !media_id) return;
-    this.props.dispatch(sendChatMessage(chatId, this.state));
-    this.setState({ content: '' });
+    const { params } = this.state;
+
+    const conds = [
+      params.get('content', '').length > 0,
+      params.get('media_id'),
+    ];
+
+    if (conds.some(c => c)) {
+      this.props.dispatch(sendChatMessage(chatId, params.toJS()));
+      this.clearParams();
+    }
   }
 
   insertLine = () => {
-    const { content } = this.state;
-    this.setState({ content: content + '\n' });
+    const { params } = this.state;
+    this.setParams({ content: params.get('content') + '\n' });
   }
 
   handleKeyDown = (e) => {
@@ -66,7 +87,7 @@ class ChatBox extends ImmutablePureComponent {
   }
 
   handleContentChange = (e) => {
-    this.setState({ content: e.target.value });
+    this.setParams({ content: e.target.value });
   }
 
   markRead = () => {
@@ -99,12 +120,13 @@ class ChatBox extends ImmutablePureComponent {
     const data = new FormData();
     data.append('file', files[0]);
     this.props.dispatch(uploadMedia(data)).then(response => {
-      this.setState({ media_id: response.data.id });
+      this.setParams({ media_id: response.data.id });
     }).catch(() => {});
   }
 
   render() {
     const { chatMessageIds, chatId, intl } = this.props;
+    const { params } = this.state;
     if (!chatMessageIds) return null;
 
     return (
@@ -117,7 +139,7 @@ class ChatBox extends ImmutablePureComponent {
             placeholder={intl.formatMessage(messages.placeholder)}
             onKeyDown={this.handleKeyDown}
             onChange={this.handleContentChange}
-            value={this.state.content}
+            value={params.get('content', '')}
             ref={this.setInputRef}
           />
         </div>

From 07f29ebcb94dbb71c420dcac0f9ba3d3b88ed8e6 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sun, 6 Sep 2020 14:15:06 -0500
Subject: [PATCH 06/13] Chats: put attachment above content

---
 app/soapbox/features/chats/components/chat_message_list.js | 2 +-
 app/styles/chats.scss                                      | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/app/soapbox/features/chats/components/chat_message_list.js b/app/soapbox/features/chats/components/chat_message_list.js
index d6acefe2f..2ff423143 100644
--- a/app/soapbox/features/chats/components/chat_message_list.js
+++ b/app/soapbox/features/chats/components/chat_message_list.js
@@ -173,11 +173,11 @@ class ChatMessageList extends ImmutablePureComponent {
               className='chat-message__bubble'
               ref={this.setBubbleRef}
             >
+              {this.maybeRenderMedia(chatMessage)}
               <span
                 className='chat-message__content'
                 dangerouslySetInnerHTML={{ __html: this.parseContent(chatMessage) }}
               />
-              {this.maybeRenderMedia(chatMessage)}
             </div>
           </div>
         ))}
diff --git a/app/styles/chats.scss b/app/styles/chats.scss
index 7af2fb5f8..e15dd9e90 100644
--- a/app/styles/chats.scss
+++ b/app/styles/chats.scss
@@ -308,6 +308,7 @@
 
 .chat-message .media-gallery {
   height: 120px !important;
+  margin: 4px 0 8px;
 
   .spoiler-button {
     display: none;

From cf0baab6def88ca7efd123c7a0cbe76dfb555e09 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sun, 6 Sep 2020 15:36:47 -0500
Subject: [PATCH 07/13] Chats: add upload progress

---
 .../features/chats/components/chat_box.js     | 21 ++++++++++++++-----
 app/styles/chats.scss                         | 19 +++++++++++++++++
 2 files changed, 35 insertions(+), 5 deletions(-)

diff --git a/app/soapbox/features/chats/components/chat_box.js b/app/soapbox/features/chats/components/chat_box.js
index 7d9f03342..89f7008ea 100644
--- a/app/soapbox/features/chats/components/chat_box.js
+++ b/app/soapbox/features/chats/components/chat_box.js
@@ -13,6 +13,7 @@ import ChatMessageList from './chat_message_list';
 import UploadButton from 'soapbox/features/compose/components/upload_button';
 import { uploadMedia } from 'soapbox/actions/media';
 import { Map as ImmutableMap } from 'immutable';
+import UploadProgress from 'soapbox/features/compose/components/upload_progress';
 
 const messages = defineMessages({
   placeholder: { id: 'chat_box.input.placeholder', defaultMessage: 'Send a message…' },
@@ -45,6 +46,8 @@ class ChatBox extends ImmutablePureComponent {
 
   state = {
     params: ImmutableMap(this.initialParams),
+    isUploading: false,
+    uploadProgress: 0,
   }
 
   setParams = newParams => {
@@ -58,14 +61,14 @@ class ChatBox extends ImmutablePureComponent {
 
   sendMessage = () => {
     const { chatId } = this.props;
-    const { params } = this.state;
+    const { params, isUploading } = this.state;
 
     const conds = [
       params.get('content', '').length > 0,
       params.get('media_id'),
     ];
 
-    if (conds.some(c => c)) {
+    if (!isUploading && conds.some(c => c)) {
       this.props.dispatch(sendChatMessage(chatId, params.toJS()));
       this.clearParams();
     }
@@ -116,22 +119,30 @@ class ChatBox extends ImmutablePureComponent {
       this.markRead();
   }
 
+  onUploadProgress = (e) => {
+    const { loaded, total } = e;
+    this.setState({ uploadProgress: loaded/total });
+  }
+
   handleFiles = (files) => {
+    this.setState({ isUploading: true });
     const data = new FormData();
     data.append('file', files[0]);
-    this.props.dispatch(uploadMedia(data)).then(response => {
-      this.setParams({ media_id: response.data.id });
+    this.props.dispatch(uploadMedia(data, this.onUploadProgress)).then(response => {
+      const newParams = this.state.params.merge({ media_id: response.data.id });
+      this.setState({ params: newParams, isUploading: false });
     }).catch(() => {});
   }
 
   render() {
     const { chatMessageIds, chatId, intl } = this.props;
-    const { params } = this.state;
+    const { params, isUploading, uploadProgress } = this.state;
     if (!chatMessageIds) return null;
 
     return (
       <div className='chat-box' onMouseOver={this.handleHover}>
         <ChatMessageList chatMessageIds={chatMessageIds} chatId={chatId} />
+        <UploadProgress active={isUploading} progress={uploadProgress*100} />
         <div className='chat-box__actions simple_form'>
           <UploadButton onSelectFile={this.handleFiles} />
           <textarea
diff --git a/app/styles/chats.scss b/app/styles/chats.scss
index e15dd9e90..00c0e4b94 100644
--- a/app/styles/chats.scss
+++ b/app/styles/chats.scss
@@ -181,6 +181,25 @@
 }
 
 .chat-box {
+  .upload-progress {
+    padding: 0 10px;
+    align-items: center;
+
+    .fa {
+      font-size: 22px;
+    }
+
+    &__message {
+      font-size: 13px;
+      flex: 1;
+      align-items: center;
+    }
+
+    &__backdrop {
+      margin-top: 2px;
+    }
+  }
+
   &__actions {
     background: var(--foreground-color);
     margin-top: auto;

From ed41b13064693c96bedd6016c6db3b3717e3252f Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sun, 6 Sep 2020 16:24:34 -0500
Subject: [PATCH 08/13] Chats: refactor ChatBox state yet again, display unsent
 attachment

---
 .../features/chats/components/chat_box.js     | 76 ++++++++++++-------
 1 file changed, 48 insertions(+), 28 deletions(-)

diff --git a/app/soapbox/features/chats/components/chat_box.js b/app/soapbox/features/chats/components/chat_box.js
index 89f7008ea..a6befbfd2 100644
--- a/app/soapbox/features/chats/components/chat_box.js
+++ b/app/soapbox/features/chats/components/chat_box.js
@@ -12,7 +12,6 @@ import { OrderedSet as ImmutableOrderedSet } from 'immutable';
 import ChatMessageList from './chat_message_list';
 import UploadButton from 'soapbox/features/compose/components/upload_button';
 import { uploadMedia } from 'soapbox/actions/media';
-import { Map as ImmutableMap } from 'immutable';
 import UploadProgress from 'soapbox/features/compose/components/upload_progress';
 
 const messages = defineMessages({
@@ -39,44 +38,48 @@ class ChatBox extends ImmutablePureComponent {
     me: PropTypes.node,
   }
 
-  initialParams = {
+  initialState = () => ({
     content: '',
-    media_id: undefined,
-  }
-
-  state = {
-    params: ImmutableMap(this.initialParams),
+    attachment: undefined,
     isUploading: false,
     uploadProgress: 0,
+  })
+
+  state = this.initialState()
+
+  clearState = () => {
+    this.setState(this.initialState());
   }
 
-  setParams = newParams => {
-    const { params } = this.state;
-    this.setState({ params: params.merge(newParams) });
-  }
+  getParams = () => {
+    const { content, attachment } = this.state;
 
-  clearParams = () => {
-    this.setState({ params: ImmutableMap(this.initialParams) });
+    return {
+      content,
+      media_id: attachment && attachment.id,
+    };
   }
 
   sendMessage = () => {
-    const { chatId } = this.props;
-    const { params, isUploading } = this.state;
+    const { dispatch, chatId } = this.props;
+    const { content, attachment, isUploading } = this.state;
 
     const conds = [
-      params.get('content', '').length > 0,
-      params.get('media_id'),
+      content.length > 0,
+      attachment,
     ];
 
     if (!isUploading && conds.some(c => c)) {
-      this.props.dispatch(sendChatMessage(chatId, params.toJS()));
-      this.clearParams();
+      const params = this.getParams();
+
+      dispatch(sendChatMessage(chatId, params));
+      this.clearState();
     }
   }
 
   insertLine = () => {
-    const { params } = this.state;
-    this.setParams({ content: params.get('content') + '\n' });
+    const { content } = this.state;
+    this.setState({ content: content + '\n' });
   }
 
   handleKeyDown = (e) => {
@@ -90,7 +93,7 @@ class ChatBox extends ImmutablePureComponent {
   }
 
   handleContentChange = (e) => {
-    this.setParams({ content: e.target.value });
+    this.setState({ content: e.target.value });
   }
 
   markRead = () => {
@@ -125,23 +128,40 @@ class ChatBox extends ImmutablePureComponent {
   }
 
   handleFiles = (files) => {
+    const { dispatch } = this.props;
+
     this.setState({ isUploading: true });
+
     const data = new FormData();
     data.append('file', files[0]);
-    this.props.dispatch(uploadMedia(data, this.onUploadProgress)).then(response => {
-      const newParams = this.state.params.merge({ media_id: response.data.id });
-      this.setState({ params: newParams, isUploading: false });
-    }).catch(() => {});
+
+    dispatch(uploadMedia(data, this.onUploadProgress)).then(response => {
+      this.setState({ attachment: response.data, isUploading: false });
+    }).catch(() => {
+      this.setState({ isUploading: false });
+    });
+  }
+
+  renderAttachment = () => {
+    const { attachment } = this.state;
+    if (!attachment) return null;
+
+    return (
+      <div className='chat-box__attachment'>
+        {attachment.preview_url}
+      </div>
+    );
   }
 
   render() {
     const { chatMessageIds, chatId, intl } = this.props;
-    const { params, isUploading, uploadProgress } = this.state;
+    const { content, isUploading, uploadProgress } = this.state;
     if (!chatMessageIds) return null;
 
     return (
       <div className='chat-box' onMouseOver={this.handleHover}>
         <ChatMessageList chatMessageIds={chatMessageIds} chatId={chatId} />
+        {this.renderAttachment()}
         <UploadProgress active={isUploading} progress={uploadProgress*100} />
         <div className='chat-box__actions simple_form'>
           <UploadButton onSelectFile={this.handleFiles} />
@@ -150,7 +170,7 @@ class ChatBox extends ImmutablePureComponent {
             placeholder={intl.formatMessage(messages.placeholder)}
             onKeyDown={this.handleKeyDown}
             onChange={this.handleContentChange}
-            value={params.get('content', '')}
+            value={content}
             ref={this.setInputRef}
           />
         </div>

From 5aef50b89ede5b82bcb5e482407a85b2af17503e Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sun, 6 Sep 2020 16:44:19 -0500
Subject: [PATCH 09/13] Composer: refactor filename truncation

---
 app/soapbox/components/media_gallery.js | 16 ++++------------
 app/soapbox/utils/media.js              | 10 ++++++++++
 2 files changed, 14 insertions(+), 12 deletions(-)
 create mode 100644 app/soapbox/utils/media.js

diff --git a/app/soapbox/components/media_gallery.js b/app/soapbox/components/media_gallery.js
index 0fc7dcb67..845b68db2 100644
--- a/app/soapbox/components/media_gallery.js
+++ b/app/soapbox/components/media_gallery.js
@@ -6,6 +6,7 @@ import { is } from 'immutable';
 import IconButton from './icon_button';
 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 import { isIOS } from '../is_mobile';
+import { truncateFilename } from 'soapbox/utils/media';
 import classNames from 'classnames';
 import { decode } from 'blurhash';
 import { isPanoramic, isPortrait, isNonConformingRatio, minimumAspectRatio, maximumAspectRatio } from '../utils/media_aspect_ratio';
@@ -14,6 +15,8 @@ import { getSettings } from 'soapbox/actions/settings';
 import Icon from 'soapbox/components/icon';
 import StillImage from 'soapbox/components/still_image';
 
+const MAX_FILENAME_LENGTH = 45;
+
 const messages = defineMessages({
   toggle_visible: { id: 'media_gallery.toggle_visible', defaultMessage: 'Toggle visibility' },
 });
@@ -142,19 +145,8 @@ class Item extends React.PureComponent {
 
     let thumbnail = '';
 
-    const MAX_FILENAME_LENGTH = 45;
-    const getCroppedFilename = () => {
-      const remoteURL = attachment.get('remote_url');
-      const filenameLastIndex = remoteURL.lastIndexOf('/');
-      const filename = remoteURL.substr(filenameLastIndex + 1);
-      if (filename.length <= MAX_FILENAME_LENGTH)
-        return filename;
-      else
-        return filename.substr(0, MAX_FILENAME_LENGTH/2) + '...' + filename.substr(filename.length - MAX_FILENAME_LENGTH/2);
-    };
-
     if (attachment.get('type') === 'unknown') {
-      const filename = getCroppedFilename();
+      const filename = truncateFilename(attachment.get('remote_url'), MAX_FILENAME_LENGTH);
       return (
         <div className={classNames('media-gallery__item', { standalone })} key={attachment.get('id')} style={{ position, float, left, top, right, bottom, height, width: `${width}%` }}>
           <a className='media-gallery__item-thumbnail' href={attachment.get('remote_url')} target='_blank' style={{ cursor: 'pointer' }}>
diff --git a/app/soapbox/utils/media.js b/app/soapbox/utils/media.js
new file mode 100644
index 000000000..c8266c646
--- /dev/null
+++ b/app/soapbox/utils/media.js
@@ -0,0 +1,10 @@
+export const truncateFilename = (url, maxLength) => {
+  const filename = url.split('/').pop();
+
+  if (filename.length <= maxLength) return filename;
+
+  return [
+    filename.substr(0, maxLength/2),
+    filename.substr(filename.length - maxLength/2),
+  ].join('…');
+};

From 49d2121017f3495dee1d0af3155ff55984f3df45 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sun, 6 Sep 2020 16:50:54 -0500
Subject: [PATCH 10/13] Chats: improve display of images, because we can

---
 app/styles/chats.scss | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/app/styles/chats.scss b/app/styles/chats.scss
index 00c0e4b94..62a9424ae 100644
--- a/app/styles/chats.scss
+++ b/app/styles/chats.scss
@@ -326,13 +326,17 @@
 }
 
 .chat-message .media-gallery {
-  height: 120px !important;
+  height: auto !important;
   margin: 4px 0 8px;
 
   .spoiler-button {
     display: none;
   }
 
+  &__preview {
+    background-color: transparent;
+  }
+
   &__item-thumbnail img,
   &__item-thumbnail .still-image img {
     object-fit: contain;

From a02155846dc74a07fe36f018da8e4e076e25f9aa Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sun, 6 Sep 2020 17:09:06 -0500
Subject: [PATCH 11/13] Chats: allow files to be removed before sending

---
 .../features/chats/components/chat_box.js     | 20 ++++++++++++++++---
 app/styles/chats.scss                         | 18 +++++++++++++++++
 2 files changed, 35 insertions(+), 3 deletions(-)

diff --git a/app/soapbox/features/chats/components/chat_box.js b/app/soapbox/features/chats/components/chat_box.js
index a6befbfd2..bde2f9dbf 100644
--- a/app/soapbox/features/chats/components/chat_box.js
+++ b/app/soapbox/features/chats/components/chat_box.js
@@ -13,6 +13,8 @@ import ChatMessageList from './chat_message_list';
 import UploadButton from 'soapbox/features/compose/components/upload_button';
 import { uploadMedia } from 'soapbox/actions/media';
 import UploadProgress from 'soapbox/features/compose/components/upload_progress';
+import { truncateFilename } from 'soapbox/utils/media';
+import IconButton from 'soapbox/components/icon_button';
 
 const messages = defineMessages({
   placeholder: { id: 'chat_box.input.placeholder', defaultMessage: 'Send a message…' },
@@ -24,6 +26,8 @@ const mapStateToProps = (state, { chatId }) => ({
   chatMessageIds: state.getIn(['chat_message_lists', chatId], ImmutableOrderedSet()),
 });
 
+const fileKeyGen = () => Math.floor((Math.random() * 0x10000));
+
 export default @connect(mapStateToProps)
 @injectIntl
 class ChatBox extends ImmutablePureComponent {
@@ -43,6 +47,7 @@ class ChatBox extends ImmutablePureComponent {
     attachment: undefined,
     isUploading: false,
     uploadProgress: 0,
+    resetFileKey: fileKeyGen(),
   })
 
   state = this.initialState()
@@ -122,6 +127,10 @@ class ChatBox extends ImmutablePureComponent {
       this.markRead();
   }
 
+  handleRemoveFile = (e) => {
+    this.setState({ attachment: undefined, resetFileKey: fileKeyGen() });
+  }
+
   onUploadProgress = (e) => {
     const { loaded, total } = e;
     this.setState({ uploadProgress: loaded/total });
@@ -148,14 +157,19 @@ class ChatBox extends ImmutablePureComponent {
 
     return (
       <div className='chat-box__attachment'>
-        {attachment.preview_url}
+        <div className='chat-box__filename'>
+          {truncateFilename(attachment.preview_url, 20)}
+        </div>
+        <div class='chat-box__remove-attachment'>
+          <IconButton icon='remove' onClick={this.handleRemoveFile} />
+        </div>
       </div>
     );
   }
 
   render() {
     const { chatMessageIds, chatId, intl } = this.props;
-    const { content, isUploading, uploadProgress } = this.state;
+    const { content, isUploading, uploadProgress, resetFileKey } = this.state;
     if (!chatMessageIds) return null;
 
     return (
@@ -164,7 +178,7 @@ class ChatBox extends ImmutablePureComponent {
         {this.renderAttachment()}
         <UploadProgress active={isUploading} progress={uploadProgress*100} />
         <div className='chat-box__actions simple_form'>
-          <UploadButton onSelectFile={this.handleFiles} />
+          <UploadButton onSelectFile={this.handleFiles} resetFileKey={resetFileKey} />
           <textarea
             rows={1}
             placeholder={intl.formatMessage(messages.placeholder)}
diff --git a/app/styles/chats.scss b/app/styles/chats.scss
index 62a9424ae..1f47cd57f 100644
--- a/app/styles/chats.scss
+++ b/app/styles/chats.scss
@@ -184,6 +184,7 @@
   .upload-progress {
     padding: 0 10px;
     align-items: center;
+    height: 25px;
 
     .fa {
       font-size: 22px;
@@ -200,6 +201,23 @@
     }
   }
 
+  &__attachment {
+    display: flex;
+    align-items: center;
+    font-size: 13px;
+    padding: 0 10px;
+    height: 25px;
+
+    .chat-box__remove-attachment {
+      margin-left: auto;
+
+      .icon-button > div {
+        display: flex;
+        align-items: center;
+      }
+    }
+  }
+
   &__actions {
     background: var(--foreground-color);
     margin-top: auto;

From 024e9209afa3086cab5f1660cac83edca873a5ba Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sun, 6 Sep 2020 17:20:26 -0500
Subject: [PATCH 12/13] Chats: display of non-image attachments

---
 app/soapbox/components/media_gallery.js | 2 +-
 app/styles/chats.scss                   | 6 ++++++
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/app/soapbox/components/media_gallery.js b/app/soapbox/components/media_gallery.js
index 845b68db2..3eda57795 100644
--- a/app/soapbox/components/media_gallery.js
+++ b/app/soapbox/components/media_gallery.js
@@ -220,7 +220,7 @@ class Item extends React.PureComponent {
     }
 
     return (
-      <div className={classNames('media-gallery__item', { standalone })} key={attachment.get('id')} style={{ position, float, left, top, right, bottom, height, width: `${width}%` }}>
+      <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}%` }}>
         <canvas width={32} height={32} ref={this.setCanvasRef} className={classNames('media-gallery__preview', { 'media-gallery__preview--hidden': visible && this.state.loaded })} />
         {visible && thumbnail}
       </div>
diff --git a/app/styles/chats.scss b/app/styles/chats.scss
index 1f47cd57f..0d882fa02 100644
--- a/app/styles/chats.scss
+++ b/app/styles/chats.scss
@@ -351,6 +351,12 @@
     display: none;
   }
 
+  .media-gallery__item:not(.media-gallery__item--image) {
+    max-width: 100%;
+    width: 120px !important;
+    height: 70px !important;
+  }
+
   &__preview {
     background-color: transparent;
   }

From 60402a74029e0c4527d84f0648ff8618174fc53a Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sun, 6 Sep 2020 17:43:16 -0500
Subject: [PATCH 13/13] Chats: add submit button, fixes #356

---
 .../features/chats/components/chat_box.js     | 30 +++++++++++++++----
 app/styles/chats.scss                         |  4 +++
 2 files changed, 28 insertions(+), 6 deletions(-)

diff --git a/app/soapbox/features/chats/components/chat_box.js b/app/soapbox/features/chats/components/chat_box.js
index bde2f9dbf..ee2b7cd20 100644
--- a/app/soapbox/features/chats/components/chat_box.js
+++ b/app/soapbox/features/chats/components/chat_box.js
@@ -65,16 +65,22 @@ class ChatBox extends ImmutablePureComponent {
     };
   }
 
-  sendMessage = () => {
-    const { dispatch, chatId } = this.props;
-    const { content, attachment, isUploading } = this.state;
+  canSubmit = () => {
+    const { content, attachment } = this.state;
 
     const conds = [
       content.length > 0,
       attachment,
     ];
 
-    if (!isUploading && conds.some(c => c)) {
+    return conds.some(c => c);
+  }
+
+  sendMessage = () => {
+    const { dispatch, chatId } = this.props;
+    const { isUploading } = this.state;
+
+    if (this.canSubmit() && !isUploading) {
       const params = this.getParams();
 
       dispatch(sendChatMessage(chatId, params));
@@ -167,9 +173,21 @@ class ChatBox extends ImmutablePureComponent {
     );
   }
 
+  renderActionButton = () => {
+    const { resetFileKey } = this.state;
+
+    return this.canSubmit() ? (
+      <div className='chat-box__send'>
+        <IconButton icon='send' size={16} onClick={this.sendMessage} />
+      </div>
+    ) : (
+      <UploadButton onSelectFile={this.handleFiles} resetFileKey={resetFileKey} />
+    );
+  }
+
   render() {
     const { chatMessageIds, chatId, intl } = this.props;
-    const { content, isUploading, uploadProgress, resetFileKey } = this.state;
+    const { content, isUploading, uploadProgress } = this.state;
     if (!chatMessageIds) return null;
 
     return (
@@ -178,7 +196,7 @@ class ChatBox extends ImmutablePureComponent {
         {this.renderAttachment()}
         <UploadProgress active={isUploading} progress={uploadProgress*100} />
         <div className='chat-box__actions simple_form'>
-          <UploadButton onSelectFile={this.handleFiles} resetFileKey={resetFileKey} />
+          {this.renderActionButton()}
           <textarea
             rows={1}
             placeholder={intl.formatMessage(messages.placeholder)}
diff --git a/app/styles/chats.scss b/app/styles/chats.scss
index 0d882fa02..49719a638 100644
--- a/app/styles/chats.scss
+++ b/app/styles/chats.scss
@@ -236,6 +236,10 @@
       margin: 0;
     }
 
+    .chat-box__send .icon-button {
+      top: 12px;
+    }
+
     textarea {
       width: 100%;
       height: 100%;