Merge branch 'chat-attachments' into 'develop'

Chat attachments

Closes #356

See merge request soapbox-pub/soapbox-fe!212

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' }}>
@@ -228,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>

app/soapbox/features/chats/components/chat_box.js

@@ -10,6 +10,11 @@ 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';
+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…' },
@@ -21,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 {
@@ -35,15 +42,50 @@ class ChatBox extends ImmutablePureComponent {
     me: PropTypes.node,
   }
 
-  state = {
+  initialState = () => ({
     content: '',
+    attachment: undefined,
+    isUploading: false,
+    uploadProgress: 0,
+    resetFileKey: fileKeyGen(),
+  })
+
+  state = this.initialState()
+
+  clearState = () => {
+    this.setState(this.initialState());
+  }
+
+  getParams = () => {
+    const { content, attachment } = this.state;
+
+    return {
+      content,
+      media_id: attachment && attachment.id,
+    };
+  }
+
+  canSubmit = () => {
+    const { content, attachment } = this.state;
+
+    const conds = [
+      content.length > 0,
+      attachment,
+    ];
+
+    return conds.some(c => c);
   }
 
   sendMessage = () => {
-    const { chatId } = this.props;
-    if (this.state.content.length < 1) return;
-    this.props.dispatch(sendChatMessage(chatId, this.state));
-    this.setState({ content: '' });
+    const { dispatch, chatId } = this.props;
+    const { isUploading } = this.state;
+
+    if (this.canSubmit() && !isUploading) {
+      const params = this.getParams();
+
+      dispatch(sendChatMessage(chatId, params));
+      this.clearState();
+    }
   }
 
   insertLine = () => {
@@ -91,20 +133,76 @@ 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 });
+  }
+
+  handleFiles = (files) => {
+    const { dispatch } = this.props;
+
+    this.setState({ isUploading: true });
+
+    const data = new FormData();
+    data.append('file', files[0]);
+
+    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'>
+        <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>
+    );
+  }
+
+  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 } = 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'>
+          {this.renderActionButton()}
           <textarea
             rows={1}
             placeholder={intl.formatMessage(messages.placeholder)}
             onKeyDown={this.handleKeyDown}
             onChange={this.handleContentChange}
-            value={this.state.content}
+            value={content}
             ref={this.setInputRef}
           />
         </div>

app/soapbox/features/chats/components/chat_message_list.js

@@ -8,7 +8,10 @@ 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';
 
 const scrollBottom = (elem) => elem.scrollHeight - elem.offsetHeight - elem.scrollTop;
 
@@ -115,6 +118,26 @@ 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;
+    return (
+      <Bundle fetchComponent={MediaGallery}>
+        {Component => (
+          <Component
+            media={ImmutableList([attachment])}
+            height={120}
+            onOpenMedia={this.onOpenMedia}
+          />
+        )}
+      </Bundle>
+    );
+  }
+
   parsePendingContent = content => {
     return escape(content).replace(/(?:\r\n|\r|\n)/g, '<br>');
   }
@@ -145,12 +168,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}
-            />
+            >
+              {this.maybeRenderMedia(chatMessage)}
+              <span
+                className='chat-message__content'
+                dangerouslySetInnerHTML={{ __html: this.parseContent(chatMessage) }}
+              />
+            </div>
           </div>
         ))}
       </div>

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('…');
+};

app/styles/chats.scss

@@ -181,10 +181,64 @@
 }
 
 .chat-box {
+  .upload-progress {
+    padding: 0 10px;
+    align-items: center;
+    height: 25px;
+
+    .fa {
+      font-size: 22px;
+    }
+
+    &__message {
+      font-size: 13px;
+      flex: 1;
+      align-items: center;
+    }
+
+    &__backdrop {
+      margin-top: 2px;
+    }
+  }
+
+  &__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;
     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;
+    }
+
+    .chat-box__send .icon-button {
+      top: 12px;
+    }
 
     textarea {
       width: 100%;
@@ -192,11 +246,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;
     }
   }
 }
@@ -290,3 +346,27 @@
     }
   }
 }
+
+.chat-message .media-gallery {
+  height: auto !important;
+  margin: 4px 0 8px;
+
+  .spoiler-button {
+    display: none;
+  }
+
+  .media-gallery__item:not(.media-gallery__item--image) {
+    max-width: 100%;
+    width: 120px !important;
+    height: 70px !important;
+  }
+
+  &__preview {
+    background-color: transparent;
+  }
+
+  &__item-thumbnail img,
+  &__item-thumbnail .still-image img {
+    object-fit: contain;
+  }
+}