feat(widget-message-meet): show thumbnail for in flight photos and files

webex · Jan 13, 2017 · 5f7a7da · 5f7a7da
1 parent bc0a36c
commit 5f7a7da
Show file tree

Hide file tree

Showing 6 changed files with 79 additions and 40 deletions.
diff --git a/packages/widget-message-meet/src/actions/activity.js b/packages/widget-message-meet/src/actions/activity.js
@@ -145,7 +145,7 @@ export function submitActivity(conversation, activity, user, spark) {
       shareActivity.displayName = message.displayName;
       shareActivity.content = message.content;
       shareActivity.clientTempId = inFlightActivity.clientTempId;
-      // spark.conversation.share(conversation, shareActivity);
+      spark.conversation.share(conversation, shareActivity);
       cleanupAfterSubmit(activity, dispatch);
     }
     else if (message) {

diff --git a/packages/widget-message-meet/src/components/activity-item-base/styles.css b/packages/widget-message-meet/src/components/activity-item-base/styles.css
@@ -53,7 +53,6 @@
 }
 
 .pending {
-  cursor: pointer;
   opacity: 0.25;
 }
 

diff --git a/packages/widget-message-meet/src/components/activity-item-share-file/index.js b/packages/widget-message-meet/src/components/activity-item-share-file/index.js
@@ -9,6 +9,7 @@ import styles from './styles.css';
 function ActivityItemShareFile(props) {
   const {
     file,
+    isPending,
     onDownloadClick
   } = props;
 
@@ -22,6 +23,23 @@ function ActivityItemShareFile(props) {
     onDownloadClick(file);
   }
 
+  let shareActions = ``;
+  if (!isPending) {
+    // eslint-disable-next-line no-extra-parens
+    shareActions = (
+      <div className={classNames(`share-item-actions`, styles.shareActions)}>
+        <div className={classNames(`share-action-item`, styles.shareActionItem)}>
+          <Button
+            buttonClassName={styles.downloadButton}
+            iconType={ICON_TYPE_DOWNLOAD}
+            onClick={handleDownloadClick}
+            title="Download this file"
+          />
+        </div>
+      </div>
+    );
+  }
+
   return (
     <div className={classNames(`activity-share-item`, styles.shareItem)}>
       <div className={classNames(`share-file-icon`, styles.fileIcon)}>
@@ -35,23 +53,15 @@ function ActivityItemShareFile(props) {
             <span className={classNames(`share-file-type`, styles.fileType)}>{objectType}</span>
           </div>
         </div>
-        <div className={classNames(`share-item-actions`, styles.shareActions)}>
-          <div className={classNames(`share-action-item`, styles.shareActionItem)}>
-            <Button
-              buttonClassName={styles.downloadButton}
-              iconType={ICON_TYPE_DOWNLOAD}
-              onClick={handleDownloadClick}
-              title="Download this file"
-            />
-          </div>
-        </div>
+        {shareActions}
       </div>
     </div>
   );
 }
 
 ActivityItemShareFile.propTypes = {
   file: PropTypes.object,
+  isPending: PropTypes.bool,
   onDownloadClick: PropTypes.func
 };
 

diff --git a/packages/widget-message-meet/src/components/activity-item-share-list/index.js b/packages/widget-message-meet/src/components/activity-item-share-list/index.js
@@ -12,23 +12,45 @@ function ActivityItemShareList(props) {
   const {
     content,
     files,
+    isPending,
     onDownloadClick,
     share
   } = props;
 
   const items = files.map((file) => {
     if (file.image) {
-      const thumbnail = file.mimeType === `image/gif` ? share.getIn([`files`, file.url]) : share.getIn([`files`, file.image.url]);
+      let objectUrl;
+      let isFetching = true;
+      if (isPending) {
+        objectUrl = file.thumbnail;
+        isFetching = false;
+      }
+      else {
+        const thumbnail = file.mimeType === `image/gif` ? share.getIn([`files`, file.url]) : share.getIn([`files`, file.image.url]);
+        if (thumbnail) {
+          isFetching = thumbnail.get(`isFetching`);
+          objectUrl = thumbnail.get(`objectUrl`);
+        }
+      }
       return (
         <ShareThumbnail
           file={file}
+          isFetching={isFetching}
+          isPending={isPending}
           key={file.url}
+          objectUrl={objectUrl}
           onDownloadClick={onDownloadClick}
-          thumbnail={thumbnail}
         />
       );
     }
-    return <ShareFile file={file} key={file.url} onDownloadClick={onDownloadClick} />;
+    return (
+      <ShareFile
+        file={file}
+        isPending={isPending}
+        key={file.url}
+        onDownloadClick={onDownloadClick}
+      />
+    );
   });
 
   let textItem;
@@ -49,6 +71,7 @@ function ActivityItemShareList(props) {
 ActivityItemShareList.propTypes = {
   content: PropTypes.string,
   files: PropTypes.array,
+  isPending: PropTypes.bool,
   onDownloadClick: PropTypes.func,
   share: PropTypes.object
 };

diff --git a/packages/widget-message-meet/src/components/activity-item-share-thumbnail/index.js b/packages/widget-message-meet/src/components/activity-item-share-thumbnail/index.js
@@ -10,8 +10,10 @@ import styles from './styles.css';
 function ActivityItemShareThumbnail(props) {
   const {
     file,
-    onDownloadClick,
-    thumbnail
+    isFetching,
+    isPending,
+    objectUrl,
+    onDownloadClick
   } = props;
   const {
     displayName,
@@ -21,21 +23,34 @@ function ActivityItemShareThumbnail(props) {
 
   let image;
 
-  if (thumbnail) {
-    const isFetching = thumbnail.get(`isFetching`);
-    const objectUrl = thumbnail.get(`objectUrl`);
-    if (!isFetching && objectUrl) {
-      image = <img alt="Uploaded File" src={objectUrl} />;
-    }
-    else if (isFetching) {
-      image = <div className={classNames(`spinner-container`, styles.spinnerContainer)}><Spinner /></div>;
-    }
+  if (!isFetching && objectUrl) {
+    image = <img alt="Uploaded File" src={objectUrl} />;
+  }
+  else if (isFetching) {
+    image = <div className={classNames(`spinner-container`, styles.spinnerContainer)}><Spinner /></div>;
   }
 
   function handleDownloadClick() {
     onDownloadClick(file);
   }
 
+  let shareItemActions;
+  if (!isPending) {
+    // eslint-disable-next-line no-extra-parens
+    shareItemActions = (
+      <div className={classNames(`share-item-actions`, styles.shareActions)}>
+        <div className={classNames(`share-action-item`, styles.shareActionItem)}>
+          <Button
+            buttonClassName={styles.downloadButton}
+            iconType={ICON_TYPE_DOWNLOAD}
+            onClick={handleDownloadClick}
+            title="Download this file"
+          />
+        </div>
+      </div>
+    );
+  }
+
   return (
     <div className={classNames(`activity-share-item`, styles.shareItem)}>
       <div className={classNames(`share-thumbnail`, styles.thumbnail)}>
@@ -49,25 +64,18 @@ function ActivityItemShareThumbnail(props) {
             <span className={classNames(`share-file-type`, styles.fileType)}>{objectType}</span>
           </div>
         </div>
-        <div className={classNames(`share-item-actions`, styles.shareActions)}>
-          <div className={classNames(`share-action-item`, styles.shareActionItem)}>
-            <Button
-              buttonClassName={styles.downloadButton}
-              iconType={ICON_TYPE_DOWNLOAD}
-              onClick={handleDownloadClick}
-              title="Download this file"
-            />
-          </div>
-        </div>
+        {shareItemActions}
       </div>
     </div>
   );
 }
 
 ActivityItemShareThumbnail.propTypes = {
   file: PropTypes.object,
-  onDownloadClick: PropTypes.func,
-  thumbnail: PropTypes.object
+  isFetching: PropTypes.bool,
+  isPending: PropTypes.bool,
+  objectUrl: PropTypes.string,
+  onDownloadClick: PropTypes.func
 };
 
 export default ActivityItemShareThumbnail;
diff --git a/packages/widget-message-meet/src/containers/message-meet-widget/index.js b/packages/widget-message-meet/src/containers/message-meet-widget/index.js
@@ -178,8 +178,7 @@ export class MessageMeetWidget extends Component {
       shouldScrollToBottom = true;
     }
     // Scroll to show in flight activities
-    // TODO: don't rescroll back down if you scroll up while in flight
-    if (props.conversation.inFlightActivities.size) {
+    if (props.conversation.inFlightActivities.size && props.conversation.inFlightActivities.size !== prevProps.conversation.inFlightActivities.size) {
       shouldScrollToBottom = true;
     }